Building a personal blog with Github and Hexo

Posted on | In | Views

Introduction

This blog will introduce how to use Github and Hexo to build a personal blog. Specifically, I will first submit the basic steps to create a blog and then present how to optimize the blog.

1. Build the Blog

For the basic steps, please refer to: Use Hexo + Github Pages to build a free exclusive blog (ConnorLin, 2016) and Hexo and NexT offical documentation (Zhu, 2021).

2. Optimize the Blog

To optimize the blog, please refer to: Optimization of personal blog based on Hexo and NexT (Chou, 2019) and Hexo Theme NexT (version5.1.4) official documentation (IIssNan, n.d.).

Note: It is recommended to install NexT V5.1.4 first because this version has many related documents for reference. The new version of NexT lacks relevant documents, so it is not easy to solve bugs once you encounter them.

3. FAQ

Open themes\next\source\css\_schemes\Mist\index.styl, change the text-align in .footer-inner to center:

1
2
3
4
5
6
7
8
9
.footer-inner {
  margin: 0 auto;
  text-align: center;

  +mobile() {
    width: auto;
    text-align: center;
  }
}

3.2. How to center the post title, post metadata, post tags, and the read more button?

Open \themes\next\source\css\_custom\custom.styl, add the following codes into it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// read more center
.post-button {
  margin-top: 20px;
  text-align: center;
}


// post-title, post-meta center
.posts-expand .post-title, .posts-expand .post-meta {
  text-align: center;
}

// post-tags center
.posts-expand .post-tags {
  text-align: center;
}

3.3. How to modify the Read More button style?

Open \themes\next\source\css\_custom\custom.styl, add the following codes into it:

1
2
3
4
5
6
7
8
9
10
11
// read more style
.post-button .btn {
    color: #555 !important;
    background-color: rgb(255, 255, 255);
    border-radius: 1px;
    font-size: 13px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
    border: none !important;
    transition-property: unset;
    padding: 0px 13px;
}

3.4. How to fix the error generated by clicking the menus like tags?

When clicking menus, you may get an error:Cannot GET /about/%20. To slove it, you can open \themes\next\_config.yml, find menu settings, and delete the space between / and ||:
Code before modification:

1
2
3
4
5
6
7
8
9
menu:
  home: / || home
  categories: /categories/ || th
  archives: /archives/ || archive
  tags: /tags/ || tags
  about: /about/ || user
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

Code after modification:

1
2
3
4
5
6
7
8
9
menu:
  home: /|| home
  categories: /categories/|| th
  archives: /archives/|| archive
  tags: /tags/|| tags
  about: /about/|| user
  #schedule: /schedule/|| calendar
  #sitemap: /sitemap.xml|| sitemap
  #commonweal: /404/|| heartbeat

3.5. How to fix the error generated by clicking the menus categories?

When clicking the menu categories, you may get an error:Cannot GET /archives/%7C%7C%20list/. To slove it, you can open \themes\next\layout\_macro\sidebar.swig, then, use Ctrl + F command, to search the codes: 

1
<a href="{{ url_for(theme.menu.archives).split('||')[0] | trim }}">

and replace them with:

1
<a href="{{url_for(theme.menu.archives.split('||')[0])| trim}}">

3.6. How to fix the error generated by changing the theme to next?

You may encounter an error when changing the theme to next in the site _config.yml. This is because Hexo deleted swig after version 5.0. We need to install it manually. Install swig by executing the following command in the root directory of the site:

1
nmp i hexo-renderer-swig

3.7. How to fix the error generated by clicking the menus categories?

When clicking the menu categories, you may get an error:Cannot GET /archives/%7C%7C%20list/. To slove it, you can open \themes\next\layout\_macro\sidebar.swig, then, use Ctrl + F command, to search the codes: 

1
<a href="{{ url_for(theme.menu.archives).split('||')[0] | trim }}">

and replace them with:

1
<a href="{{url_for(theme.menu.archives.split('||')[0])| trim}}">

Open \themes\next\source\css\_common\components\footer\footer.styl, add color: #ff0000; into it .with-love{}:

1
2
3
4
5
.with-love {
  display: inline-block;
  margin: 0 5px;
  color: #ff0000;
}

3.9. How to change the style of the count values at the bottom?

There are three files needing to modify. First, open \themes\next\_config.yml, find the busuanzi_count, and modify the codes as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-eye"></i>
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>
  site_pv_footer: Views
  # custom pv span for one page only
  page_pv: true
  #page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_header: <i class="fa fa-eye"></i>
  page_pv_footer: Views

Second, open \themes\next\layout\_third-party\analytics\busuanzi-counter.swig, and modify the codes as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  {% if theme.busuanzi_count.site_pv %}
    <span class="site-pv">
      {{ theme.busuanzi_count.site_pv_header }}
      <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
      {{ theme.busuanzi_count.site_pv_footer }}
    </span>
  {% endif %}
  
  {% if theme.busuanzi_count.site_uv %}
    <span class="site-uv">
      {{ theme.busuanzi_count.site_uv_header }}
      {{ theme.busuanzi_count.site_uv_footer }}
    </span>
  {% endif %}

</div>
{% endif %}

Finally, open\themes\next\source\css\_common\components\third-party\busuanzi-counter.styl, and modify the codes as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
if hexo-config("scheme") == Pisces
  .busuanzi-count {
    +tablet() {
      width: auto;
    }
    +mobile() {
      width: auto;
    }
  }

.site-uv,
.site-pv,
.page-pv {
  display: inline-block;
  .busuanzi-value {
    margin: 0 5px;
  }
}

if hexo-config("busuanzi_count.site_pv") and hexo-config("busuanzi_count.site_uv")
  .site-uv
  {
    margin-right: 0px;

    &::after {
      content: "";
      padding-left: 0px;
    }

    &::before {
      content: "";
      padding-left: 5px;
    }
  }

3.10. How to solve the problem that the page-turning labels are not displayed properly?

Open \themes\next\layout\_partials\pagination.swig, and modify the codes as follows:

1
2
3
4
5
6
7
8
9
10
11
{% if page.prev or page.next %}
  <nav class="pagination">
    {{
      paginator({
        prev_text: '《',
        next_text: '》',
        mid_size: 1
      })
    }}
  </nav>
{% endif %}

References

1.ConnorLin. (2016). Use Hexo + Github Pages to build a free exclusive blog.
2.Chou, B. (2019). Optimization of personal blog based on Hexo and NexT.
3.Zhu, J. (2021). Hexo and NexT offical documentation.
4.IIssNan. (n.d.). Hexo Theme NexT (v5.1.4) Github repository .
5.IIssNan. (n.d.). Hexo Theme NexT (v5.1.4) official documentation .
6.RUNOOB.COM. (n.d.). Markdown tutorial.
7.Leafney. (2019). Add gitalk comment system to Hexo blog.
8.Leafney. (2019). Add gitment comment system to Hexo blog.
9.Leafney. (2021). Encrypt Hexo blog posts.
10.Xia,Z.Y. (n.d.). Encryption plugin Github repository: hexo-blog-encrypt.
11.Fish_404. (2018). Move NexT Mist theme sidebar to the left.
12.Garry. (2019). Hexo avatar settings.
13.Sun. (2018). Use Hexo+NexT to create a cool blog.
14.XieJaca. (2020). Solving the problem that the page-turning labels are not displayed properly.

This is the ending, thanks for reading.
Exclusive for Local Squires and Tyrants