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:
      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:
      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:

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:

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces    <-- remove the comment

In the site’s _config.yml:

# Social 
  Github: your github link
  Twitter: your twitter linmk
  Facebook: your facebook link

In the theme’s _config.yml:

  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:

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
  # 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:

# Share
# 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:

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

In the theme’s _config.yml:

# 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.