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:

      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:

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

Social link

In the site’s _config.yml:

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

In the theme’s _config.yml:

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:

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

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

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

In the theme’s _config.yml:

# 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

• Github Pages + Hexo Tutorial
  • link1 (Chinese)
  • link2 (Chinese)
• Hexo blog development on Docker
• Execute npm install hexo-cli -g promt ERR (root user)
• Hexo sitemap (Chinese)
• Hexo rss feed (Chinese)
• Hexo NexT theme github page
• Add AddThis to Hexo-NexT-theme (Chinese)
• Disqus Migration Tools