How to make a static blog without coding

Hola folks, My training is about to start and I want to write my daily diary somewhere. I don’t have much time to create a blog website from scratch. Other option was to try wordpress, wix etc. but I do not want to consider them also as I had heard about github pages where we can host some text in markdown but without styling it would look boring. So, I decided to go with jekyll theme template. I created this blog in almost an hour and I almost coded nothing. You just need some common sense and you are good.

Prerequisites

  • Git & GitHub

Step 1:-

Choose a jekyll theme you want to use for your blog either from github or jekyll themes website. I choose Emerald by KingFelix.
Sign up/Login to your github account and to go this repository: https://github.com/KingFelix/Emerald.

Step 2:-

On top there will be a green button “Use this template”. Click on this button, and repo will be automatically forked to your account.

Step 3:-

Now, go to setting/pages/ and enable github pages with master branch selected.
A link will be generated, open that link. You will see many errors in it and most probably no styling will be visible and links will be broken. Don’t worry this is easy to fix.

Step 4:-

Clone the forked repo into your local environment. Open the local folder in any editor of your choice. Now open _config.yml file and change `` to your directory name /<directory_name>/. In my case it is /BlogTalks/.
Now once again refresh the github pages link and you will see all the styles are visible and links are working.

Step 5:-

Now you can start customising your blog.
To change the header name, go to _config.yml file and set custom-header option to true (false by default).
Now, go to _include/ directory and open header-custom.html file and put your own customised header inside <header></header> tag.
In my case, it looks like:

<header>
  <img src="BlogTalks/img/dp.png">
  <h1>BlogTalks - 4 weeks Training Blogs</h1>
  </header>

Now, header of your blog page will be changed.

Step 6:-

Like this you can change nav-footer , links etc by just changing relative option in _config.yml to true and then inside /_include placing your custom script inside the relative .html file. You can change colors also:
The basic colors are set into the base.scss file:

$main-color: used for the menu, title, link and footer $background-color: used for background and links in the navigation menu $text-color: used for text and title in posts and pages To customize the colors, just set the values in HEX, RGB (or RGBa) or any other format accepted by CSS.

Starting from the 1.1.0 version, the links inside the navigation menu are autogenerated from pages having the layout set to page.
You can set custom links, by putting in the <a> tag into the link.html file.

Step 7:-

Open _posts directory. Here, all the sample posts are present. Delete all the sample post and create a new file and note that its naming should follow the following format YYYY-MM-DD-heading.md.
For example:

2021-07-19-blog-post.md

Now you can easily write your blogs here using markdown.
If you do not know markdown, do not see any tutorial, just use this cheat-sheet and you will be good to go.
If you want to change no. of posts per page you can change it in _config.yml by changing pagenation option to your own setting (by default its 8 per page).
So, now the static blog is ready without coding.
Thank you for reading this post.

Happy Blogging