GitHub Pages allow you to turn your repository into a website to showcase your project, portfolio, documentation, and anything you want to share with the world using your own Blog. And Jekyll helps you to transform the GitHub Pages site to a blog with a theme of your choice. In this tutorial, I will show you how to create a blog using GitHub Pages and Jekyll with a few clicks in a very simple way so that not only a software engineer but the people having little knowledge of HTML can also create their blog on GitHub.
Here I will describe these 5 easy steps in which you don't need to give any GIT commands, just use the user interface using your mouse and your blog will be ready:
Steps to Create a Blog Using GitHub Pages and Jekyll
- Sign-up for a GitHub Account
- Create a Repository for GitHub Page e.g. (https://your-username.github.io)
- Apply a Jekyll Blog Theme
- Configure Jekyll Blog Theme
- Create a Blog Post
1. Signup for a GitHub Account
Note: If you already have the GitHub Account, skip this step.
To create an account with GitHub, click on the following link to signup with GitHub and enter the username, email address and the password for your account.
Remember your blog will be created using your username (https://your-username.github.io) so specify the name by keeping your blog name in your mind. Even though you can change this name with a custom domain later.
Now click on the Next: Select a plan button. Select the Free Plan option by clicking on the Choose free button, as shown in the below image:
Then on the next screen, select your interests, your experience level, etc. and click on the Complete Setup button.
You will be notified to confirm your email address. So open your email inbox and click on the Verify email address button to verify the email. It will take you then on the following screen to create your first repository.
2. Create a Repository for the GitHub Pages
The repository name for a GitHub page should start with your username then add .github.io. Meaning the complete name in our case should be foxdemo.github.io because my username is foxdemo. Select the type of repository as Public and click on the checkbox to initialize the repository with a README. Below is the screenshot:
Your repository has been created. You can open another tab page in your browser and type foxdemo.github.io, then it will simply print the readme file contents on the screen, as shown in the below image:
Now we will apply a Jekyll theme to it because we want to convert this GitHub Page website to a Blog.
3. Apply a Jekyll Theme for Blogging
To apply a Jekyll theme to your GitHub page site, you need to choose the theme for your blog and download it. You can check the following resources to find the theme of your choice:
For this demonstration, I chose the Mediumish theme from the jamstackthemes.dev.
After clicking on the theme, it will take you to the GitHub Repository page of that theme. There you need to download the theme, by clicking on the Clone or Download button and then click on the Download Zip button.
After the download complete, extract the zip file to a folder. Now come back to your GitHub Page (foxdemo.github.io) and click on the Upload files button, as shown in the below image:
Open the folder where you extracted the theme contents and select all the files and drag it to the area on the page, as shown in the below image:
Note: it will overwrite your existing README.MD file, no problem with that.
After uploading is finished, scroll down and click on the Commit button. It will take some time and then will show you the foxdemo.github.io repository contents.
4. Configure Jekyll Blog Theme
Now you need to configure the theme so that you can use it. To do this, click on the _config.yml file then click on the Edit this file (pencil icon) to edit the file and make the following changes:
These are the essential changes that are mandatory for every theme to successfully run your Blog site. Please note that I have not mentioned the Google Analytic ID in the above configuration you can apply that if you have and your Disqus comments ID if any. But please note, the baseurl property should be blank ('') or forward-slash (/) only, to run the theme successfully.
There are other many configuration settings in the _config.yml file, such as Author information, Adsense publisher ID, etc. Which you can specify according to your needs.
After making the changes, click on the Commit button to apply. Now open another tab page in your browser and type foxdemo.github.io to view your blog with your chosen theme. Below is the screenshot:
These are the sample blog posts for your reference which are showing above. By looking at these blog posts you will have the idea of how to create a blog post using the same format. Every Jekyll theme comes with the sample blog posts for the user reference.
Below I will show you how you can create a blog post in your blog you just created.
5. Create a Blog Post
To create a blog post in your new blog you just created using the Jekyll theme, first, you need to understand the method by looking at the existing sample blog posts of this theme. To do this, go to the foxdemo.github.io repository and click on the _post folder to open the existing blog posts.
Now click on any post link to open the blog post and then click on the Edit this file (pencil icon) to view it in edit mode because then only you can understand the method.
In the following image, it illustrates the blog post format:
Also, please notice the URL format of the blog post, the left side of the Cancel button. It starts with the Year-Month-Date (YYYY-MM-DD) format.
So now if you want to create a new blog post then its URL should start with the above-mentioned format and post format should also match the format shown above. For example:
URL for a new blog post: 2019-12-22-this-is-my-first-blog-post.md
Then enter the following contents in the file for a new blog post.
--- layout: post title: "This is my first blog post" author: Vinish categories: [ tutorial ] --- # Hi Welcome to my blog this is my first blog post on GitHub.
Below is the screenshot:
To learn how to markdown your blog post in GitHub editor, check this link. After completing your blog post, click on the Commit button. Now refresh your blog page (foxdemo.github.io) and on the home page, you will find your newly created blog post, which can take up to 1 or 2 minutes to appear on your blog. Then click on the blog post to view, as shown in the below image:
You can view the above blog post via the following link This is my first blog post.
Did you enjoy? Did you like the theme? If not then don't worry, I will tell you how to change it with another Jekyll theme until you really like it.
Click on the Settings for your foxdemo.github.io repository. Scroll down to the bottom and click on the Delete this Repository button. It will ask you to enter your-username/repository-name.github.io format, in our case, it will be foxdemo/foxdemo.github.io. Enter the value and click on the confirmation button to delete this repository and then repeat the steps from 2 to 5 to create again a repository with another Jekyll Theme.
You can also specify a custom domain name for your GitHub Pages blog. To do this, go to the Settings > GitHub Pages > Custom Domain and enter your domain name, for example, your-domain.com. And then configure it in your domain name provider as mentioned in this document.
I hope you learned well and will be able to create a blog using GitHub Pages and Jekyll. Also, you can Clone or Download this project from GitHub using the following link:
