Today I decided to check feature GitHub Actions. My goal is to prepare configuration for GitHub Actions and publish a site based on Jekyll 4.1

GitHub Actions step by step for Jekyll

To use GitHub Actions, you need to create the folder .github/workflows. Inside this folder will be the GitHub Actions configuration. Each file is responsible for a separate GitHub Actions workflow. There are already actions at GitHub that help build a website based on Jekyll.

For the Jekyll build to go correctly, you need a JEKYLL_PAT key. To generate the key go to Settings in your GitHub profile. Then go to Developer settings and then go to Personal access tokens. Click Generate new token button and confirm your GitHub password. Fill out the form New personal access token as follows:

  • Note: GitHub Actions
  • Select checkbox public_repo
  • Click Generate token

A new GitHub API key will appear, so copy it. You have to paste it elsewhere, so if you lose it, you have to repeat the process.

Now go to the repository Settings and go to the Secrets settings. Click the New secret button and fill in the Secrets / New secret form as below:

  • Name: JEKYLL_PAT
  • Value: paste the copied GitHub Actions key here
  • Click Add secret

Settings on the GitHub side are almost ready. Now you need to prepare the configuration on the repository side.

Configuration file .github/workflows/deployment.yml:

name: deployment

on:
  push:
    branches:
      - master

jobs:
  github-pages:
    runs-on: ubuntu-18.04
    steps:
    - uses: actions/checkout@v2

    - uses: actions/cache@v1
      with:
        path: vendor/bundle
        key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}
        restore-keys: |
          ${{ runner.os }}-gems-

    - uses: helaili/jekyll-action@2.0.3
      env:
        JEKYLL_PAT: ${{ secrets.JEKYLL_PAT }}

After doing git commit and git push, the GitHub Actions process should start. The process workflow can be viewed in the tab Actions. The name of this process is deployment (see the value of the key name in .github/workflows/deployment.yml file). After selecting the process name (in this case deployment) and commit name, you can see the GitHub Action process workflow.

▶ ✓ Set up job
▶ ✓ Build helaili/jekyll-action@2.0.3
▶ ✓ Run actions/checkout@v2
▶ ✓ Run actions/cache@v1
▶ ✓ Run helaili/jekyll-action@2.0.3
▶ ✓ Post Run actions/cache@v1
▶ ✓ Post Run actions/checkout@v2
▶ ✓ Complete job

If everything is green, it means that the whole process was successful. If any step fails, you need to read the detailed information for that step. A good practice is to add a badge to the README file.

![Build and deploy](https://github.com/USER/REPO/workflows/WORKFLOW/badge.svg)

Where USER is the username, REPO is the GitHub repository name and WORKFLOW is the name of the GitHub Action process. Below is a preview of passing and failing badges.

deployment deployment passing passing deployment deployment failing failing

In most cases, the above instructions should allow you to build static websites based on Jekyll on GitHub Actions. This blog also uses this configuration.


Simple dictionary

  • JEKYLL_PAT - Jekyll Personal Access Token