This website existed a long time ago, and was composed by the following elements:

  • Twitter bootstrap
  • nanoc static website generator

Well, at some point you have to keep your components updated and the obvious happened … I didn’t and wasn’t able to publish easily contents as I was using the first bootstrap version and updating was something I didn’t want to do, for no valid reason.

Also, I would need to have nanoc site content generator installed to publish something new.

I left it rotting for years because of it and at some point my VPS disappeared and so did the code. Well, I searched for a quite convenient solution and doing so, stubled on GitHub Pages. Here’s what I did to get this site running again, without much hassle.

This is going to be inspired by documentation pages

Basic hosting

  1. Head over to GitHub and create a new public repository named username.github.io, where username is your username (or organization name) on GitHub.
git clone https://github.com/username/username.github.io
  1. Add some content and push it there with the first commit:
git add --all
git commit -m "Initial commit"
git push -u origin main

You’ll get your content available directly at username.github.io. That’s it.

Adding content isn’t harder than a commit.

Using a custom domain

Well, I wouldn’t mind using a github.io fqdn, but I own a domain name so, let’s use it.

Go to your domain registrar (I use EuroDNS) and configure the following records:

* in CNAME b3nj.github.io.

@ in CNAME b3nj.github.io.

I would rather recommand this option instead of configuring A and AAAA records, at least the records will be updated.

Then:

  • On GitHub, navigate to your site’s repository.
  • Under your repository name, click Settings. If you cannot see the “Settings” tab, select the dropdown menu, then click Settings.
  • Screenshot of a repository header showing the tabs. The “Settings” tab is highlighted by a dark orange outline. In the “Code and automation” section of the sidebar, click Pages.
  • Under “Custom domain”, type your custom domain, then click Save.

Securing pages with HTTPS

That’s easy:

  • On GitHub, navigate to your site’s repository.
  • Under your repository name, click Settings. If you cannot see the “Settings” tab, select the dropdown menu, then click Settings.
  • Screenshot of a repository header showing the tabs. The “Settings” tab is highlighted by a dark orange outline.
  • In the “Code and automation” section of the sidebar, click Pages.
  • Under “GitHub Pages,” select Enforce HTTPS.

Jekyll

What’s awesome is that you can use Jekyll static website generator in your website and GitHub will automatically build it using GitHub actions and represent it … it’s quite well documented.

In your local repository, launch the Jekyll init command:

jekyll new --skip-bundle .

Then:

  • Open the Gemfile that Jekyll created.
  • Add “#” to the beginning of the line that starts with gem “jekyll” to comment out this line.
  • Add the github-pages gem by editing the line starting with # gem “github-pages”. Change this line to:
gem "github-pages", "~> GITHUB-PAGES-VERSION", group: :jekyll_plugins
  • Replace GITHUB-PAGES-VERSION with the latest supported version of the github-pages gem. You can find this version here: “Dependency versions.” The correct version Jekyll will be installed as a dependency of the github-pages gem.
  • Save and close the Gemfile.
  • From the command line, run bundle install.

Then you’re good to go … Have fun learning how to use Jekyll.