Now that I’ve settled down, I think I should really write about how I set it up. I am really lazy, so I did not write my own theme from scratch, I instead cloned a Blog-ready theme and started from there.

There are a lot of free and open source themes for Jekyll - the static site generator used by Github Pages to generate your content automatically. But not all the themes are compatible with Github Pages, therefore, I browsed through the Jekyll Themes topic. Most of the themes in this topic are compatible with Github Pages and require minimal setup. As you can see, I adopted Beautiful Jekyll, A popular theme with very easy setup process.

Note that I set up using an Organization account because I already cloned this repo to my account. When doing for your personal blog, you should clone it instead to a repo under your username as <username>.github.io - for example, my username is sorat0mo, so I cloned it to sorat0mo.github.io

Note: If you do not clone it to a *.github.io repo, the published site address will be <username>.github.io/<reponame>.

In order to see your site in action, you must edit some files so that Github will wake up the workers to build your website. The first time your site is built will take considerably more time, but subsequent builds should be faster (unless Github Pages experience lags)

The file I edited in the video, _config.yml handles most of the site’s settings. You’ll want to configure it to your liking. Most of the settings are straightforward. For YAML values, you can check Beautiful Jekyll’s “Supported parameters” section.

To write posts, you need to create markdown files inside _posts directory. The file names are also important, since they will be part of the permalink. You should always name them like this:

<Year-Month-Date-Name>.md

The Name will be exactly how it is like in the permalink. However, you can still specify a post title by including it in the front matter:

---
title: My Awesome Post
---

This way you can choose a radically different name for the permalink and the post. To write posts, you need to specify at least a title, just like above. Right under the 3 dashes ---, you can start writing:

---
title: My Awesome Post
---
I am so awesome I cannot measure my awesomeness!

Jekyll by default will transform markdown syntaxes in your posts and pages into HTML when building the site, so you do not have to format your posts with HTML. To learn how to write in markdown, you may consult online materials, such as CommonMark’s 10 minute markdown tutorial. You can see how this post is formatted here

Many people want to enable comments on their blogs, Beautiful Jekyll took care of that. There are a number of comment system to choose from. If you’re hosting on Github Pages, I suggest using utterances or giscus since they utilize the Issues and Discussion feature of Github. You can also implement your own in the _includes directory. I’ll show you how to set up giscus.

First, install the giscus app in your website’s repo. You can choose to install it to a specific repo, instead of allowing it to access all your repo.

Then, go to https://giscus.app. Under the heading Configuration you can configure how your commentbox should look like.

Select the repo you want the comments to appear in. Ideally, use your website’s repo, for example, I use sorat0mo/sorat0mo.github.io:

You do not need to change page - discussions mapping, pathname is the default mapping and it works well with Github Pages.

Next, you need to select a category in which all comments will be placed in. Enable Only search for discussions in this category to avoid giscus displaying the wrong comments.

Everything else can be left as is, but you can configure features and themes as you like. Afterwards, copy the values to your _config.yml file. For example, I have these:

giscus:
  hostname: giscus.app
  repository: "sorat0mo/sorat0mo.github.io"
  repository-id: "R_kgDOHE1zaQ"
  category: General
  category-id: "DIC_kwDOHE1zac4COTFw"
  mapping: pathname
  reactions-enabled: 1
  emit-metadata: 0
  theme: light

Remember to uncomment the giscus section along with the parameters. Save _config.yml and commit the change. You should soon see a comment section under your posts:

If you need to, say, include a license notice in the footer, you can add them in the footer section of the website. The footer section is located in _includes/footer.html. I use the CC BY-SA 4.0 license, so I included it above the Jekyll ads like this:

      <p class="copyright text-muted">
       Content in this website is released under <a href="http://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-SA 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1"></a>
      </p>
      {% unless site.remove-ads %}<p class="theme-by text-muted">
        Powered by
        <a href="https://beautifuljekyll.com">Beautiful Jekyll</a>
      </p>

You have to specify the class for the <p> tag, otherwise it will look super ugly and out of place. I haven’t found better ways but I will experiment with the theme later.