Real source code for my website.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
Guardfile Add Guardfile for auto-compile Mar 24, 2014 README about CircleCI May 13, 2018


This is the source code for my personal page:


  • Use customized Semantic-UI for design and styling
  • Use Linux Libertine font for English text
  • Use Nanoc to build and compile
  • Use Pandoc to convert documents
  • jQuery to implement some random quotes
  • Responsive
  • I, personally, use org-mode to write post, you can use markdown if you like, as long as if pandoc support it.

How to build

You need ruby 2.x installed. I only test the build on ruby 2.4. Don’t forget to install bundler to manage ruby gem packages.

Besides, you also need pandoc installed. I only test pandoc 1.19.2.x version.

Steps to compile the site:

git clone
bundle install
bundle exec nanoc compile

It may take several minutes to build the whole site. You can check the compiled site in output directory.

My website is hosted on github pages. You can push the contents under output directory to github pages. If you have customized DNS, don’t forget to modify CNAME for your website.

Automatic build with CircleCI

I’ve also write a simple script for auto-build the website by CircleCI.

You need to generate github token, and you need to configure GITHUB_TOKEN and {GITHUB_PAGES_REPO} in circleci configuration for you repository.

Website metadata

Most of the website metadata is stored in nanoc.yaml file, like the author, title, keywords, etc.


Besides compile, you can write post and build website simultaneously:

  • use bundle exec guard to watch for file changes and run nanoc compile.
  • you can use browsersync as ~cd output; browser-sync start –server –files=”**/*”~ to watch the compiled changes in browser simultaneously.

List of files to modify for your fork

nanoc.yamlWebsite metadata
CNAMEGithub pages cname DNS
about.slimDon’t copy my about page
faviconPlease generate your own favicons
postsAh, this is my post


All in Chinese.

How this website was born:

Initial technical design:

Open Source: