基于Hexo和GithubPage的个人博客搭建教程

刚搭完，趁我还记得我今天做了啥赶紧写一下教程（）

首先，什么是Hexo呢？文心一言如是说：

Hexo是一个基于Node.js的静态博客框架，具有快速、简洁且高效的特点。它拥有丰富的插件和主题，支持Markdown语法，使得编写博客文档变得方便快捷。Hexo使用Node.js进行开发，安装和部署过程简单，只需要几个npm命令即可完成。由于它是纯静态博客，不需要额外的数据库或PHP环境，仅仅需要一个Node.js环境即可运行。

这是Hexo的中文文档：文档 | Hexo，包含了很详细的安装教程和介绍。

Hexo环境配置

正如文档中所说，配置Hexo环境首先要安装Node.js和git，此处不予赘述，详见Hexo文档。

Node.js官网：Node.js (nodejs.org)。注意安装Node.js的时候Add to path即可。

装好Node.js之后就可以愉快地输入一系列npm命令了：）

建议新建一个文件夹，然后进入安装Hexo（npm好像是允许局部装包的，就装在当前文件夹下）。

mkdir myblog
cd myblog

对于熟悉 npm 的进阶用户（显然不是我，我没试过），可以仅局部安装 hexo 包：

npm install hexo

对于新手如我，选择按照文档，一行代码装好Hexo：

npm install -g hexo-cli

关于npm

npm是Node.js的包管理器（Node Package Manager），用于管理Node.js应用程序的依赖项（包），类似于Python的pip。

可以用npm list查看当前项目目录下安装的依赖项。我最后一共装了这些：

关于Hexo Theme

Theme可以理解为博客模板，可以理解为，博客网站的UI形式框架已经被模板搭好了，这让博客搭建者可以只专注于博客内容的书写本身，而不是一头扎入前端三大件的海洋（笑）

我用的主题是Fluid。

它的文档很完整，对新手很友好，并且可以根据文档，自己对网站的部分UI进行调整：开始使用 | Hexo Fluid 用户手册 (fluid-dev.com)

如何部署

根据主题文档的说明和Hexo文档的说明修改配置文件config等，就能配置自己的博客啦。具体配置的过程详见建站 | Hexo。

Setup

$ hexo init <folder>
$ cd <folder>
$ npm install

写blog

$ hexo new [layout] <title>

新建的blog文件会出现在source/_posts文件夹下。每天都在感叹Markdown语法真是伟大的发明（笑）。

Hexo Server

Server可以建立一个本地服务器查看网页，以对博客网页进行本地调试。在博客目录下输入：

$ hexo server

这时候点击http://localhost:4000/可以在浏览器中查看网页。当然也可以参照Hexo文档中所提到的方法修改端口号。

部署到Github Page

首先要在Github新建一个空仓库，仓库的名称需要是：username.github.io，然后在仓库设置界面把pages打开。

Hexo的git一键部署还是很方便的。当然也可以参照Hexo文档进行其他的部署方式，也可以将你的github域名和自己的域名绑定，从而通过一个稳定的url访问blog。

记得改URL

部署到github page的话，记得在config里改URL为噢！比如这样：

Set your site url here. For example, if you use GitHub Page, set url as https://username.github.io/project

这个URL会成为网站的根目录，其他所有静态文件的url都是这个目录的子文件夹。

一键部署

我参考的是git一键部署，首先在博客所在文件夹安装 hexo-deployer-git：

$ npm install hexo-deployer-git --save

然后在config文件里添加deploy，如图：

deploy的可选参数在文档中可以查到：

最后，请在库设置（Repository Settings）中将默认分支（和github pages创建所依赖的分支）设置为_config.yml配置中的分支名称，比如图中是gh-pages。

大功告成

在参照文档部署 | Hexo的一键部署部分配置完之后，想把博客部署到github page，只需如下两步！

首先：

$ hexo clean

然后：

$ hexo deploy

即可访问https://username.github.io查看你的博客啦！