Build your personal website without spending any money

12 min readJul 29, 2020

In this article, we’ll walk through how to set up a Jekyll-powered blog using the Minimal Mistakes theme.

It’s not always clear why we need a personal website, but here’s the truth, especially for developers: a website is an effective medium to let the world know who we are, what we are capable of, and what our values are.

The purpose of the website you want to build can vary; it could be a blog, portfolio, landing page, or multi-purpose site. In my case, I need a website to:

Showcase my projects
Blog about my experiences, my knowledges in the programming and my other interests
Share information about me that would be of interest to a recruiter, including my resume, email, and links to my Github, Medium, and LinkedIn pages.
Being able to easily generate and publish blog posts is another extremely beneficial, but not required featured.

Initially, I tried to create my website using HTML, CSS, and serving it with GitHub Pages. However, I realized it would take a lot of time to complete, not to mention the time needed to customize the website for each post.

I searched for a solution on the internet and found the awesome technology called “Static Site Generator.”

I . STATIC SITE GENERATOR

You may have already heard about static site generators. They aren’t new; they were what we used to build the web before dynamic CMSs (WordPress, Drupal, etc.) took over.

What’s new is that modern tools — like static site generators — have emerged over the last few years and expanded the capabilities of static sites.

A static site generator is an application that takes a template directory containing raw text files in various formats, processes them through a converter (like Markdown) and its Liquid renderer, and outputs a complete, ready-to-publish static website suitable for serving with your favorite web server.

With the growth of the JAMstack and its community, Static Site Generators are becoming more and more popular.

So, why use a static generator?

Speed
Security
Development workflow: no need to create the backend server. This makes it incredibly easy to run your site locally, automate builds, switch to a different host, etc.
There are a lot of themes available, fast build, easy maintenance. That’s true. You can even build a beautiful website within minutes.

There are many static site generators available, you can check them out on staticgen.com

In this article I will present one of them : Jekyll

Jekyll

Jekyll is an extremely popular static site generator. It is an open-source program in Ruby created by GitHub co-founder Tom Preston-Werner. Jekyll enables developers to transform plain text into static websites and blogs. It serves as the engine behind GitHub Pages, allowing you to host sites directly from your GitHub repositories.

Jekyll is built with the Ruby programming language. I’m currently learning web development with Ruby & Ruby on Rails at The Hacking Project. So, if you come from a Ruby/ROR background like me, you’ll want to explore Jekyll.

So let’s see how I create my personal blog. And don’t forget that will be totally free.

II. INSTALLATION & BUILD

There are multiple ways to get started with Jekyll, each with its own variations. Here are a few options:

Install Jekyll locally via the command line, create a new boilerplate website using jekyll new, build it locally with jekyll build, then serve it.

Make sure you have installed Jekyll on your machine with gem install bundler jekyll. For the full installation guide, you can check out the official guide on jekyllrb.com.

Take a Jekyll theme and clone it to your local machine, install Jekyll locally via the command line, make updates to your website, build it locally, and then serve it. (You can also fork a starting point and make changes to it.)

We’ll start with the easiest option: using an available Jekyll theme. This will get us up and running in just a few minutes.

So, let’s choose a theme together.

Nowadays, there are many Jekyll themes, both free and paid. Developers design these templates perfectly for any corporate business and blogging website.

You can explore some excellent paid Jekyll themes here.

But as the title suggests, we will build our website without paying anything, choosing only free themes.

You can find almost all the free Jekyll themes on Free Jekyll Themes and choose the one you prefer.

2.1 Minimal mistakes Jekyll theme

I will introduce you to a really good theme for building a blog: the "Minimal Mistakes" theme, created by Michael Rose. Thank so much Michael for providing an awesome Jekyll theme for the community.

Its advantages:

Free theme
Very recommended by community: 7k starts and 12k forks on github Source Github mmistakes
Full features for blog
Responsive mobile, tablet, desktop
Compatible with GitHub Pages.
Support for Jekyll’s built-in Sass/SCSS preprocessor.
Nine different skins (color variations).
Commenting support (powered by Disqus, Facebook, Google+, Discourse, static-based via Staticman, and utterances).
Google Analytics support

We already have a starting point, now, all we need to do is install this theme on your machine.

2.2 Clone Minimal mistakes theme to your machine

As we will use GitHub Pages to serve our blog, before we clone it to the local machine, I will explain how to create a new repository on GitHub.

You probably won’t need to do it the same way, as there are many different ways to do it. This is just a simpler way for me.

2.3 Init repository on the local machine

Create a repository on Github

Instead of using git init via the command line, I create it directly on GitHub.

This way, we can easily define the visibility of the repository: public or private, and we can initialize it with the template of .gitignore and LICENSE. I named this repo demo-jekyll-mmtakes

If you want this website to be the origin GitHub pages, meaning the domain name of your website is github-user-name.github.io, you will need to create a repository with this name: “github-user-name.github.io”.

For example, my GitHub pages: tduyng.github.io, so I need to create a repository named: “tduyng.github.io”.

You can check how to create GitHub Pages in the official GitHub documentation: https://guides.github.com/features/pages/

After we clone the repository that we just created with git clone on the local machine.
Now, we will clone mmistakes repository.

Enter the mmistakes directory, remove .git, LICENSE, and README files
Then, we move all files from the mmistakes directory to our local repository: demo-jekyll-mmistakes
Don’t hesitate to make a git commit when you finish that step with a message “Init mmistake theme,” for example.

2.4 Setup development environment

First, let’s make sure your development environment is ready.

Ensure you have installed Ruby and Ruby gems, and Jekyll on your computer.
You’ll be using your own text editor and terminal app.
Once your development environment is set up, you can try running the server to view your page as it is.
Use bundle install to install all gems dependencies, and jekyll serve or bundle exec jekyll serve to run server. The page will be running on the localhost:4000

The result on your browser:

We have nothing to show on the page now because we need to customize the Minimal Mistakes theme and create a new post.

2.5 Customize mmistake theme

2.5.1 Configurations

Before customizing, let’s take a look at the folder structure of our project:

Tree folder of my repository demo-jekyll-mmistakes

To customize your website, you’ll need to modify the _config.yml file to set up the initial settings.

In the config.yml, Michael has detailed the significance of each tag. For example, here’s how I modified the config.yml file for my blog:

# theme: 'minimal-mistakes-jekyll'
remote_theme           : "mmistakes/minimal-mistakes"
minimal_mistakes_skin: 'mint' # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"

# Site Settings
locale: 'en-US'
title: 'Adev42 blog'
title_separator: '|'
subtitle: # site tagline that appears below site title in masthead
name: 'Tien Duy'
description: 'Software - Fullstack Web developper'
url: &url 'https://tduyng.github.io' # the base hostname & protocol for your site e.g. "https://mmistakes.github.io"
baseurl: # the subpath of your site, e.g. "/blog"
repository: 'tienduy-nguyen/demo-jekyll-mmistakes' # GitHub username/repo-name e.g. "mmistakes/minimal-mistakes"
teaser: '/assets/images/page-cover.png' # path of fallback teaser image, e.g. "/assets/images/500x300.png"
logo: # path of logo image to display in the masthead, e.g. "/assets/images/88x88.png"
masthead_title: # overrides the website title displayed in the masthead, use " " for no title
breadcrumbs: true # true, false (default)
words_per_minute: 200

minimal_mistake_skin: 'mint is the background color for your website. There 9 options to choose: “air”, “aqua”, “contrast”, “dark”, “dirt”, “neon”, “mint”, “plum”, “sunrise”. Check detail how it looks at skin mmistake.

Search provider: I use “lurn” by default. If you want to use “algolia” you can change it.

search: # true, false (default)
search_full_content: # true, false (default)
search_provider: lunr # lunr (default), algolia, google
algolia:
  application_id: # YOUR_APPLICATION_ID
  index_name: # YOUR_INDEX_NAME
  search_only_api_key: # YOUR_SEARCH_ONLY_API_KEY
  powered_by: # true (default), false
google:
  search_engine_id: # YOUR_SEARCH_ENGINE_ID
  instant_search: # false (default), true

Here, you can provide your social information, such as your name, bio, location, and email. Additionally, you can include links to your website, Twitter, LinkedIn, and GitHub profiles.

author:
  name: *name
  avatar: '/assets/images/avatar.jpg' # path of avatar image, e.g. "/assets/images/bio-photo.jpg"
  bio: 'Love people who code'
  location: 'Paris, France'
  email: 'z@tduyng.github.io'
  links:
    - label: 'Website'
      icon: 'fas fa-fw fa-link'
      url: 'https://tienduy-nguyen.github.io'
    - label: 'Twitter'
      icon: 'fab fa-fw fa-twitter-square'
      url: &twitterUrl 'https://twitter.com/tienduy_nguyen'
    - label: 'LinkedIn'
      icon: 'fab fa-fw fa-linkedin'
      url: &linkedinUrl 'https://linkedin.com/in/tienduy-nguyen'
    - label: 'GitHub'
      icon: 'fab fa-fw fa-github'
      url: &githubUrl 'https://github.com/tienduy-nguyen'
    # - label: 'Facebook'
    #   icon: 'fab fa-fw fa-facebook-square'
    #   url: &fbUrl 'https://www.facebook.com/'
    # - label: 'StackOverflow'
    #   icon: 'fab fa-fw fa-stack-overflow'
    #   url: &stackOverflowUrl 'https://stackoverflow.com/'
      
# Site Footer
footer:
  links:
    - label: 'Twitter'
      icon: 'fab fa-fw fa-twitter-square'
      url: *twitterUrl
    - label: 'LinkedIn'
      icon: 'fab fa-fw fa-linkedin'
      url: *linkedinUrl
    - label: 'GitHub'
      icon: 'fab fa-fw fa-github'
      url: *githubUrl

Lastly, you can specify the gem plugins you want to use. For example, I’ve added the jemoji plugin, which allows us to use emoji markdown on our page.

plugins:
  - jekyll-paginate
  - jekyll-sitemap
  - jekyll-gist
  - jekyll-feed
  - jekyll-include-cache
  - jemoji
whitelist:
  - jekyll-paginate
  - jekyll-sitemap
  - jekyll-gist
  - jekyll-feed
  - jekyll-include-cache
  - jemoji

These are just some of the configurations you can customize in the _config.yml file. Once you’ve made your changes, save the file and move on to the next step.

2.5.2 Gemfile

Your Gemfile is currently empty, so you need to add some Jekyll plugins that you’ve declared in your `_config.yml` file.

source "https://rubygems.org"

# Hello! This is where you manage which Jekyll version is used to run.
# When you want to use a different version, change it below, save the
# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
#
#     bundle exec jekyll serve
#
# This will help ensure the proper Jekyll version is running.
# Happy Jekylling!
ruby "2.7.1"
gem "jekyll", "~> 3.8.5"

# This is the default theme for new Jekyll sites. You may change this to anything you like.
# gem "minima", "~> 2.0"
gem "minimal-mistakes-jekyll"

# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
# uncomment the line below. To upgrade, run `bundle update github-pages`.
# gem "github-pages", group: :jekyll_plugins

# If you have any plugins, put them here!
group :jekyll_plugins do
  gem "jekyll-remote-theme"
  gem "jekyll-paginate"
  gem "jekyll-sitemap"
  gem "jekyll-gist"
  gem "jekyll-feed", "~> 0.6"
  gem "jemoji"
  gem "jekyll-include-cache"
end

After modified your gem file, we will return in the terminal to run server

2.5.3 Run server

bundle install # install all gems in Gemfile
bundle update # update multiple gems

to run the serve, type:

bundle exec jekyll serve

Open you browser at localhost:4000 to view the result.

Looks better, right?

You’re almost finished with the customization. Next, we’ll create the first posts and customize our navbar.

2.5.4 Create posts

All posts should be placed in the _posts folder. If you don’t have one, simply create it.

When you clone the Minimal Mistakes repository from GitHub, you’ll find two folders named docs and test. These folders contain documentation and examples for different types of posts, which can be very helpful.

For a quick demo, copy all the posts from the test/_posts folder to your _posts folder. You can use both Markdown and HTML files for your posts. Personally, I prefer Markdown because it’s faster to write and customize.

If you’re new to Markdown, you can learn from tutorials like markdownguide.org.

Each post should include:

Title
Category
Tag

Here’s an example of the first part of a post in Markdown:

---
title: "Markup: HTML Tags and Formatting"
header:
  teaser: "assets/images/markup-syntax-highlighting-teaser.jpg"
categories:
  - Markup
tags:
  - content
  - css
  - formatting
  - html
  - markup
---

And here’s an example of the content of the post:

A variety of common markup showing how the theme styles them.

## Header two

### Header three

#### Header four

##### Header five

###### Header six

## Blockquotes

Single line blockquote:

> Stay hungry. Stay foolish.

Multi line blockquote with a cite reference:

> People think focus means saying yes to the thing you've got to focus on. But that's not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I'm actually as proud of the things we haven't done as the things I have done. Innovation is saying no to 1,000 things.

<cite>Steve Jobs</cite> --- Apple Worldwide Developers' Conference, 1997
{: .small}

## Tables                        |

| Header1                       | Header2 | Header3 |
| :---------------------------- | :-----: | ------: |
| cell1                         |  cell2  |   cell3 |
| cell4                         |  cell5  |   cell6 |
| ----------------------------- |
| cell1                         |  cell2  |   cell3 |
| cell4                         |  cell5  |   cell6 |
| ============================= |
| Foot1                         |  Foot2  |   Foot3 |

Here is some example of our pages when we added already the posts:

As you can see, the minimal mistakes theme is really excellent. It helps us to have a modern blog with the awesome features:

Pagination, next page, previous page
Menu of header in each post
Custom type header of post with image, video, overlay image
Group articles by categories and tags, category archives, tag archives
Feature share article to Twitter, Facebook, Linkedin
Show the related articles in the last of post
Highlight syntax
Search engine
Responsive
And so much more …

I really love this theme. Thank again for Michael.

So, the last thing we need to do in this article is navigation.

2.5.5 Navigation

Customizing the navigation is straightforward as Michael has already set it up for us. We just need to make some adjustments.

Navigate to the _data folder in the directory tree, and you’ll find navigation.yml. Customize it as follows:

# main links
main:
  - title: 'About'
    url: https://mmistakes.github.io/minimal-mistakes/about/
  - title: 'Posts'
    url: /posts/
  - title: 'Categories'
    url: '/categories'
  - title: 'Tags'
    url: '/tags'
  - title: 'Search'
    url: '/search'

The result is: