Migrating blog from GH Pages to GH Actions

This is how my blog looks before update:

GitHub Pages is cool, but it only supports a fixed set of themes. After several years of neglect, the COVID19 quarantine gave me enough spare time to give my blog some long needed attention.

Initially I wanted to use the foundation theme, but after some thought I ended using bulma-clean-theme because colors are nicer and also has some degree of configurability.

These are the things I did:

• I added a new front-page layout to present the latest 5 posts.
• Configured the new navigation menu links:
• Setup a page for the posts archive
• The about page was ugly and had to go, so i replaced it with a link to my main page.
• I also upgraded Jekyll to 3.8

I also worked a bit on the deployment. I want to make the deployment automatic. GH Pages didn't like my customizations, so I had to find another way.

GH Actions to the rescue.

I ended up concocting something like this:

{% raw %}

name: Jekyll site CI

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - name: GitHub Checkout
        uses: actions/checkout@v1
      - name: Bundler Cache
        uses: actions/cache@v1
        with:
          path: vendor/bundle
          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}
          restore-keys: |
            ${{ runner.os }}-gems-
      - name: Build & Deploy to GitHub Pages
        uses: joshlarsen/jekyll4-deploy-gh-pages@master
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          GITHUB_REPOSITORY: ${{ secrets.GITHUB_REPOSITORY }}
          GITHUB_ACTOR: ${{ secrets.GITHUB_ACTOR }}
      - name: Rsync the build
        uses: Pendect/action-rsyncer@v1.1.0
        env:
          DEPLOY_KEY: ${{secrets.DEPLOY_KEY}}
        with:
          src: _site/
          # Remote server and path. i.e user@server.com:/var/www/server.com/
          dest: nnieto@opal7.opalstack.com:/home/nnieto/apps/blog_noenieto_com/
      - name: Display status from deploy
        run: echo "${{ steps.deploy.outputs.status }}"

{% endraw %}

The steps of this pipeline are:

• Checkout the latest changes on master
• Cache bundler dependencies.
• Build the blog and save it to the _site folder.
• Upload the site using rsync.

To configure the rsync connection to my server I created a SSH keypair using the Ed25519 algorithm. After that I copied the private key and pasted it as DEPLOY_KEY into my repo's encrypted secrets.

I created a .nojekyll file in the root of my repository so that the GH Pages robot won't try to build my site.

Finally I reconfigured my DNS to point to the new server. And this is the way it looks now.

{:class="img-responsive"}

Credits

Cover photo by Markus Spiske on Unsplash