WHY: Why do I want to construct my blog site?

• Contributing to and being involved in the open-source community
• Sharing some knowledge with my own understanding way and logic
• I am a tech-geek who loves to learn some new tech
• Increasing my popularity to make more people know about me and accept my ideal.

WHAT

What is the Blog Site

• A unique site that runs your blog, people could directly gain access to your blog through website address or searching engines
• A place that you could post your own idea, share your thinking, help others, and introduce yourself

What is the difference between constructing own site and use others services of other companies? (WHY I do not want to use other companies service directly?)

• More freedom in configuring your webpage, customizing your appearance, and fewer limitations from companies
• Cheaper price (even no price) running the whole service (you could choose every service you want)
• Less worry of your posts will be deleted or modified by the services’ runner
• You will learn more things about constructing a blog, like hugo usage, IP allocating, etc.
• The site constructed by your own is more appealing to geeks, companies, and educational facilities which means you would gain more opportunities from them.

HOW

Basic Constructing

Pre-request

• A valid GitHub account
• Already installing Hugo on your machine: $ sudo pacman -S hugo

Create a new GitHub Page

1. Create a new repo with Repository name YOUR_GITHUB_NAME.github.io, then your repo will look like this: YOUR_GITHUB_NAME/YOUR_GITHUB_NAME.github.io, e.g. Mine is zayn7lie/zayn7lie.github.io
2. Connect the repo to your local computer
   1. You could use HTTPS method with GitHub authorization or SSH, I will show how to connect with HTTPS method
   2. Record your repo’s HTTPS, e.g. https://github.com/zayn7lie/zayn7lie.github.io.git
   3. $ git clone YOUR_HTTPS to clone the repo to local or git init . then git remote add origin YOUR_HTTPS
3. In the repo, turn to Setting - Code and automation - Pages, check Build and deployment - Source is Deploy from a branch, and Branch is master

Setting up source code for blog

1. Turn to your local machine, $ hugo new site YOUR_SITE_NAME to create and initial your new blog site, add YOUR_GITHUB_NAME.github.io in baseURL in ./hugo.toml
2. Turn to the folder you just connect with your GitHub Page, rename it as public with moving it to your site folder you just have generated.
3. $ hugo new content posts/my-first-post.md to generate a new post for your blog (Remember to use Markdown to write)
4. After writing, removing header draft: true to make it visible, $ hugo server to view your pre-generate blog, you can see it in http://localhost:1313/. Read More if you encounter problems.
5. After checking, $ hugo to generate the final html to public folder, then commit it to your GitHub repo.
6. GitHub will automatically run Action to build your blog website with Jekyll(you do not need to know anything about Jekyll), after compiling, you could see your public website in YOUR_GITHUB_NAME.github.io

Advanced Configuration

The global config file is in ./hugo.toml

Theme Setting

I am using Stack, it has a doc for fully configuration that you could read.

1. Create a themes folder, and move the theme folder that you want to adopt, to themes folder.
2. Open hugo.toml, insert theme = "YOUR_THEME_NAME" at the beginning
3. If you want to do modification with your theme, you just need to copy the specific file from your theme folder to the root file, then modify it. E.g. I want to modify themes/hugo-theme-stack/layouts/_default/baseof.html, I could just create a layouts/_default/baseof.html in root and modify it.
4. More things could be modified in hugo.toml, I just show my stack theme config: [param] (Erasing some sensitive information):

[params]
mainSections = [ "posts" ]
favicon = "/favicon.png"

  [params.dateFormat]
  published = "01/02/2006"
  lastUpdated = "01/02/2006"

  [params.sidebar]
  compact = false
  subtitle = "Algorithm&Mathematics, Music_Theory&Rhythm_Game, Rationality&Logicism, Peace&Open_Source"

  [params.article]
  math = true

    [params.article.license]
    enabled = true
    default = "Licensed under [CC BY 4.0](https://zayn7lie.ber7.org/posts/misc/license/)"

  [params.comments]
  enabled = true
  provider = "cusdis"

    [params.comments.cusdis]
    host = "https://cusdis.com"
    id = "SENSITIVE_INFORMATION"

  [params.widgets]
  homepage = [
    {type = "search"},
    {type = "categories", params = {limit = 77}},
    {type = "tag-cloud", params = {limit = 77}}
  ]
  page = [
    {type = "toc"},
    {type = "tag-cloud", params = {limit = 10}},
    {type = "archives", params = {limit = 10}}
  ]

GitHub Limitation with GitHub Page

Domain Configuration (Using custom domain)