host_blog_on_ubuntu16.04

Step 1 — Installing and Initializing Hexo

先要安装nodejs和npm,需要注意版本,如果是低版本后面hexo命令很可能报错Install The Latest Node.Js And NPM Packages On Ubuntu 16.04 / 18.04 LTS

1
2
3
4
5
6
7
8
9
10
11
12
# Step 1: Add Node.Js PPA
apt install curl
# There are two repositories you can install… one repository contains the latest Node.js packages and the other has the LTS or (Long Term Support) packages…. if you need the latest and greatest, then install the first repository…
# On the other hand, if you need a more stable and tested Node.js packages, then install the LTS repository….
## Then for the Latest release, add this PPA..
curl -sL https://deb.nodesource.com/setup_10.x | sudo bash -
## To install the LTS release, use this PPA
curl -sL https://deb.nodesource.com/setup_8.x | sudo bash -
# Step 2: Install Node.Js And NPM
apt install nodejs
node -v
npm -v

安装hexo

1
2
3
npm install hexo-cli -g
npm install hexo-server -g
hexo init ~/hexo_blog

If hexo init ~/hexo_blog get error /usr/bin/env: ‘node’: No such file or directory, fixed by

1
ln -s /usr/bin/nodejs /usr/bin/node

then

1
2
cd ~/hexo_blog
npm install

use

1
hexo server

测试hexo功能是否正常

Step 2 — Setting Up Hexo’s Main Configuration File

config hexo

1
vi _config.yml

change as(must have a space after the “:”):

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
# Hexo Configuration  
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 站点信息设置
title: the Home of MuZhen #站名
subtitle: #副标题
description: #站描述
author: muzhen #作者
language: en
timezone:

# URL 链接设置
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://www.muzhen.tk
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory 文件目录
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing 文章
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: true
tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format 日期
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination 分页
## Set per_page to 0 to disable pagination
per_page: 20
pagination_dir: page

# Extensions 扩展
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

# Deployment 这里设置了Git获
#这里一定要注意不要写错了,否则部署到Github上会出问题
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:mocorochio/micorochio.github.io.git
branch: master
message:

Step3-install nginx

  1. install nginx

    1
    apt-get install nginx
  2. configure nginx

    1
    vi /etc/nginx/conf.d/default.conf

change like below:

1
2
3
4
5
6
7
8
9
server {
listen 80;
server_name www.muzhen.tk muzhen.tk;
root /home/www/hexo/public;
location / {
index index.html index.htm;
}
include /etc/nginx/default.d/*.conf;
}

use your domain replace www.muzhen.tk muzhen.tk

1
2
3
service nginx start
# hexo部署更新
hexo g

如果访问blog页面出现403错误,可能是nginx user配置问题, 解决Nginx出现403 forbidden (13: Permission denied)报错的四种方法

1
2
vi /etc/nginx/nginx.conf

comment first line: user /data/www;
add line: user root;

1
service nginx start

Step4-important! configure markdown

这里的配置不仅仅是可以支持latex的问题,还可以避免由于\{\{\}\}导致的hexo g报错Template render error

configure markdown to address the conflict between markdown and latex.

1
2
cd /home/www/hexo/node_modules/hexo-renderer-marked/node_modules/marked/lib
sudo vim marked.js

replace

1
escape: /^\\([\\`*{}\[\]()# +\-.!_>])/,

to

1
escape: /^\\([`*\[\]()# +\-.!_>])/,

replace

1
em: /^\b_((?:[^_]|__)+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

to

1
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

finally

1
hexo g

但是在尝试hexo-math或者hexo-render-mathjax之后,在latex支持上没有生效。

最终的解决方案是利用主题来实现latex支持。具体操作见下一步。

Step5-modify theme并进行latex支持

1
2
3
4
5
6
7
8
apt install git
cd ~/hexo_blog
git clone https://github.com/theme-next/hexo-theme-next themes/next
vi _config.yml
# change theme: landscape to theme: next
cd themes/next
vim _config.yml
# change mathjax enable from false to true

Step6-使用dropbox进行本地blog文件与服务器同步

1. install dropbox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# download dropbox
## 32bit
cd ~ && wget -O - "https://www.dropbox.com/download?plat=lnx.x86" | tar xzf -
## 64bit
cd ~ && wget -O - "https://www.dropbox.com/download?plat=lnx.x86_64" | tar xzf -
~/.dropbox-dist/dropboxd
# copy link to chrome and valid
wget https://www.dropbox.com/download?dl=packages/dropbox.py
# maybe the name of py is not dropbox.py,you only need operate the .py file regardless of its name.
chmod +x ./dropbox.py
~/dropbox.py help
# view state
~/dropbox.py status
# start sync
~/dropbox.py start
cd Dropbox
# exclude dir which don't need to sync
~/dropboxy.py exclude add dirname1 dirname2

2. 建立blog文件链接

dropbox中需要有一个文件夹为_posts,里面放置符合blog格式的markdown文件,建立该文件夹与hexo下对应blog文件存放地址的链接

1
2
3
4
# 先删除文件夹,不然待会软连接会报错
rm -rf /root/hexo_blog/source/_posts
# 建立软连接,必须用绝对路径,不然内部结构无法链接成功
ln -s /root/Dropbox/_posts/ /root/hexo_blog/source/

至此,blog就建立完成了。至于github托管可以参见references或者我的另外一篇博客《host-blog-with-hexo-nginx-github》。

可能遇到的问题

  1. nodejs版本过低导致的问题
  2. vps内存不够导致hexo g失败。解决方案是增加或拓展swap分区

references

install hexo

install git

theme next

next theme set preview

add search engine

optimization

install dropbox

搭建一个支持LaTEX的hexo博客