Squirrel Hole

江心一庐


  • Home
  • Archive
  • Categories
  • Tags
  • 我 | I
  •  

© 2025 白色乌鸦|White Crow

Theme Typography by Makito

Proudly published with Hexo

Hexo for Writing

Posted at 2017-08-13 making 

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
2
3
4
# install Nginx and Git
apt install git nginx
# start Nginx service, default test page: http://server-ip
systemctl start nginx

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
13
server {
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
2
cd /home/hf # Anywhere you want
git init --bare blog.git # Any repo name 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
#!/bin/sh
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
3
hexo 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
7
deploy:
- 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.
Once I run deploy command, Hexo html files will be push to web server and GitHub public branch. The source files only located at master branch.

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
npm uninstall hexo-renderer-marked
npm install hexo-renderer-pandoc --save
cat themes/typography/layout/mathjax.pug
script(type='text/x-mathjax-config').
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});

script(type='text/javascript', src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML', async)
extends partial/layout
cat themes/typography/layout/post.pug
include mixins

block site_title
!= page.title + " · " + config.title

block description
- var desc = page.desc || strip_html(page.content).replace(/^\s*/, '').replace(/\s*$/, '').substring(0, 150);
meta(name="description", content=desc)

block content
.autopagerize_page_element: .content: .post-page
include mixins
+make_post(page, true)
- var prev = page.prev ? page.prev.path : false;
- var next = page.next ? page.next.path : false;
.pagination
p.clearfix
if prev
span.pre.pagbuttons
a(role="navigation",href=url_for(prev), title=page.prev.title)
i.fa.fa-angle-double-left
|&nbsp;
!= __('prev_post')+': ' + page.prev.title
if next
span &nbsp;
span.next.pagbuttons
a(role="navigation",href=url_for(next), title=page.next.title)
!= __('next_post')+': ' + page.next.title
|&nbsp;
i.fa.fa-angle-double-right
if page.mathjax
include mathjax
include partial/comments

MathJax is disable in default. The mathjax: true on post header will enable MathJax for this post.

Enjoy writing

1
2
3
4
5
6
7
8
9
10
11
12
cd <folder>
hexo new <post name>
# or use a draft layout, which don't render to html files
hexo new draft <post name>
vim <source_post/pos name>
# ...
# bla bla
#
hexo g -d # depoly post to web server
git add . # Commit to GitHub, isn't required for web publish
git commit -a
git push

Before deploying, I always open a local Hexo server, which render html files, watch for file changes and update automatically.

1
hexo s
Blog can be preview in localhost:4000

Last update: 11-27-2022

Reference

  1. https://eliyar.biz/how_to_build_hexo_blog/
  2. http://www.swiftyper.com/2016/04/17/deploy-hexo-with-git-hook/
  3. https://hexo.io
  4. http://siqiliu.net/about/
  5. https://blog.homurax.com/2022/08/21/hexo-theme-latex/
  6. https://github.com/tufu9441/maupassant-hexo/search?q=mathjax

 Previous post: 摆渡人 SEE YOU TOMORROW

© 2025 白色乌鸦|White Crow

Theme Typography by Makito

Proudly published with Hexo