Sync your blogs across different OSs in Hexo
This is an article about how to synchronize blogs across your different operating systems.
It has been one year since I first set up Hexo and half a year since my first meaningful blog. I think it better to note down the steps I used to set up my GitHub Pages.
GitHub Pages + Hexo + Maupassant
GitHub Pages
GitHub Pages is a static site hosting service designed to host your personal, organization, or project pages directly from a GitHub repository.
- You would need to create a new repository named "username.github.io".
Static Generator
The static generator would help transform your plain text into static webpages. There are several choices, the most widely used of which are Jekyll, Hugo and Hexo. I didn't try everything. Instead, I try to read comparison articles online and find the one suit for me. I remember that one of the reasons that Hexo attracts me is its "Blazing Fast". > Hexo is a fast, simple and powerful blog framework. You write posts in Markdown (or other languages) and Hexo generates static files with a beautiful theme in seconds.
Theme
You might need a theme for your blog and again, there are hundreds of options. Finally, I decide to go for Maupassant because it looks concise. > Maupassant - A simple Hexo template with great performance on different devices, ported from a Typecho theme by Cho, forked and modified from icylogic.
Installation
- The setup of Hexo is really simple. I just follow the Hexo Documentation and its done. This would include:
Setup
Hexo Setup
- Go to the directory of the GitHub Page repository
hexo init
, initialization. Several folders and files would be generated.npm install
, install packages based on package.json generated duringhexo init
, wherenpm
is short for Node.js package manager. Actually,npm install
should already be called duringhexo init
. (ref. Hexo Setup, npm-install)- Follow the way of deployment using Git.
Directory Structures
Several folders and files would be generated after hexo init
- _config.yml: site configuration file, where one can configure most settings here
- package.json and package-lock.json: Application data, including the modules you need. The package-lock.json is automatically generated for any operations where npm modifies either the node_modules tree, or package.json. It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates. (ref. npm-package-lock.json and npm-package.json).
- [node_modules]: the folder that local modules/packages of Node.js drop into. Its contents should correspond to package.json and is generated based on
npm install
- scaffolds: Seems like a folder for templates.
- source: the source folder including the original contents of the site, e.g., your Markdown files.
- themes: the theme folders.
- db.json: no ideas about it, seems to be generated by
hexo generate
and is kind of cache which stores all posts, tags, categories, etc. in a JSON format for faster parsing. It would correspond to the generated sites. - public: All the static webpage files generated by
hexo generate
and also the ones deployed to the git repository usinghexo-deployer-git
. - .deploy_git, the folder for deployment of the static pages.
Theme Setup
- Follow the installation of the theme Maupassant.
Git the whole blogs instead of the only the static websites
You might have already noticed that using hexo-deployer-git
, only the static websites would be git to the GitHub repository and you'll lose everything if your laptop dies without backup. Also, it is hard to synchronize across your multiple computers. So here is how to git everything including the original markdowns using two branches. The is based on this article which is 404 now. But you could still refer to his answer in 知乎
- Create the repository username.github.io
- Add the following to .gitignore
node_modules/ public/ package-lock.json .deploy_git/ db.json
- Create two branches: master and hexo.
- Set hexo as the default branch.
- clone the repository and set up based on the instruction above.
- set the
deploy -> branch
in **_config.yml** to master.
This way, the static webpages generated and deployed by hexo g -d
would be stored in the master branch which the original markdown files and the configuration would be in hexo branch using git push origin hexo
.