hexo(1)下载和部署 - Cirry's Blog

中文官网地址：hexo

安装hexo

前提：

自有服务器
域名
安装nodejs
安装git

1
# 切换源，后续使用cnpm安装包，可以在无法正常安装上包的时候使用
2
npm install -g cnpm --registry=https://registry.npmmirror.com

1
cnpm install hexo-cil -g
2
hexo init blog # 会在当前目录下创建blog目录
3
cd blog
4
cnpm install
5
hexo server # 可以简写为 hexo s

在浏览器中输入localhost:4000即可看到博客已经在开发模式下正常运行。

配置hexo

在根目录下的_.config.ym文件中，配置如下内容：

1
# Site
2
title: 菜小牛的Blog  # 网站标题
3
subtitle: 真正的大师永远怀着一颗学徒的心  # 网站副标题
4
description: 菜小牛的博客  # 网站描述，主要用于SEO
5
keywords: 菜小牛 Cirry  # 网站的关键词。支持多个关键词
6
author: Cirry  # 您的名字
7
language: zh-CN  # 设置为中文
8
timezone: 'Asia/Shanghai' # 修改为国内时区
9

10
# URL
11
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
12
url: http://cirry.cn # 修改为你的博客地址
13

14
...
15

8 collapsed lines
16
highlight:   # 开启代码高亮
17
  enable: true
18
  line_number: true
19
  auto_detect: true
20

21
...
22

23
mathjax: true # 没有就新增这一条，开启数学公式支持，在对应的文章中也需要开启mathjax支持

其余参数无需修改，保存之后，需要重新运行一下hexo server(当然你也可以使用npm run server 来重启应用)，刷新页面才能看到最新的效果。

基础命令

命令	使用方式	命令参考	说明
init	hexo init [folder]	hexo init blog	初始化博客项目，只有在创建的时候需要使用到
new	hexo new [layout] <title>	hexo new post “hello”	新建一篇博文，在source/_posts目录下新建一个文件名为hello.md
generate	hexo generate	hexo g	生成静态文件
publish	hexo publish [layout] <filename>	hexo publish post “hello”	发表草稿
deploy	hexo deploy	hexo deploy	部署网站
render	hexo render <file1> [file2] …		渲染文件
migrate	hexo migrate <type>		从其他博客系统迁移内容
clean	hexo clean	hexo clean	清除缓存文件 (`db.json`) 和已生成的静态文件 (`public`)
list	hexo list <type>		列出网站资料
version	hexo version	hexo version	显示 Hexo 版本
	hexo —draft		显示 `source/_drafts` 文件夹中的草稿文章

常用命令举例：

1
hexo new post --path hexo/hexo.md "hexo" # 会在source/_posts/hexo/ 文件夹下，创建hexo.md文档，且标题为"hexo"
2
hexo new page test  # 会在 source/test 文件下创建一个index.md 文档
3

4
hexo new draft "草稿"  # 会在source/_drafts 文件夹下，创建草稿.md，draft文件下的文件不会渲染在页面中
5
hexo new publish "草稿" # 会将草稿发布到_posts文件夹下，publish之后会渲染在页面中

使用git管理博客文章

你可以首先在github、gitee，或者在自建的git仓库中先创建一个git仓库。

你可以根据仓库创建完成后提示的命令提交代码。

1
git init
2
git add .
3
git commit -m "first commit"
4
git remote add origin [url] # 替换为你的仓库url地址
5
git push -u origin master

git 基础命令

命令	说明
git pull	更新代码
git add .	添加代码到缓存区
git commit -m “文章更新”	添加说明
git push -u origin master	提交代码到仓库

按照上述命令顺序，即可正常的提交和更新博客仓库。

安装Maupassant主题

这里我找了一个不错的主题做演示Maupassant。

1
git clone https://github.com/tufu9441/maupassant-hexo.git  # 在适当位置下载主题代码

为了方便管理，将下载文件中的_config.yml改名为_config.maupassant.yml，放到博客根目录下，后续在这里配置主题即可。为何这样操作参考官网使用代替主题配置文件。

将下载文件中的languages、layout、source 放到博客themes/maupassant中，如果没有对应文件夹则创建。

接下来安装主题需要的npm包：

1
cnpm install hexo-renderer-pug --save
2
cnpm install hexo-renderer-sass-next --save

配置主题

在_config.maupassant.yml文件找到对应属性

1
menu:
2
  - page: home
3
    directory: .
4
    icon: fa-home
5
  - page: archive
6
    directory: archives/
7
    icon: fa-archive
8
  - page: about
9
    directory: about/
10
    icon: fa-user
11
  - page: history
12
 directory: timeline/
13
  - page: guestbook
14
    directory: guestbook/
15
    icon: fa-comments

配置完成后重启项目，发现项目中没有关于我和留言页面，我们可以使用以下命令创建：

1
hexo new page guestbook # 创建留言页面
2
hexo new page about # 创建关于我页面
3
hexo new page history # 创建时间线页面

注意：时间线页面的内容在_config.maupassant.yml的timeline属性下填写。另外，时间线页面的front-matter应该如下：

1
---
2
title: 时间线
3
date: 2022-08-28 13:02:01
4
layout: timeline
5
comments: false
6
---

设置网站图标

若要设置网站Favicon，可以将favicon.ico放在Hexo根目录的source文件夹下，建议的大小：32px*32px。

若要为网站添加苹果设备图标，请将命名为apple-touch-icon.png的图片放在同样的位置，建议的大小：114px*114px。

可以去这个网站检查图标样式favicon-checker是否适应各个浏览器。

设置文章模板

我们已经知道创建文章的命令是hexo new post "hello"，但是该如何理解post这个参数？

在官网中，将其描述为layout（布局），默认使用_.config.yml中的default_layout来代替。我更愿意将其理解为文章模板，在我们使用命令创建的文章中会发现里面已经有了一些内容，这个内容从何而来？

打开项目根目录中的scaffolds文件夹发现，他已经有了三个默认的文件：draft.md，post.md，page.md，仔细看看post.md中的内容和我们创建的hello.md内容其实是一样的。

所以这个文件夹放的其实就是文章模板，你可以用他来自定义你需要通用内容，比如文章的tag，category和toc等等，那么在以后创建的文章中，将自带这些内容，修改post.md如下：

1
title: {{ title }}
2
date: {{ date }}
3
tags:
4
category:
5
- []
6
mathjax: true
7
toc: true

注意：category可以使用数组，tags可以直接写tag标签，类似：tags: hexo blog，自定义链接地址permalink必须以/结尾，类似：permalink: /hexo/install/1/。

文章摘要

首页默认显示文章摘要而非全文，可以在文章的front-matter中填写一项description:来设置你想显示的摘要，或者直接在文章内容中插入以隐藏后面的内容，若两者都未设置，则自动截取文章第一段作为摘要。

使用hexo new post hello，新建一个hello.md文档，内容如下：

1
hello.md
2
---
3
title: hello
4
date: 2022-08-18 18:44:43
5
tags: hexo
6
toc: true
7
description: What about the reality
8
mathjax: true
9
---
10
# Hello
11
There's that word again. 'Heavy.' Why are things so heavy in the future? Is there a problem with the Earth's gravitational pull?
12
## world
13
Knowledge could be more valuable than gold, more deadly than a dagger.
14
$$ f(x)=sin(x) + 12 $$

备注：title为文章标题，toc为开启文章目录，description是文章摘要内容，mathjax是开启数学公式持支持。

$$ f(x)=sin(x) + 12 $$

保存运行后，就可以看到文章已经正常显示啦，已经可以正常流畅的写文章了。

部署

讲的部署这个地方，就需要用到大家之前准备好的服务器了，并已经安装好nginx或者caddy等其它反向代理web服务，如果觉得麻烦可以直接使用github pages部署博客，具体可以参考# 将 Hexo 部署到 GitHub Pages。

hexo的部署方式有很多种，我们暂时选择一个比较简单的部署方式SFTP，如果后续有更多人需要，我可以写一些其他的部署方式，比如drone自动部署等等。

使用ssh工具连接到服务上后，先创建用户和对应的博客目录

1
$ useradd -m -s /bin/bash hexo # 创建用户
2
$ passwd hexo # 设置密码
3

4
# 退出登录，使用hexo用户重新登录
5
$ cd ~
6
$ mkdir blog # 创建blog目录，放置部署文件的位置

首先需要安装这个插件：

1
npm install hexo-deployer-sftp --save

然后在根目录下的_config.yml中的末尾部分，添加以下配置：

1
deploy:
2
  type: sftp
3
  host: 159.75.81.123
4
  user: hexo
5
  pass: 123456
6
  remotePath: /home/hexo/blog
7
  port: 22

使用命令hexo g -d，自动部署博客到服务器上。

我使用的caddy做的web的反向代理，修改一下caddy配置文件Caddyfile，重启caddy即可正确打开网页：

1
cirry.cn{
2
 root * /home/hexo/blog
3
 file_server
4
}

至此，博客的基本配置和部署功能都已经完成，下一篇说主题的配置。