I want to mark and present my thinking in refined and elegant, so Hexo become my choice now. The first post show how I set up web service in VPS and tune Hexo in own work flow.
Hexo is static blog framework. Hexo just is a manager to organize post and blog theme and complier( or generator) to compile Markdown documents to static html files mostly, which don't host the web service as what WordPress doing.
So, Hexo is just installed and configured in my personal computer( Acer Chromebook). Firstly, I write post in Markdown using Vim. Then Hexo generate html from Markdown. Finally, copy these html files to blog server.
Setting Web and Sync Service in Remote
Nginx is used to host web service and Git is used to sync the html files which Hexo generate.
1 | # install Nginx and Git |
For security, a non-root user should be used to operate html files in
Nginx and Git. 1
2
3# add non-root user, called hf(or other)
adduser hf # or useradd hf
Then create special folder to store blog html files and configure
Nginx 1
2
3
4
5
6
7# store blog html files in /var/www/blog/html/
mkdir -p /var/www/blog/html
# change the owner and perimission to above non-root user, so Git can to modify
chown -R $USER:$USER /var/www/blog/html # Replace $USER to hf(or other you want)
chmod -R 755 /var/www/blog/html
touch /etc/nginx/conf.d/blog.conf
vim /etc/nginx/conf.d/blog.conf
Fill blog.conf
as: 1
2
3
4
5
6
7
8
9
10
11
12
13server {
listen 80;
listen [::]:80; # for ipv6
root /var/www/blog/html;
index index.html index.htm index.nginx-debian.html;
server_name blog.whitecrow.xyz
location /{
try_files $uri $uri/ =404;
}
}
Restart Nginx service to apply change 1
systemctl restart nginx
Until now, once copy the html files into
/var/www/blog/html
, blog will work as expected. Copy from
local to VPS manual all the time, is boring and cause mistake. I use git
and hexo-deployer-git
to auto sync html files once Hexo
generate, which called deploy
. In remote, I create a bare
git repo only for sync html files.
1 | cd /home/hf # Anywhere you want |
A git hooks post-receive
can auto copy html files to
target folder once git push operation finish. I new a
post-receive
in blog.git/hooks
as
1
2
3
git --work-tree=/var/www/blog/html --git-dir=/home/xx/bolg.git checkout -f
# work-tree is where store html files, replace it for yourself
Next steps are done in local.
Install Hexo Locally
In my way, Hexo is only installed in local, my chromebook. Some basic configurations are required to run Hexo correctly.
Install Hexo as official
document 1
2
3
4
5
6
7
8
9
10
11
12# Install Node Version Manager nvm
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
# Install Node.js
nvm install stable
# Install Git
sudo apt install git
# Install Hexo
npm install hexo --save# add --registry=https://registry.npm.taobao.org in China
# Install hexo-depolyer-git for auto deploy
npm install hexo-deployer-git --save
# Install hexo server for local server if you need
npm install hexo-server --save
Initialize Hexo in the target <folder>
, which
isn't required for migiration Hexo from exited project.
1
2
3hexo init <folder>
cd <folder>
npm install
After initialization or migration, I set up git deploy by modify
<folder>/_config.yml
. How does it work exactly, official document has nice
explanation. 1
2
3
4
5
6
7deploy:
- type: git
repo: xx@blog.whitecrow.xyz:blog
branch: master
- type: git # This isn't required for normal work.
repo: git@github.com:JiangXL/<repo name>
branch: public # Because I want to back to GitHub by the way.
Fitting
Before 2022/11, the Next theme was used. Then, I apply the Typography.
The theme configure file is
theme/typography/_config.yaml
. Once the source files are
modified, run npm run build
to apply.
Hexo markdown renderer generates markdown file to html file, then
MathJax renders TeX block inside html file. But markdown renderer
conflict with typical TeX writing. To write TeX format, it is suggested
to render with hexo-renderer-pandoc
instead of
hexo-renderer-marked
[ref.4]. Then I add
MathJax.pug
[ref.6,7] to
thme/typography/layout
, and insert it to
post.pug
1 | npm uninstall hexo-renderer-marked |
MathJax is disable in default. The mathjax: true
on post
header will enable MathJax for this post.
Enjoy writing
1 | cd <folder> |
Before deploying, I always open a local Hexo server, which render
html files, watch for file changes and update automatically.
1
hexo s
localhost:4000
Last update: 11-27-2022
Reference
- https://eliyar.biz/how_to_build_hexo_blog/
- http://www.swiftyper.com/2016/04/17/deploy-hexo-with-git-hook/
- https://hexo.io
- http://siqiliu.net/about/
- https://blog.homurax.com/2022/08/21/hexo-theme-latex/
- https://github.com/tufu9441/maupassant-hexo/search?q=mathjax