How to Use Huxpro Template to Write Articles


Posted by starwavelin on May 22, 2018

Table of Contents


Firstly I would like to sincerely thank Mr. Xuan Huang (黄玄 | Huxpro) for providing this convenient Jekyll template. He actually supplies two templates for the general public to use:

  1. boilerplate version
  2. his personal advanced version

What I am using for myself (Coding Bro 📒代码笔记哥)is the boilerplate version.

Writing a journal

To write a journal for your blog, create a markdown file in _posts/ directory with format “yyyy-mm-dd-{your-journal-title}.md”, in which you can replace {your-journal-title} with any article name you want.

Then, within the .md file, the header should be coded in a somehow fixed format. Here I’d like to show you two screenshots and I guess after viewing them, you will know how to code your article.

header-code in this 10-line header code of a markdown file, just make sure the layout should be “post”, other fields can be customized or omitted header-outcome corresponding outcome of the 10-line header code

And, Huxpro template also provides an automatically generated summary of an article you post. summary-on-index

Adding a table of contents

You can also add a table of content to your journal if you think necessary. To do so, you need a tool called gfm-toc
And I already wrote an instruction on how to use gfm-toc

toc-issue Hmm, seems like directly apply the gfm-toc tool above did not give what I want No worries. I worked around to get it work. The error was actually because I set all the headers of each section in this journal to be h3 (header size 3, in markdown which is 3 hashes). Therefore, gfm-toc tool auto made 2 indentations to represent h3 header, like below. error

Once I removed the redundant indentations to make the code as below fix

The problem resolved.

Apply your own domain to your tech blog

This step is optional and is not related to how to write an article. But isn’t that cool if you can set your own domain pointing to your own formatted tech blog?

Step 1: Purchase your domain (ie. I purchased from godaddy)

Step 2: On your godaddy account’s DNS Management page, create A records that point your custom domain to the following IP addresses:

Step 3: In your project directory, add a file named “CNAME”, and inside CNAME, just put one line – your domain name (ie. for me I put “”)

Step 4: You can then update the url value of _config.yml from url: "" into url: "https://YOUR_DOMAINNAME"