Blog Site
Projects | | Links: GitHub Link
This project is this site itself. It’s a simple blog site which will serve as a platform for documenting my journey through various projects. The development, deployment, and hosting of the blog site is the “project” that is documented here.
I wanted to put up a site to host a resume and share some other content. I also knew I’d rather move to other more interesting projects than spend too much time on the site itself. I had some exposure to using Jekyll sites from collaborating with my brother, Erik, and friends on our indie-community-radio station, The Pork Chop Express. I especially liked the simplicity of building a Jekyll site with GitHub Actions and hosting it via GitHub Pages. I found a nice theme I liked in Hydejack, a fork of the popular Hyde theme. I like HydeJack’s support for JSON resume, dark theme support, and several other features.
Process
Getting Started with Jekyll
I struggled with some dependency issues with Jekyll, especially when moving between development on my WSL2 development environment on my main home PC and my M1 Silicon MacBook Pro. After a little bit of time, I did get Jekyll working with Ruby v. 3.3.3. The more interesting result was that this experience caused me to look for a version manager for switching between versions of Ruby. I chose to go with asdf, using the asdf-ruby plugin rather than the several alternatives, chruby, rbenv, or rvm. I primarily chose asdf for its reusability as it supports many languages and tools with its existing plugins.
Jekyll itself is extremely easy once you get your development environment set up for it.
Summed up, my setup looked something like this:
(from root dir of jekyll site content, where _config is located)
brew install coreutils curl git\
git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.14.0\
echo -e "\n. $(brew --prefix asdf)/libexec/asdf.sh" >> ${ZDOTDIR:-~}/.zshrc\
asdf plugin-add ruby
asdf install ruby 3.3.3
asdf local ruby 3.3.3
bundle install
bundle exec jekyll build
bundle exec jekyll serve
Site Content
Getting the site content filled in is, of course, the lion’s share of the work here. As far as structure goes, I won’t describe it here, as it’s covered in Jekyll documentation and the specifics of the Hyde & HydeJack themes. I ended up spending a bit of time using some AI-powered tools to prepare graphic design-related content for the site, e.g. background removal for headshots, resizing of images for logos/favicon. For these purposes, those tools worked amazingly well; just a shame really that kids these days will never get to experience the patience-training tedium of isolating content with the pen tool in Photoshop.
Domain Registry
This is extremely simple. Still, I’d never done it before for lack of any need. I spent more time searching for which domain registrar to choose. I landed on one, and from there it’s a very simple task to set up DNS to point the GitHub Pages site to my new registered domain.
Delivery
Jekyll plays very well with GitHub Pages, and they both play well together with GitHub Actions, so this project was a very accessible initial exploration of GitHub Actions. I played around with several approaches, I wanted to find a way to set up a simple continuous integration and deployment approach. Actually deploying multiple versions of the site to be viewable as hosted on GitHub Pages as “stages” was a little tricky, however, and in the end, I decided that simply building and viewing the Jekyll site locally is plenty for this purpose. The build process for integration was enough to make sure changes won’t break the site.
As of writing, the workflow I’m using is a slightly modified version of the suggested Jekyll workflow. I adjusted the workflow to trigger the build job on both push and merge to main and develop branches, but only deploy when run on triggers for main. Then set branch rules to require successful build checks for those two branches from the action, and set up the settings for GitHub Pages to use GitHub Actions as its source, and tada, CI/CD. Neat.
name: Deploy Jekyll site to Pages
on:
push:
branches: [main, develop]
pull_request:
types: [opened, synchronize, reopened]
branches: [main, develop]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
# Build job
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Ruby
uses: ruby/setup-ruby@086ffb1a2090c870a3f881cc91ea83aa4243d408 # v1.195.0
with:
ruby-version: '3.2.2' # Not needed with a .ruby-version file
bundler-cache: true # runs 'bundle install' and caches installed gems automatically
cache-version: 0 # Increment this number if you need to re-download cached gems
- name: Setup Pages
id: pages
uses: actions/configure-pages@v5
- name: Build with Jekyll
# Outputs to the './_site' directory by default
run: bundle exec jekyll build --baseurl "$"
env:
JEKYLL_ENV: production
PAGES_REPO_NWO: alex-thorne/blog
- name: Upload artifact
# Automatically uploads an artifact from the './_site' directory by default
uses: actions/upload-pages-artifact@v3
# Deployment job
deploy:
if: github.ref == 'refs/heads/main'
environment:
name: github-pages
url: $
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
my slightly modified jekyll github actions workflow
Take-away
Learnings:
- finding asdf for version management
- low-cost of entry initial experience with GitHub Actions
- Forced to use some AI tools (Canva, ChatGPT-based Image Generator for site graphic assets (icons, headshots, logo))
- finding the JSON Resume format
- Having to think closely about sensitive content control if maintaining this project as a public repository
Project Details
- Date started: 14-07-2024
