Published: May 11, 2020 by Noe Nieto
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:
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 }}"
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.
Credits
Cover photo by Markus Spiske on Unsplash