环境配置

安装git

1
brew install git

安装完成后检查是否已经添加到环境变量

1
git --version

安装Node.js

1
brew install node

安装完成后检查是否已经添加到环境变量

1
2
node -v
npm -v

安装Hexo

推荐进行全局安装

1
$ npm install -g hexo-cli

如果安装过慢, 可以使用代理下载或者更换国内源加速下载

  • 使用代理

    1
    2
    3
    4
    npm config set proxy http://127.0.0.1:1086

    # 关闭代理
    npm config delete proxy

  • 换源

    1
    2
    3
    4
    npm config set registry https://registry.npm.taobao.org

    # 换回官方源
    npm config delete registry

建站

使用一下命令, 在当前目录新建博客根目录, hexo会自动生成所需文件

1
2
3
hexo init blog
cd blog
npm install

上述命令会在当前目录下新建名为blog的文件夹存放相关文件

安装主题

hexo可以轻易更改主题样式, 方便快捷美化地blog, 这里我使用Shoka主题进行演示

1
2
cd blog
git clone https://github.com/amehime/hexo-theme-shoka.git ./themes/shoka

完成后安装shoka主题所需的插件,均使用npm进行安装

1
2
3
4
5
npm i hexo-renderer-multi-markdown-it
npm i hexo-autoprefixer
npm i hexo-algoliasearch
npm i hexo-symbols-count-time
npm i hexo-feed

卸载冲突插件

1
npm un hexo-renderer-marked --save

配置主题

修改_config.yml切换主题

1
2
3
4
5
# 使用vim修改
vim _config.yml

# 或直接使用文本编辑器修改
# ...
1
2
# 找到theme: landscape修改为下文
theme: shoka

创建主题配置文件以方便修改主题配置

1
cp themes/shoka/_config.yml _config.shoka.yml

复制完成后只需要修改主题根目录下的_config.shoka.yml即可, 这样主题更新时不会覆盖掉自带的配置文件

配置插件

在_config.yml中添加下列配置

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
# Markdown config
markdown:
  render: # 渲染器设置
    html: false # 过滤 HTML 标签
    xhtmlOut: true # 使用 '/' 来闭合单标签 （比如 <br />）。
    breaks: true # 转换段落里的 '\n' 到 <br>。
    linkify: true # 将类似 URL 的文本自动转换为链接。
    typographer: 
    quotes: '“”‘’'
  plugins: # markdown-it 插件设置
    - plugin:
        name: markdown-it-toc-and-anchor
        enable: true
        options: # 文章目录以及锚点应用的 class 名称，shoka 主题必须设置成这样
          tocClassName: 'toc'
          anchorClassName: 'anchor'
    - plugin:
        name: markdown-it-multimd-table
        enable: true
        options:
          multiline: true
          rowspan: true
          headerless: true
    - plugin:
        name: ./markdown-it-furigana
        enable: true
        options:
          fallbackParens: "()"
    - plugin:
        name: ./markdown-it-spoiler
        enable: true
        options:
          title: "你知道得太多了"


# minify config
minify:
  html:
    enable: true
    exclude: # 排除 hexo-feed 用到的模板文件
      - '**/json.ejs'
      - '**/atom.ejs'
      - '**/rss.ejs'
  css:
    enable: true
    exclude:
      - '**/*.min.css'
  js:
    enable: true
    mangle:
      toplevel: true
    output:
    compress:
    exclude:
      - '**/*.min.js'
      
      
# highlight config
highlight:
  enable: false

prismjs:
  enable: false
  
  
# autoprefixer config
autoprefixer:
  exclude:
    - '*.min.css'
    
    
# feed config
keywords: #站点关键词，用 “,” 分隔

feed:
    limit: 20
    order_by: "-date"
    tag_dir: false
    category_dir: false
    rss:
        enable: true
        template: "themes/shoka/layout/_alternate/rss.ejs"
        output: "rss.xml"
    atom:
        enable: true
        template: "themes/shoka/layout/_alternate/atom.ejs"
        output: "atom.xml"
    jsonFeed:
        enable: true
        template: "themes/shoka/layout/_alternate/json.ejs"
        output: "feed.json"
        

# algolia search config
algolia:
  appId: #Your appId
  apiKey: #Your apiKey
  adminApiKey: #Your adminApiKey
  chunkSize: 5000
  indexName: #"shoka"
  fields:
    - title #必须配置
    - path #必须配置
    - categories #推荐配置
    - content:strip:truncate,0,2000
    - gallery
    - photos
    - tags

站点基本配置

在_config.yml中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Site
## 站点名称
title: 一心净土
## 站点副标题
subtitle: ''
## 站点描述
description: ''
## 关键词
keywords:
## 作者
author: Mszook
## 默认语言
language: en
## 时区
timezone: ''

在_config.shoka.yml中

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
alternate: [站点别称]

# 静态文件目录修改
# 使用jsDelivr加速: 
#    //cdn.jsdelivr.net/gh/{your_GitHub_name}/{your_Project_name}@latest/
statics: / 

# 静态文件实际目录名(一般无需修改)
css: css
js: js
images: images

# 启用Darkmode
darkmode: true

# 启用自动定位上次浏览位置
auto_scroll: true

# 显示加载动画
loader:
  start: true # 当初次打开页面时，显示加载动画
  switch: true # tab 切换到其他页面时，显示加载动画
  
# 鼠标烟花特效
fireworks:
  enable: true # 是否启用
  color: # 烟花颜色
    - "rgba(255,182,185,.9)"
    - "rgba(250,227,217,.9)"
    - "rgba(187,222,214,.9)"
    - "rgba(138,198,209,.9)"
    
# 加载Google Noto Serif字体
font:
  enable: true
  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: x.x`. Use `em` as unit. Default: 1 (16px)

  # Global font settings used for all elements inside <body>.
  global:
    external: true
    family: Mulish
    size:

  # Font settings for alternate title.
  logo:
    external: true
    family: Fredericka the Great
    size: 3.5

  # Font settings for site title.
  title:
    external: true
    family: Noto Serif JP
    size: 2.5

  # Font settings for headlines (<h1> to <h6>).
  headings:
    external: true
    family: Noto Serif SC
    size:

  # Font settings for posts.
  posts:
    external: true
    family:

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: Inconsolata


# 菜单与社交链接
# ||为分隔符,默认格式为 "链接||图标||颜色"
menu:
  home: / || home
  about: /about/ || user
  
  # 一级子目录菜单
  posts:
    # 第一项必须为default, 用于确定父级菜单样式
    default: / || feather
    archives: /archives/ || list-alt
    categories: /categories/ || th
    tags: /tags/ || tags
  # friends: /friends/ || heart
  # links: /links/ || magic

social:
  github: https://github.com/yourname || github || "#191717"
  #google: https://plus.google.com/yourname || google
  twitter: https://twitter.com/yourname || twitter || "#00aff0"
  zhihu: https://www.zhihu.com/people/yourname || zhihu || "#1e88e5"
  music: https://music.163.com/#/user/home?id=yourid || cloud-music || "#e60026"
  weibo: https://weibo.com/yourname || weibo || "#ea716e"
  about: https://about.me/yourname || address-card || "#3b5998"
  #email: mailto:yourname@mail.com || envelope || "#55acd5"
  #facebook: https://www.facebook.com/yourname || facebook
  #stackoverflow: https://stackoverflow.com/yourname || stack-overflow
  #youtube: https://youtube.com/yourname || youtube
  #instagram: https://instagram.com/yourname || instagram
  #skype: skype:yourname?call|chat || skype
  #douban: https://www.douban.com/people/yourname/ || douban
  
  
# 侧边栏配置
sidebar:
  # Sidebar Position.
  position: left
  #position: right
  # Replace the default avatar image and set the url here.
  avatar: avatar.jpg
  
# 页脚Widget
widgets:
  random_posts: true # 显示随机文章
  recent_comments: true # 显示最近评论
  
# 页尾全站统计
footer:
  since: 2010
  count: true

# 文章界面统计
post:
  count: true

一处错误

在修改好配置后, 使用hexo g生成静态页面时会出现以下错误, 根据提示修改即可解决

1
2
3
4
5
# Error Info
Prism's Diff Highlight plugin requires the Diff language definition (prism-diff.js).Make sure the language definition is loaded or use Prism's Autoloader plugin.
FATAL {
  err: Error: Function yaml.load is removed in js-yaml 4. Use yaml.undefined instead, which is now safe by default.
  ...}

修改./themes/shoka/scripts/generaters/config.js中第41行即可解决错误

1
2
3
4
5
// 源代码
hexo.theme.config.image_list = yaml.safeLoad(fs.readFileSync(path.join(__dirname, '../../_images.yml'))
                                             
// 修改
hexo.theme.config.image_list = yaml.load(fs.readFileSync(path.join(__dirname, '../../_images.yml'))

部署网站

生成SSH key

以MacOS为例, 其他系统可以查阅GitHub官方文档进行操作, 本文不再讲解

1
2
3
4
ssh-keygen -t ed25519 -C "your_email@example.com"

# 不支持Ed25519算法的系统使用以下命令
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

完成后会显示以下信息

1
2
3
4
5
6
7
Generating public/private ed25519 key pair.
Enter file in which to save the key (/User/usrname/.ssh/id_ed25519): # 设置SSH目录及文件名
Created directory '/User/usrname/.ssh'.
Enter passphrase (empty for no passphrase): # 设置密码, 一般不需要输入, 直接回车即可
Enter same passphrase again: # 确认密码
Your identification has been saved in /User/usrname/.ssh/id_ed25519.# 生成成功提示
Your public key has been saved in /User/usrname/.ssh/id_ed25519.pub.# 生成成功提示

查看生成的SSH key并记录以下信息

1
2
3
4
# 查看SSH key
vim ~/.ssh/id_ed25519.pub

# 将内容复制, 打开GitHub>Settings>SSH and GPG keys>New SSH key添加即可

部署页面

完成基本配置后, 需要将生成的静态页面部署到服务器上, 以GitHub为例, 在_config.yml中进行如下配置

1
2
3
4
5
# Deployment
deploy:
  type: 'git'
  repo: 'https://github.com/{Yourname}/{Yourname}.github.io.git'
  branch: 'master'

安装hexo-deployer-git

1
npm i hexo-deployer-git

完成后, 在博客根目录使用如下命令部署静态页面

1
hexo cl && hexo g && hexo d