starsz / okta-blog

The Okta developer blog.

Okta Developer Blog

This is the source code repository for Okta's developer blog.

• If you're having problems running one of the tutorials for a blog post, please open an issue in this project or leave a comment on the blog post.
• If you have questions or need help with Okta's APIs or SDKs, please post to StackOverflow. If you think you've encountered a bug in one of our SDKs, please create a GitHub issue for that SDK.
• If you are looking for Okta's developer documentation, that has moved to @okta/okta-developer-docs.

Contribute

If you'd like to contribute to the blog, please send us a pull request.

This site is built using Jekyll. Blog post updates, bug fixes, and PRs are all welcome! You can create articles using Markdown (it's quite simple).

Requirements

This blog depends on both Ruby and Node currently. It has a number of dependencies.

To begin, fork this repo to your personal GitHub, then clone it:

git clone [email protected]:<your-username>/okta-blog.git

Or, if you have access to push to this repo, you can clone it directly.

git clone [email protected]:oktadeveloper/okta-blog.git

Then, install its dependencies.

gem install bundler
bundle install
npm i

If you have issues with this setup, see setting up your environment or use Docker.

Now you can build and start the site.

npm start

Visit http://localhost:4000 in your browser.

To simplify the running of the blog, you can also use Docker.

How to Create a Pull Request

First, you'll want to create a branch. The name of the branch should contain your post's keywords for readability. For example:

git checkout -b angular-spring-boot

Then, create the Markdown file and images directory for your post.

npm run post create angular-spring-boot

A page for your blog post will be created in _source/_posts. Modify this file to have your blog post's content.

Start and view in your browser.

npm start

Your browser will automatically refresh the page when you make changes.

Please review our Markdown standards for conventions we use in posts.

Docker Instructions

To begin, you should have Docker installed and working.

Then, clone this GitHub repo, or your fork:

git clone [email protected]:oktadeveloper/okta-blog.git

Once you've cloned the repository, change into the okta-blog directory to get started:

cd okta-blog

Build the Docker Image

Next, you'll want to build the Docker image. To do this, run the following command:

docker build . -t okta-blog

There's also a make build command you can use.

What this command does is:

1. Download a Linux system image
2. Install Ruby, Node, and all of this project's dependencies

The resulting image will allow you to quickly and easily run the blog on your laptop without needing all of the blog dependencies installed. Nice, right?

NOTE: If you modify any of the blog software's dependencies (the Node or Ruby dependencies, specifically), you'll need to re-run that docker build . -t okta-blog command from before. This way you'll re-create the Docker image with all the updated dependencies installed!

Run the Blog

Now that you've got the Docker image setup, all you need to do is run the Docker image to start the blog locally.

Here's the command you'll want to run:

docker run -p 4000:4000 -v $PWD:/app -it okta-blog npm start

You can use make develop as a shortcut.

What this command does is:

• -p 4000:4000 - This maps port 4000 from the Docker container to port 4000 on your computer's localhost. This way you can easily access the blog website.
• -v $PWD:/app - This mounts the current directory (the okta-blog source code repo) as /app in the Docker container's filesystem. This way, if you change articles or mess with the blog locally, your changes will be picked up by the blog software.
• -it - These CLI options just map the Docker container to your current terminal so that when you CTRL+c to exit the blog the Docker container will be killed.
• okta-blog - This is telling Docker to run the okta-blog image you created earlier using that docker build command. The -t option you specified earlier when running docker build assigned a name tag to the image so you could easily reference it.
• npm start - This is the actual command you're telling Docker to run to launch the blog sofware. Docker will start the container up and then run this command inside the container to launch the Jekyll blog.

After that, all you have to do is open your browser and visit http://localhost:4000 to visit the site!

Markdown Standards

This section describes Markdown standards we like to use in our blog posts. These conventions also pertain to AsciiDoc, if you choose to use it.

• Use the Okta CLI
• Blog Markdown Conventions
• Add a Changelog

Use the Okta CLI to Register Your App

To describe how to setup a new application on Okta, please use the cli.md or maven.md includes.

These will render instructions using the Okta CLI (or Okta Maven Plugin) and link to instructions for the Admin Console. Screenshots are discouraged because they're hard to keep up-to-date.

The basic syntax for using the Okta CLI to set up an app is:

{% include setup/cli.md type="spa" loginRedirectUri="http://localhost:8080/callback" %}

Supported values for type: spa, web, native, service, token, and jhipster

Other parameters you can pass in:

Parameter	Possible values
framework	Angular, React, Vue, Okta Spring Boot Starter, Spring Boot, Quarkus, ASP.NET Core
loginRedirectUri	Prints whatever you set, can be comma-delimited, or use an array for multiple values [url1, url2]
logoutRedirectUri	Prints whatever you set, or defaults if not set
signup	false reduces opening paragraph to one sentence
note	Prints whatever you set. See .NET example below
install	false removes 'Install the Okta CLI' sentence

See How to Create an OIDC App on Okta for this feature's documentation.

Blog Markdown Conventions

• For directories and filenames, surround with back ticks (e.g. filename.txt or /src/component/dummy.file)
• For code snippets that are only a few words. Inline back ticks (e.g. Run npm install from the command line)
• For button or link names surround with two asterisks (e.g. Then click Done)
• When adding function names inline, add the parentheses and back ticks (e.g. This calls the render() method)
• http://localhost links should be wrapped in back ticks (e.g. http://localhost:3000)
• Links that start with developer.okta.com should be relative (e.g. instead of https://developer.okta.com/docs/whatever.html, just use /docs/whatever.html)
• Code with {{ variable }} needs a "raw" wrapper. For example:

{% raw %}
```html
<span>{{ title }} app is running!</span>
```
{% endraw %}

For Markdown images, the macro looks as follows:

{% img blog/<post-images-dir>/<image-file-name> alt:"<text for screen readers>" width:"800" %}{: .center-image }

For AsciiDoc:

image::{% asset_path 'blog/<post-images-dir>/<image-file-name>' %}[alt=text for screen readers,width=800,align=center]

To add a table of contents, use the following:

**Table of Contents**{: .hide }
* Table of Contents
{:toc}

For AciiDoc, add the following just after the front matter:

:page-liquid:
:toc: macro

Then, add the following wherever you'd like the table of contents to appear:

toc::[]

Add a Changelog

If you update a post to fix a bug or upgrade dependencies, you should add a changelog. You can add this to the front matter with a changelog key.

Please be sure to link to the pull request that updates the post and the pull request that updates the example app on GitHub.

For example:

---
layout: blog_post
...
changelog: 
- 2020-08-31: Updated GitHub repo to have proper starter files and fixed logout in Vue. You can see the changes in the [example app on GitHub](https://github.com/oktadeveloper/okta-kotlin-spring-boot-vue-example/pull/4). Changes to this article can be viewed in [oktadeveloper/okta-blog#392](https://github.com/oktadeveloper/okta-blog/pull/392).
---

This will render a "last updated" date at the top, and a changelog at the bottom. The list should be ordered last to first. See this post (source) for an example.

Utilities

There are a number of scripts available to assist with content creation.

NOTE: If you're using Docker, prefix the commands below with:

docker run -v $PWD:/app -it okta-blog

Create a New Post

npm run post create [post-name] [format] [date]

Creates a new post under _source/_posts with the given name and populates it the file with a blank front matter template. Also creates a folder with the same name for images under _source/_assets/img/blog. Format can be md (default), adoc, or any file extension. If date is not specified, it will default to today's date.

Example:

npm run post create build-crud-app-with-nodejs

Stamp a Post

npm run post stamp [date]

Finds the latest blog post and updates the post date to the date specified. Date should be in ISO format (e.g. 2019-08-31). If no date is specified, today's date is used.

Faster Rendering for Development

npm run dev
npm start

This command removes all posts from the local development environment except those dated within the last two weeks. If you pass in a file name (or comma-separated list of filenames), it'll keep those too.

Restoring Deleted Posts Before Pushing to GitHub

Deleted posts are restored automatically before the push occurs. However, you can manually restore all deleted posts using the following.

npm run dev-restore