Build your own Blog website without spending any money
In this article, we’ll walkthrough how to setup a Jekyll powered blog using the Minimal mistakes theme and will Deploy it on Github pages for free of cost.
It’s not always clear why we need need a personal website. But here’s the truth, mostly if we are 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.
It depends on the purpose of website that you want to build for example blog, portfolio, landing page, multi-purpose …But for 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.
In the first time, I tried to create my website with the pages HTML, CSS and serve its with Github pages. But I would need a a lot of time to complete it. That does not include the time I need to customize the website for each post.
I search the solution on the internet, and I found the awesome technology “Static Site Generator”.
I . STATIC SITE GENERATOR
You may be hear already about the static site generator. They aren’t new. They were what we used to build the web before dynamic CMSs (WordPress, Drupal, etc.) took over.
What’s new, then? Modern tools — like static site generators — came out over the last years and expanded the capabilities of static sites.
Static site generator is an application takes a template directory containing raw text files in various formats, runs it through a converter (like Markdown) and its Liquid renderer, and spits out 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.
- Fast
- Security
- Development work flow: no need to create the back-end server. This makes it incredibly easy to run your site locally, automate builds, switch to a different host, etc.
- A lot of themes available, fast build, easy for maintenance. That’s true. You even build a beautiful website after some minutes.
There a lot of static site generators, check out on staticgen.com
Some popular static generator
In this article I will present one of them : Jekyll
Jekyll
Jekyll is a static site generator extremely popular. It is GitHub co-founder Tom Preston-Werner’s popular Ruby open source program. It prompts developers to transform your plain text into static websites and blogs.
Jekyll is the engine behind GitHub Pages, which you can use to host sites right from your GitHub repositories.
Jekyll is built with Ruby programming language. I’m now learning the web development with Ruby & Ruby on Rails at The Hacking Project. So if you’re coming from a Ruby/ROR background , you will be willing to check what’s in with 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 a few options:
- Install Jekyll locally via the command line, create a new boilerplate website using
jekyll new
, build it locally withjekyll build
, then serve it.
Make sure you installed jekyll on your machine gem install bundler jekyll
. For the full installation, you can check out on the official guide jekyllrb.com.
How to install Jekyll on your local machine
For this you need:
- A Github account
- Ruby installer according to your OS
- A Git editor
Without any further due, let’s start the tutorial.
- First you need to install the ruby installer. This follows the steps, agree to the terms and conditions and finish its installation.
- Once you have finished the installation of Ruby installer, you will be directed to the command prompt of your system.
- In the command prompt, you have to do 3 things first. As you can see that in order to use Ruby Installer properly. You need to update 3 things.
- So, you have to press 1 and hit enter. You can see something updating in the terminal. After then, press 2, hit enter, let the update to be completed. And then again press 3, hit enter, and let the final update take place.
- Its time to install other dependencies/tools.
- Once you have done this, close that terminal.
- Open a new command prompt terminal.
- Now use this command to check the installed version of Ruby.
ruby -v - Then use this command to check the installed version of Gem.
gem -v
1o. Finally install Jekyll
gem install Jekyll bundler
11.After the successful installation, check the installed version of Jekyll.
jekyll -v
NOTE: There is no need for Ruby understanding. The most task just requires a basic or deeper knowledge of markdown and liquid, but both are easy to learn. Only if you want to build plugins, you’ll need Ruby. Jekyll works fine on Windows.
Install Jekyll on your machine
- Open terminal/cmd on machine
- Before installing jekyll, we need to ensure the correct version of ruby is installed on the machine because jekyll runs on ruby. (Ruby version must be 2.1 or higher)
To check the version of ruby installed, type
ruby -v
3. Now we need to check if the right version of gem is installed. To check the version of gem, type
gem -v
4. Now, you need to go ahead and install jekyll.
To install jekyll, type
gem install jekyll bundler
This should fetch all the jekyll files needed and install them.
5. Once the installation is done, check the version of jekyll installed by typing
jekyll -v
- 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 it).
We’ll get start with the easiest option: Take a available theme of Jekyll. This will only get us up and running in a few minutes.
So, let’s choose a theme together.
Nowadays, there are a lot of Jekyll themes, both free and paid. Developers are design the templates perfectly for any corporate business and blogging website.
You can check some excellent paid Jekyll themes here.
But as the title I wrote, we will build our website without paying anything, we’ll choose only the free themes.
You can found almost the free Jekyll themes on the Free Jekyll Themes and choose the one you prefer.
2.1 Minimal mistakes Jekyll theme
I will show you a really good one theme for building a blog. It is “Minimal mistake theme”, create by Michael Rose. Thank so much Michael has provide 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
So, we have already a starting point, the thing we need to do now is install this theme on your machine.
2.2 Clone Minimal mistakes theme to your machine
As we will use the Github pages to serve our blog. So,before we clone it on the local machine, I will present how I create a new repository on Github.
You may probably no need to do the same way because there are many different ways to do it. This way is just a simpler way for me.
2.3 Init repository on the local machine
- Create a repository on Github
I don’t use the git init
via the command line, but I create directly it on Github.
With this way, we can define easily the visibility of repos: public or private and we can initialize with the template of .gitingore
and LICENSE
. I named this repo demo-jekyll-mmtakes
If you want to this website is the origine github pages. It means 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: geeky-bawa.github.io, so I need to create a repository named: “geeky-bawa.github.io”.
You can check to know how to create a github pages on the official document of github: https://guides.github.com/features/pages/.
- After we clone the repository that we just created with
git clone
on local machine. - we will clone the repo minimal-mistakes with
git clone
on local machine.
- Enter in the directory of mmistakes, remove .git, LICENSE, and README file
- Then we move all files in 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 of all, let’s make sure that your development environment is ready.
- Make sure you installed Ruby and Ruby gems, and Jekyll on your computer.
- You’ll be using your own text editor and terminal app.
- When your development is ready, you can try run server to look your page how it is.
- Use
bundle install
to install all gems dependencies, andjekyll serve
orbundle exec jekyll serve
to run server. The page will be running on thelocalhost:4000
The result on your browser:
We have nothing to show on the page now, because, we need to customize the mmistakes theme and create a new post.
2.5 Customize mmistake theme
2.5.1 Configurations
Tree folder of our project before customize
To customize your website, you need modify the _config.yml
to create the initial settings for your website.
In the config.yml
, Michael has been detailed very clearly the signification of each tag.
For example, I modified the config.yml
file for my blog:
- The core information of website
# 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: 'Geeky Bawa blog'
title_separator: '|'
subtitle: # site tagline that appears below site title in masthead
name: 'Vaibhav Hariramani'
description: 'Software developper'
url: &url 'http://vaibhavhariramani.me/' # the base hostname & protocol for your site e.g. "https://mmistakes.github.io"
baseurl: # the subpath of your site, e.g. "/blog"
repository: 'geeky-bawa/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
- Site author: your social information
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: 'tienduy.nguyen.dev@gmail.com'
links:
- label: 'Website'
icon: 'fas fa-fw fa-link'
url: 'https://geeky-bawa.github.io/'
- label: 'Twitter'
icon: 'fab fa-fw fa-twitter-square'
url: &twitterUrl 'https://twitter.com/VAIBHAVHARIRAM2'
- label: 'LinkedIn'
icon: 'fab fa-fw fa-linkedin'
url: &linkedinUrl 'https://www.linkedin.com/in/vaibhav-hariramani/'
- label: 'GitHub'
icon: 'fab fa-fw fa-github'
url: &githubUrl 'https://github.com/geeky-bawa'
# - 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
- Gem plugin using. Here I add one plugin more: jemoji which allow us use the 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
We can provide the technology comment as Facebook, Disqus … and google analytic for out website in this _config.yml
. But I don’t need it for this moment.
So, that’s is the principle tags wee need to customize. Now we will add the gem dependencies in gems files
2.5.2 Gemfile
Your Gemfile now is empty, you need to add some Jekyll plugin that you have been declared in you _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
and to run serve, you tap
bundle exec jekyll serve
Open you browser at localhost:4000
and watch the result now.
That is better, isn’t it?
You are almost finished the customization, we will go create the first posts and customize our Navbar.
2.5.4 Create posts
We need to put all the posts in the _posts
folder. If you don’t find it, you just create a new one with the same name.
When you clone the mmistakes folder from Github. You will have two folder who name: docs
and test
. Two these folder contain the documentations and the examples for each type of post. It will help you very much.
To make quickly a demo, I will copy all the posts in the test/_posts
in my _posts
folder. For the posts, you can use both the markdown file and html file. In my case, I prefer markdown file because it faster to write and customize.
If you don’t know how to write in markdown file, you can take a look on the tutorial markdownguide.org.
So what we need to write in mardown for each post to make sure the website work properly?
The important things are:
- Title
- Category
- Tag
The first part of one post:
---
title: "Markup: HTML Tags and Formatting"
header:
teaser: "assets/images/markup-syntax-highlighting-teaser.jpg"
categories:
- Markup
tags:
- content
- css
- formatting
- html
- markup
---
The more features, you will find in the documentations of this theme.
A variety of common markup showing how the theme styles them.## Header two### Header three#### Header four##### Header five###### Header six## BlockquotesSingle 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
It’s not difficult because Michael did it for us. We just need to make some changes.
You look in the tree folder, we have an folder who name _data
and we can find navigation.yml
.
You will customize like this:
# 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:
Posts page
Categories archives page
Tags archives page
2.6 Build
When you finish an article, you need to build file with:
bundle exec jekyll build
It will build automatic to the html, css files in the site
folder.
III. Deploy on Github page
Push and commit all the changes to your Github repository.
If you do not set Github pages for this repo, you need to do it.
Go to the Settings
of repository on Github, active the Github pages.
For more details on guide Github pages.
When you are all done that, you will have your beautiful website on your-github-user-name.github.io
. Enjoy it!
— — — — — — — — —
So that is a demo I want to show you. Now you can start to write your first articles. I maybe miss some details because this demo is already quite long. But I hope you will not have problems with that. Good luck!
— — — — — — — — —
IV. Extra topics
- Using your own domain name. It’s not expensive.
- Managing a custom domain for your GitHub Pages site
- Other static site generator: Gastbyjs, nextjs, nuxtjs, hugo …
Reference
Check a demo online at http://vaibhavhariramani.me/blogs/
My Github demo repository: https://github.com/geeky-bawa/demo-jekyll-mmistakes
Documentation of minimal mistake theme: https://mmistakes.github.io/minimal-mistakes/
Interesting blog about jekyll https://blog.webjeda.com/
Using github pages https://pages.github.com/