Guidance to create Github blog

Posted on | Edited on | In | | Views:
Symbols count in article: 15k | Reading time ≈ 16 mins.

这是啵啵的第一篇博客日志，就记录一下这个博客是怎么利用github和Hexo静态博客框架搭建起来的吧。

This is the first blog of Bobby. This guthub page is built under the perfect guidance from Sunwhut’s blog. Here I just mention some key steps to create this blog with Windows7 + Gitbub + Hexo. All the instructions and software have been tested on my Windows7. Also working on Mac OS High Sierra 10.13.6.

Software

The official Node.js and Github desktop:

The offline installers are available on CSDN:

Github

Github SSH key

Launch Git Shell on Windows. Type

1
$ ssh -T git@github.com

When it’s done, this OS is authenticated to the github repository.

Create blog repo

Each Github account can set exactly one corresponding blog repo. For user tony, his github page repo should be named tony.github.io.

Hexo

Hexo Installation

Launch Git Shell on Windows. Type in

1
npm install hexo-cli -g

to install the Hexo. The npm should work with Node.js.

Hexo Deployment

Now we are going to create a workspace for our blog. Firstly we can shift from disk C to D with

1
$ d:

Now create the workspace named Hexo with

1
$ hexo hash Hexo

Enter the workspace and install the blog content with

1
2
$ cd Hexo
$ npm install

Hexo Theme NexT.Mist

The default theme of Hexo is landscape, which looks umm… There are a lot of themes provided in Hexo Themes. Take NexT.Mist for example. In the workspace Hexo, download the NexT theme with

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

In the workspace Hexo, edit file _config.yml and search for keyword theme:

1
theme: next

To apply the Mist style of NexT, enter the NexT folder at D:\Hexo\themes\next, edit file _config.yml and search for keyword scheme:

1
2
3
4
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces

Don’t forget the space after the colon. With this _config.yml, we can also modify the menu with

1
2
3
4
5
6
7
menu:
  home: /
  #categories: /categories
  #about: /about
  archives: /archives
  tags: /tags
  #commonweal: /404.html

Note that corresponding page is required. For more information about the settings of NexT theme, please visit iissnan’s official guide.

Blog post

Create a new post

Launch Git Shell and enter the workspace.

1
$ hexo new "My New Post"

More info: Writing

It’s OK to simply create a new .md file at D:\Hexo\source_posts. The markdown file will be transformed into html. The grammar of MD can refer to Introduction to Markdown and note for markdown. We can use Online markdown tool to preview .md file. Note that if you do not want an .md file to be transformed into html, like README.md on github, you can simply rename it as README.MDOWN.

Preview the post

To preview the post, firstly generate all the related static files with

1
$ hexo generate

More info: Generating

Then run the local server at localhost on port 4000:

1
$ hexo server

More info: Server

Now we can preview the static post by visiting http://localhost:4000/

If you want to regenerate the files, use

1
$ hexo clean

to clear all the deprecated files.

Deploy to remote sites

When everything is done and generated, we need to deploy it to the remote github.io.

  • Edit the _config.yml at workspace Hexo and search for keyword deploy:

    1
    2
    3
    4
    5
    6
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repository: https://github.com/yourname/yourname.github.io.git
      branch: master

  • Deploy to the github page with

    1
    $ hexo deploy

  • If ERROR occurs try to install the deploy-git with

    1
    $ npm install hexo-deployer-git --save

  • Then clean - generate - deploy.

Comment Service

This part is deprecated. See update below.

Comment added following the official guide this guidance. Since the Hexo is a static blog based on Node.js, the comment function has to be introduced from third-party comment service such as Duoshuo and Disqus. ~~
~~* Create a new account at Duoshuo.
Edit the _config.yml at workspace *Hexo

1
2
# Comment
duoshuo_shortname: tonyShortName

Edit the _config.yml* at theme NexT

1
2
3
4
5
duoshuo_info:
  ua_enable: true
  admin_enable: true
  user_id: yourDuoshuoUserID
  admin_nickname: (Author)

The Duoshuo userID can get in this way: Visit http://dev.duoshuo.com/. Then click your account at the top right and select “My home page” in the slide bar. The string of numbers at the end of the link is your userID in Duoshuo.

Duoshuo also provides a share system, which can simply activated by set the value of keyword duoshuo_share to true in the _config.yml in the folder of theme NexT. The blog url should also be set correctly in the _config.yml of the workspace Hexo(search for keyword url).

1
2
# Share
duoshuo_share: true
1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://bobbyliujb.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

Picture Service

I am using sina weibo picture service on chrome extension, but I don’t think sina will keep this service available for free.

1
![tuchuang](http://ww1.sinaimg.cn/mw690/006nWDLfgw1f5s1ijhh7pj30m80femyk.jpg)

tuchuang

Pictures can also be added by path. Put the pictures into folder workspaceOfHexo\themes\next\source\images or workspaceOfHexo\themes\next\source\uploads. The settings for example can be set with

1
2
avatar: /uploads/avatar.png 
avatar: /images/avatar.png

in the Hexo’s _config.yml file.

Page View Count

Credit to Doublemine’s blog

  • Create an account at LeanCloud.
  • Create a new application and name it as you like.

leancloud1

  • Create a new class whose name must be Counter.

leancloud2

  • Get the App ID and App Key and add them into the configuration file _config.yml of the NexT theme folder (search for keyword leancloud).

========2016.12.01=========

Show the update of each post

Credit to this deleted but cached page

  • Edit ...\Hexo\themes\next\layout\_macro\post.swig, search for tag <div class="post-meta"> and add the following tags next to <span class="post-time">:

    1
    2
    3
    4
    5
    6
    7
    8
    {%if post.updated and post.updated > post.date%}
      <span class="post-updated">
        &nbsp; | &nbsp; {{ __('post.updated') }}
        <time itemprop="dateUpdated" datetime="{{ moment(post.updated).format() }}" content="{{ date(post.updated, config.date_format) }}">
          {{ date(post.updated, config.date_format) }}
        </time>
      </span>
    {% endif %}

    The class post-updated is used to retreive the corresponding value in the language configuration.

  • Edit ...\Hexo\themes\next\languages\xx.yml. For the en.yml, search for keyword “post”:

    1
    2
    3
    4
    post:
      ...
      updated: Updated on
      ...

  • Edit workspaceOfHexo\Hexo\themes\next\_config.yml and add a line at the bottom:

    1
    display_updated: true

  • Now each time you update your existing post, add “updated xxxx-xx-xx xx:xx:xx” below the “date xxxx-xx-xx xx:xx:xx” to manually set the updated date. Actually, once you modify the post, it would be displayed on the post.

========2017.04.13=========
The DuoShuo Comment Service is going to be closed in June, 2017. An alternative system named JiaThis/YouYan seems to be a good choice, though Hexo does not initially add support for it. Reference to this guidance.

  • Register at YouYan and remember you uid.

  • Create youyan.swig at workspaceOfHexo\themes\next\layout\_scripts\third-party\comments:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    {% if not (theme.duoshuo and theme.duoshuo.shortname)
      and not theme.duoshuo_shortname
      and not theme.disqus_shortname %}
      {% if theme.youyan_uid %}
          {% set uid = theme.youyan_uid %}
      {% endif %}
      {% if page.comments %}
          <!-- UY BEGIN -->
          <script type="text/javascript" src="//v2.uyan.cc/code/uyan.js?uid={{uid}}"></script>
          <!-- UY END -->
      {% endif %}
    {% endif %}

  • Edit workspaceOfHexo\themes\next\layout\_scripts\third-party\comments.swig and add include for youyan.swig:

    1
    2
    3
    {% include './comments/duoshuo.swig' %}
    {% include './comments/disqus.swig' %}
    {% include './comments/youyan.swig' %}

  • Edit workspaceOfHexo\themes\next\layout\_partials\comments.swig and add element for YouYan comment:

    1
    2
    3
    {% elseif theme.youyan_uid %}
         <div id="uyan_frame">
         </div>

  • Add your uid at theme config file workspaceOfHexo\themes\next\_config.yml:

    1
    2
    # youyan
    youyan_uid: UID_numbers...

    Unfortunately, the YouYan comment count is still unable to show the statistics in the row right below the Topic.

  • The Duoshuo Share is also replaced by JiaThis share. Enable it at theme config file workspaceOfHexo\themes\next\_config.yml:

    1
    2
    3
    4
    # Share
    jiathis:
      enable: true
      id: UID_numbers...

  • Modify the JiaThis Share style by editing jiathis.swig at workspaceOfHexo\themes\next\layout\_partials\share:

    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
    <!-- JiaThis Button BEGIN -->
    <div>
      <a class="jiathis_like_tsina" data="width=120"></a>
    </div>
    <div class="jiathis_style">
      <span class="jiathis_txt">ShareTo: </span>
      <a class="jiathis_button_tsina">Weibo</a>
      <a class="jiathis_button_weixin">Wechat</a>
      <a class="jiathis_button_douban">Douban</a>
      <a class="jiathis_button_fb">Facebook</a>
      <a class="jiathis_button_twitter">Twitter</a>
      <a class="jiathis_button_googleplus">Google+</a>
      <a class="jiathis_button_tumblr">Tumblr</a>
      <a href="//www.jiathis.com/share?uid=xxx" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
      <a class="jiathis_counter_style"></a>
    </div>
    <script type="text/javascript">
    var jiathis_config = {
      data_track_clickback: true,
      hideMore: false
    };
    </script>
    <script type="text/javascript" src="//v3.jiathis.com/code/jia.js?uid=xxx" charset="utf-8"></script>
    <!-- JiaThis Button END -->

    Unfortunately again, YouYan does not support HTTPS. Since github page uses https, request for http resources is blocked, which means YouYan is not able to show off on blog, even though this method is locally feasible.

    So let turn to another system Disqus, which is blocked in mainland.

  • Firstly, recover Duoshuo share by modifying workspaceOfHexo\themes\next\_config.yml:

    1
    2
    3
    4
    # Share
    duoshuo_share: true
    duoshuo_shortname: xxx

  • Since we don’t want to use Duoshuo comment, we need to put config of disqus in front of duoshuo in workspaceOfHexo\themes\next\layout\_partials\comments.swig

  • Add disqus shortname in workspaceOfHexo\themes\next\_config.yml. Theoratically done, but seem to be blocked in mainland…

========2016.12.01=========

Sort the posts by last update

Referred to this guide.
Modify node_modules/hexo-generator-index/lib/generator.js like the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//var posts = locals.posts.sort(config.index_generator.order_by);
var posts = locals.posts;
  posts.data = posts.data.sort(function(a,b){
    if (a.updated) {
    	if (b.updated) {
    		if (a.updated == b.updated) {
	    		return b.date - a.date;
	    	} else {
	    		return b.updated - a.updated;
	    	}
    	} else {
    		return -1;
    	}
    } else {
    	if (b.updated) {
    		return 1;
    	} else {
    		return b.date - a.date;
    	}
    }
  });

AddThis Share

Referred to this post.
Go to AddThis to register and customize your own sharing buttons. Get AddThis ID in Profile Options - General and paste it into workspaceOfHexo\Hexo\themes\next\_config.yml. Supports HTTPS, though not stable.

========2019.01.05=========
Found another tutorial to make Hexo.Next even better.

Update Hexo

Simply run npm update -g hexo in terminal.

Use scheme Gemini

Modify 「Next Theme config」:

1
2
3
4
5
# Schemes
# scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

I don’t like the black headband hanging at the top of the page, so I add custom setting in hexo/themes/next/source/css/_custom/custom.styl:

1
2
3
.headband {
  height: 0;
}

  1. Install local search plugin at the root of hexo with npm install hexo-generator-search --save.

  2. Modify the hexo config:

    1
    2
    3
    4
    search:
      path: search.xml
      field: post
      content: true

  3. Enable local search at the theme Next config:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    local_search:
      enable: true
      # if auto, trigger search by changing input
      # if manual, trigger search by pressing enter key or search button
      trigger: auto
      # show top n results per article, show all results by setting to -1
      top_n_per_article: 10
      # unescape html strings to the readable one
      unescape: false

Add NeedMoreShare2

Simply enable the needmoreshare2 in the theme Next config.

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
# NeedMoreShare2
# Dependencies: https://github.com/theme-next/theme-next-needmoreshare2
# See: https://github.com/revir/need-more-share2, https://github.com/DzmVasileusky/needShareButton
# iconStyle: default | box
# boxForm: horizontal | vertical
# position: top / middle / bottom + Left / Center / Right
# networks:
# Weibo,Wechat,Douban,QQZone,Twitter,Linkedin,Mailto,Reddit,Delicious,StumbleUpon,Pinterest,Facebook,GooglePlus,
# Slashdot,Technorati,Posterous,Tumblr,GoogleBookmarks,Newsvine,Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru
needmoreshare2:
  enable: true
  postbottom:
    enable: true
    options:
      iconStyle: box
      boxForm: horizontal
      position: topCenter
      networks: Linkedin,Weibo,Wechat,Twitter,Facebook,Pinterest,GooglePlus,Evernote,Reddit,Douban,QQZone,Mailto
  float:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

Add site count at the bottom

Modify the theme Next config:

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
footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  since: 2016
  # Icon between year and copyright info.
  icon:
    # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons/
    # `heart` is recommended with animation in red (#ff0000).
    name: futbol-o
    # If you want to animate the icon, set it to true.
    animated: true
    # Change the color of icon, using Hex Code.
    color: "#808080"
  # If not defined, `author` from Hexo main config will be used.
  copyright:
  # -------------------------------------------------------------
  powered:
    # Hexo link (Powered by Hexo).
    enable: true
    # Version info of Hexo after Hexo link (vX.X.X).
    version: false
  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: true
    # Version info of NexT after scheme info (vX.X.X).
    version: false

Add wordcount and reading time

Add following code to hexo config:

1
2
3
4
5
symbols_count_time:
  symbols: true
  time: true
  total_symbols: false
  total_time: false

You can customize wordcount settings in theme Next’s config:

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 240