Migrate to Github Pages

So I finally decided to migrate my blog from Logdown to Github Pages. Took me about three days to get it done. Here I write down some notes to record the whole migration process.

Installing Hexo

I chose Hexo for my blog framework.

Environment Setting

First I prepared a docker image for my blogging environment. Then I created two repositories on github:

  • bruce30262.github.io
    • The actual content of the blog. Hexo will update this repo after the deployment.
  • bruce30262_blog
    • Content of the hexo framework ( markdown files, theme, config file…etc )
    • The docker container will mount this directory to the working directory, something like:
      1
      docker run -it --rm -p 4000:4000 -v [HOME_DIR]/bruce30262_blog:/app --name hexo-blog bruce30262/docker-misc:hexo-blog

Later inside the container we can just run the hexo command under the /app directory and start blogging.

Hexo command

  • hexo init : Initialize a hexo blog
  • hexo g(enerate) : Generate the static site
  • hexo s(erver) : Launch the blog at the local side ( for previewing )
  • hexo d(eploy) :

    • Deploy the blog to github pages.
    • To fully deploy the blog, use the hexo g -d or the hexo d -g command.
    • Before deploying the blog, we need to do some setting in _config.yml:

      1
      2
      3
      deploy:
      type: git
      repo: https://github.com/bruce30262/bruce30262.github.io.git
    • Don’t forget to install the hexo-deployer-git plugin

Hexo plugin

To install the hexo plugin:

1
npm install [plugin_name] --save
  • hexo-deployer-git : For deploying the blog to github
  • hexo-admin : An admin interface for blogging
  • hexo-generator-sitemap : For generating sitemap
  • hexo-generator-feed : For generating atom.xml ( rss feed )

Hexo theme

I chose the NexT.Pisces theme. Here’s the English and the Chinese version of the theme’s documentations.

To choose the Pisces scheme, modified the theme’s _config.yml:

1
2
3
4
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces <-- remove the comment

In the site’s _config.yml:

1
2
3
4
5
# Social 
social:
Github: your github link
Twitter: your twitter linmk
Facebook: your facebook link

In the theme’s _config.yml:

1
2
3
4
5
6
7
social_icons:
enable: true
# Icon Mappings.
# KeyMapsToSocialItemKey: NameOfTheIconFromFontAwesome
Github: github
Twitter: twitter
Facebook: facebook

View count & Visitor count

Enable the busuanzi ( 不蒜子 ) feature.
In the theme’s _config.yml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
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-user"></i>
site_uv_footer: Total visitors
# custom pv span for the whole site
site_pv: true
site_pv_header: <i class="fa fa-eye"></i>
site_pv_footer: Total views
# custom pv span for one page only
page_pv: true
page_pv_header: <i class="fa fa-eye"></i>
page_pv_footer: views

Share widget ( AddThis )

First login to the AddThis website, and create a share widget. Then, in the theme’s _config.yml:

1
2
3
4
# Share
#jiathis:
# Warning: JiaThis does not support https.
add_this_id: ra-XXXXXXXXXXXXX <-- the pubid

Migrate Disqus comment

First enable the disqus feature.

In the site’s _config.yml:

1
disqus_shortname: old_disqus_shortname   <-- old site's disqus shortname

In the theme’s _config.yml:

1
2
3
4
5
# Disqus
disqus:
enable: true
shortname: old_disqus_shortname <-- old site's disqus shortname
count: true <-- display the comment count

Then, follow the step from the disqus website, use the URL Mapper to migrate the disqus threads.

Also change the setting in the disqus account ( new website url, add trust domains…etc ). It will take a while for disqus to reset the whole thing.

Migrate the blog

  1. Export all the markdown files from Logdown.
  2. Write some script to convert the posts’ header ( author, tags, categories…etc ).
  3. Move those files to the bruce30262_blog repository.
  4. Commit, push & deploy.

Reference