Introduction
This is the source code for my personal page: https://xiaohanyu.me.
Features
- 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 [email protected]:xiaohanyu/xiaohanyu
bundle install
bundle exec nanoc compileIt 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.
Development
Besides compile, you can write post and build website simultaneously:
- use
bundle exec guardto watch for file changes and runnanoc 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
| File | Description |
|---|---|
| nanoc.yaml | Website metadata |
| CNAME | Github pages cname DNS |
| about.slim | Don’t copy my about page |
| favicon | Please generate your own favicons |
| posts | Ah, this is my post |
Reference
All in Chinese.
How this website was born:
Initial technical design:
Open Source: