Thomas Wolff

Thomas Wolff

.NET developer @nrkno

🛠️ How I built this site

2 minute read

In this post I summarize how I built this site using:

  • GitHub Pages
  • Jekyll
  • An awesome theme called Minimal Mistakes

GitHub Pages

GitHub Pages is a free static webpage hosting service. Static as in you don’t get to run any code on the backend, like ASP.NET, Node, Java or PHP. All it does is serve static files (HTML, CSS and JS), so you’ll have to have another service hosting your backend if you want to do things like integrating with a database. However, GitHub Pages still has some cool use cases like

  • Blogging
  • Project/company pages
  • Documentation

GitHub Pages requires you to put your content in a repository named <your-account-name>.github.io, and then it will be accessible on https://<your-account-name>.github.io.

To get started with GitHub Pages, see the documentation on https://pages.github.com/

Jekyll

Jekyll is a tool for generating static websites, using markdown and HTML files as input. Jekyll is a Ruby gem, and GitHub Pages has built in support for building Jekyll websites using GitHub Actions.

I really like Jekyll’s support for markdown, as I use it for most of my text processing like notes, documentation, and now blogging! With Jekyll you can create all your content using markdown files, no database needed, and it will output nice looking webpages for you. Like the F# code snippet below:

// Learn more about F# at http://docs.microsoft.com/dotnet/fsharp

open System

// Define a function to construct a message to print
let from whom =
    sprintf "from %s" whom

[<EntryPoint>]
let main argv =
    let message = from "F#" // Call the function
    printfn "Hello world %s" message
    0 // return an integer exit code

That’s another nice thing about Jekyll, it’s extensible and customizable. Enabling you to use themes for getting the look and feel you want for your site, and Liquid templates for parameterizing content on your site using variables, like https://thomaswolff.github.io is inserted into this page by writing {{site.url}} in markdown.

To get started with Jekyll on GitHub Pages I followed GitHub’s documentation. However, after pushing my site to the thomaswolff.github.io repository, https://thomaswolff.github.io came out just blank.

After some Googling, I found this comment by @BenWhetton on a GitHub Issue where he proposed an alternative approach to step 7 in the GitHub’s documentation. Starting from scratch, using the suggested alternative approach for step 7, my site was up and running.

As you can see from the image below, the default theme wasn’t very exciting. Which leads me to the final step: themes!

wesite's initial theme

Minimal mistakes

GitHub Pages has built in support for some Jekkyl themes, which you can choose from using the theme chooser on the “Pages” section of the settings in your repository. None of the built in themes really appealed to me, so I started looking for others online. There’s a lot of Jekkyl themes out there. However, there was one that really stood out for me: Minimal mistakes.

Minimal mistakes has great documentation, several cool looking skins and, apart from being completely free, it has a lot of really nice features, like:

  • Navigation menus
  • Reading time (like the one you see on top of this post)
  • Comments
  • Search
  • Google Analytics

Some of the features comes with multiple providers, letting you configure each feature to your liking. As an example, I use Utterances for comments, but you can also use Disqus, Discourse, Facebook and Staticman.

Using the Minimal mistakes theme really rocketed the development of my site, saving me a lot of time and effort 🚀

Tags: , ,

Updated:

Comments