部署安装

发布日期: 2021-04-06

更新日期: 2021-10-22

文章字数: 1.7k

2021-04-06最近想搭建一个博客网站，来规范地记录自己的学习内容。目前Hexo+Github是比较主流的一种搭建方法，本文也是基于该方法，详细记录其搭建步骤及搭建过程中所遇到的问题，以供大家参考💤。

1. Hexo简介

之前没有接触过Hexo，因此仔细地把Hexo官方文档看了一遍，本文大部分内容也是基于此文档。Hexo的官方定义为: Hexo是一个快速、简洁且高效的博客框架。它使用Markdown（或其他渲染引擎）解析文章，在几秒内即可利用靓丽的主题生成静态网页。

2. Hexo安装

在安装Hexo之前需要先安装Git和Node.js。若已安装上述程序，则可直接进行Hexo安装。

2.1 Git安装

Windows: 官网下载并安装。
Linux(Ubuntu): sudo apt install git
查看git版本: git --version

2.2 Node.js安装

Windows: 在官网下载安装包，按指示安装即可。
Linux(Ubuntu):
```
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs
```
- lts为最新的长期支持版本，若需要特定版本，将其替换为xx，如12即为V12版本。
查看Node.js版本: node -v
建议使用12.0及以上版本。

2.3 Hexo安装

全局安装: sudo npm install -g hexo-cli
局部安装: npm install hexo 进阶用户可局部安装，本文采用全局安装。
查看Hexo版本信息: hexo -v
至此，安装工作全部结束。

3. Hexo基本操作

3.1 初始化网页

新建一个文件夹，以存放Blog相关文件: mkdir path/to/MyBlog
进入该文件夹: cd path/to/MyBlog

初始化:

hexo init # 速度会比较慢
npm install

初始化后会在主目录下生成若干文件和文件夹:
- _config.yml: 网页的配置信息
- package.json: 安装包信息
- scaffolds: 模板文件夹
- source: 资源文件夹，存放Blog文章等
- themes: 主题文件夹，决定静态页面的主题

3.2 新建文章

hexo new [layout] <title> e.g. hexo new post "First-Blog"
layout默认为post，此时会在source/_posts/下生成First-Blog.md文件
将_config.yml文件中的post_asset_folder:false改为true，则每次新建文章时会自动新建一个同名的文件夹用来存放图片等资源。
可以自定义layout，自带的layout有:
插入图片: sudo npm install hexo-renderer-marked，并更改配置文件:
即可使用Markdown相对路径插入图片: ![](xxx.png)
生成静态文件: hexo generate or hexo g # 生成的文件在public文件夹中
本地预览: hexo s，然后浏览器打开localhost:4000即可，ctrl+c关闭本地服务器。

3.3 新建草稿

若有未编辑完的文章或者不想公开的文章，可以将其存为草稿。
使用hexo new draft <title>命令新建草稿，此时运行hexo g不会生成_drafts文件夹下文章的静态文件。
若想本地预览草稿，则需使用hexo s --draft命令。
将草稿发布为正式文章，使用hexo p <title>命令，实际上就是把_drafts文件夹下的文章移动到_posts文件夹下。
同理，若想将正式文件转为草稿，则只需将相应的文件移动到_drafts文件夹下。
一个小问题：草稿中插入图片需将图片放置于/source/images目录下，插入命令也需改为![](/images/xxx.png)

4. Github部署

安装hexo-deployer-git: npm install hexo-deployer-git
打开github，新建一个项目，项目名字设为: username.github.io # username为github用户名
进入所建项目，点击Settings, 往下拉直到GitHub Pages
选择一个主题，等一会刷新一下直到网址栏变绿:
点击链接即可看到自己的初始网页。
本地生成ssh秘钥: ssh-keygen -t rsa # 不用设密码，一路回车即可
进入github主页，点击头像-->Settings-->SSH and GPG keys-->New SSH key
将生成的公钥内容复制进去，命名随意，确定保存。公钥路径默认为~/.ssh/id_rsa.pub
验证: ssh -T git@github.com
修改部署配置: 打开_config.yml文件，修改位于文件最后的deploy字段:
repository为github项目地址，用ssh链接更快。
部署到github: hexo d
打开github.io主页即可看到发布的文章。
删除文章: 删除对应的md文件，再执行hexo clean

5. 个性化设置

5.1 绑定域名

To Do，目前感觉github.io还行*-*

5.2 备份Blog源文件

部署之后，上述新建的username.github.io项目会被public文件夹覆盖。
为了能够在不同的电脑写博客，可以建立一个新的分支来存放整个源文件。
点击分支，输入要创建的新分支名，如source
然后将其克隆到本地: git clone git@github.com:wwwei1997/wwwei1997.github.io.git
进入项目主目录: cd wwwei1997.github.io.git
切换到source分支: git checkout source
将.git复制到博客根目录下: cp .git path/to/MyBlog/
删除项目: rm -rf wwwei1997.github.io.git
进入博客主目录: cd path/to/MyBlog
三连: git add . & git commit -m "message" & git push origin source
此时打开github切换到source分支即可看到上传的源文件。
注意: 上传时需要降themes下的.gitkeep删除，否则主题传不上去。

5.3 Front-matter

Front-matter是Markdown文件最上方以---分隔的区域，用于指定特定文件的变量。
修改/scaffolds/post.md:
每次新建文章时会自动填充这些变量。
Hexo中tag和category区别:
- category具有顺序性和层次性，而tag没有，如:
```
categories:
  -Animal
  -Dog
```
- 这意味着Dog是Animal的子类。

5.4 主题

Hexo社区提供了300+主题供大家选择，我选择的是matery主题，初步使用参考官方中文文档，可根据自己的偏好进一步修改。我自己所修改的内容主要有:

在“关于”页面增加简历card

编辑/themes/hexo-theme-matery/layout/about.ejs，在<div class="card">对应的</div>下面新增一个card:

<div class="card">
	<div class="card-content">
		<div class="card-content article-card-content">
				<div class="title center-align" data-aos="zoom-in-up">
					<i class="fa fa-address-book"></i>&nbsp;&nbsp;<%- __('myCV') %>
				</div>
				<div id="articleContent" data-aos="fade-up">
					<%- page.content %>
				</div>
		</div>
	</div>
</div>

然后即可在/source/about/index.md中写简历内容。

增加建站时间
- 编辑/themes/hexo-theme-matery/_config.yml，将time.enable改为true
更改导航栏、页尾背景色:
- 编辑主题文件的/source/css/matery.css，自行修改.bg-color字段:
取消动态切换背景色:
- 编辑主题文件的/source/css/matery.css，注释keyframes rainbow和webkit-keyframes rainbow字段:
```
/*@-webkit-keyframes rainbow {
...}
@keyframes rainbow {
...}*/
```