harry's blog

本文包括几部分：安装前准备，Hexo 配置，关联 GitHub 和如何部署等

具体实现流程是什么？Hexo 是静态博客托管平台，我们在本地可以编辑博客，更换主题等。当我们在本地编译好网站之后，我们可以将与本地博客相关联的托管仓库更新，随后网站就可以与本地一起更新了

1. 安装前准备

在使用 Hexo 写博客之前，我们需要对 GitHub，Git，nodejs 以及 hexo 做一些配置

GitHub 账号
在GitHub 官网申请账号，并新建一个和自己名字相同的 github.io 仓库，比如我这里叫 harrytea，就新建一个名为 harrytea.github.io 的仓库。仓库主要用来存储自己的博客文件
安装 Git
Git 的安装很简单，根据官网下载安装即可：git 官网
安装 nodejs
hexo 是基于 nodejs 写的，安装 nodejs，nodejs 官网

sudo apt-get install nodejs
sudo apt-get install npm

安装完后运行下面命令检查是否安装成功 node -v npm -v

安装 hexo
hexo 是一个快速、简洁高效的博客框架，主要使用 Markdown 语言来解析文章，几秒内就可以生成静态网站。我们可以使用 hexo 创建文章，修改主题等，hexo 官网

npm install hexo-cli -g

这个命令可能会报错，如果报错根据错误提示命令改为 sudo npm install hexo-cli --location=global，然后输入 hexo -v 检查是否安装成功

2. Hexo 基本命令

初始化 hexo 文件：在本地任意创建一个文件夹（这里创建名字为 hexo-blog 的文件夹），用下面命令将其初始化

hexo init hexo-blog
cd hexo-blog
npm install

创建文章: 使用下面命令创建一篇文章，当 title 里面包含一些特殊字符时，我们可以加上双引号

hexo new post <title>
hexo new post "<title>"

生成静态文件: 生成静态的 html 文件等，方便查看和部署

hexo generate
hexo g

启动本地服务器: 启动本地服务器，查看生成的网页

hexo server # 默认网址: http://localhost:4000/

部署网站: 将本地生成的网页部署到服务器端

hexo deploy
hexo g -d # 可以结合g一起使用，即生成静态网页后直接部署

清除缓存: 清除缓存文件（db.json）和已生成的静态文件（public），在某些情况下（例如更换主题后），如果对网站做操作网站没反应，可以使用此命令

hexo clean

3. Hexo 的基本运行过程

3.1 Hexo 的目录结构

在上传到 GitHub 之前，我们需要了解一下 hexo 的目录结构，执行完 hexo init <folder> 命令之后，我们的文件夹如下所示

|-- _config.yml # 配置信息，可以在这里配置网站的大多数参数
|-- package.json # 查看hexo的版本以及相关依赖包的版本信息
|-- scaffolds # 模板文件夹，新建文章时，会根据这里的模板生成文件
|-- source # 资源文件夹
|   |-- _drafts # 草稿文件夹
|   |-- _posts # 文章文件夹
|-- themes # 主题文件夹，根据主题来生成静态页面

其中 source 是资源文件夹，用于存放用户资源，例如图片，文章等等，每次编译时，_post 文件夹下中的 md 文件会被编译为 html 文件并放到 public 文件夹下，其余非下划线开头的文件和文件夹会被原封不动的复制到 public 文件夹下

3.2 Hexo 生成静态文件

如上面所述，source 是资源文件夹，public 是自动生成的静态文件夹，在执行 hexo generate 后，会将 source 中的 md 文件转化为 html 文件，再结合主题渲染成为我们最终看到的博客。

执行 hexo clean 后会删除 db.json 和 public 文件夹下的所有文件

3.3 Hexo 部署到 GitHub

执行 hexo deploy 后，会将 public 文件夹下的文件推送到 GitHub 中，并生成 .deploy_git 文件夹，此文件夹和 public 文件夹一致

hexo generate # 根据source生成/更新public
hexo deploy # 根据public生成/更新.deploy_git

4. 通过 GitHub 部署到 Netlify

4.1 与 GitHub 仓库关联

首先在 GitHub 上创建一个仓库，随后复制刚才的 GitHub 地址，进入到本地的 blog 根目录，将二者关联起来

git init
git remote add origin https://github.com/name/your-Repository.git

然后在 .gitignore 中写我们不想推送的文件

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
themes/
_multiconfig.yml

之后推送即可，此时我们的内容都保存在 GitHub 对应地仓库了（这样可以防止本地的数据丢失）

注意: hexo deploy 部署命令，这个命令会将 public 目录中的文件和目录推送至 _config.yml 中指定的远端仓库和分支中，并且完全覆盖该分支下的已有内容

Ok，现在到了最关键的时刻了：这里我们将我们博客的一些源文件，比如 source 中的 md 文件推到 GitHub 关联的仓库的 master 分支中，而根据 hexo deploy 的特性，他仅仅只能将 public 文件夹下的文件推到另一个分支（这里设置的是 run-page）。为什么这样呢？因为我们有了 source 信息之后，我们可以在本地重新生成 public 文件夹，所以没有必要把 public 文件夹推到 GitHub 的 master 分支。如下所示，二者通过一个仓库关联起来，互相在不同的分支，互不干扰

|-- source等文件 -- master分支
|-- public文件夹 -- run-page分支

在 _config.yml 中设置 run-page 分支的方法如下

deploy:
  type: git
  repository: git@github.com:name/your-Repository.git
  branch: run-page

4.2 托管到 netlify

首先进入到netlify 官网注册一下账号

这里因为部署过了，所以现在不写了，后续有时间写

本文由 Yonghui Wang 创作，采用知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Dec 19, 2024 12:18 pm

Hexo 博客搭建