Personal Blog based on Hexo + NexT

I played with hexo to build my first personal website on 2016. Then it was untouched for a long time until today, I decided to pick things up and try to learn some UI staff with it.

This page is mainly for recording what I learnt and and how I used them on this site including 3rd party plugins, theme modification and SEO.

Add plugins

Gitment comments

Gitment is a comment system based on GitHub Issues, which can be used in the frontend without any server-side implementation. Gitment plugin is supported in current NexT(v5.1.4), just need a few steps to set up:

Create OAuth application

  1. Go to settings of your github account
  2. Go to Developer settings
  3. Click Register a new application
  4. Fill in:

    1
    2
    3
    4
    Application name:Gitment
    Homepage URL:<your website link>
    Application description:<Anything>
    Authorization callback URL:<your website link>
  5. Copy Client ID and Client Secret for future use

Create repository for gitment

Create a new repository named gitment-comments

Change NexT config

Search gitment in config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
gitment:
enable: true
mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
count: true # Show comments count in post meta area
lazy: false # Comments lazy loading with a button
cleanly: false # Hide 'Powered by ...' on footer, and more
language: # Force language, or auto switch by theme
github_user: # MUST HAVE, Your Github ID
github_repo: `gitment-comments` # MUST HAVE, The repo you use to store Gitment comments
client_id: `Client ID` # MUST HAVE, Github client id for the Gitment
client_secret: `Client Secret` # EITHER this or proxy_gateway, Github access secret token for the Gitment
proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled

Add various plugins based on hexo document

  1. baidu analytics
  2. addThis share
  3. leancloud_visitors
  4. Local Search

Customize page

CMS admin page based on Netlify

Why Netlify

Notice that this means I will start to host my site on Netlify instead of GitHub page, here is a good explanation of why we want to switch to Netlify

How

Given the needs to edit my page for a eaiser flow (for non coder to add things without command line), I followed completely on this guide to add a Netlify cms page for my personal page.

One more thing

Previous guide is baed on default theme called “Material”, however I am using hexo’s “NexT” theme. This theme have a better support on customize head, so in order to “Add Netlify Identity Widget”, we can just modify _config file to have a custom_file_path, for example, I added source/_data/head.swig as a custom head.

TopX: Hottest post page (Need Leancloud support)

Reference:5.8 添加 TopX 页面
Basically it create a new page and rearranged post based on views from Leancloud’s database we created when we add leancloud_visitors plugin.

  1. Create new page

    1
    hexo new page "top"
  2. Add menu in theme configuration

    1
    2
    menu:
    top: /top/ || signal
  3. Modify the new index.md for “top” page:

    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
    ---
    title: TopX
    comments: false
    keywords: top,文章阅读量排行榜
    ---
    <div id="top"></div>
    <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
    <script>AV.initialize("app_id", "app_key");</script>
    <script type="text/javascript">
    var time=0
    var title=""
    var url=""
    var query = new AV.Query('Counter');
    query.notEqualTo('id',0);
    query.descending('time');
    query.limit(1000);
    query.find().then(function (todo) {
    for (var i=0;i<1000;i++){
    var result=todo[i].attributes;
    time=result.time;
    title=result.title;
    url=result.url;
    var content="<a href='"+"https://reuixiy.github.io"+url+"'>"+title+"</a>"+"<br />"+"<font color='#555'>"+"阅读次数:"+time+"</font>"+"<br /><br />";
    document.getElementById("top").innerHTML+=content
    }
    }, function (error) {
    console.log("error");
    });
    </script>
  4. Replace variables:

    • Change app_id and app_key in index.md for your own leancloud id.

    • Also you can change TopX’s X by changing this line: query.limit(1000);

Learning source

Hexo

Version control

SEO

Cautions

Config override

We should be careful with config override. If you want to override one item from a section, you should include other items of that section. For example, once I forget to declare other sections except “display” for sidebar config:

1
2
sidebar:
display: always

This cause the theme config is missing other sections including “offset” which is critical to sidebar affix. So I have a wrongly placed sidebar. I should change to following config if I want to use sidebar:

1
2
3
4
5
6
7
sidebar:
position: left
display: always
offset: 12
b2t: false
scrollpercent: false
onmobile: false

To do

  • add timeline on about page
  • Add Chinese post page
  • Improve config override, it cause pain in the ass!
  • Add SEO (Baidu + Google)
  • Add TopX page
  • Add photo of post and correct photo links
  • Add admin page
  • Add idea book
Donate