hexo + github pages + next 主题，十分钟学会

介绍一下 hexo 的主要命令

首先，我们先介绍一下 hexo 的一些主要命令，具体可以查看 hexo 官网 - 命令。

命令	作用	简写
`hexo init <file>`	新建一个网站。如果没有设置 `file` ，Hexo 默认在当前的文件夹建立网站
`hexo generate`	生成静态文件（`public`）	`hexo g`
`hexo new [layout] <title>`	编写文章，默认在`source/_post` 文件夹下，`layout` 就是文章的布局，`post \|draft \|page`
`hexo server`	启动服务器。默认情况下，访问网址为： `http://localhost:4000/`	`hexo s`
`hexo deploy`	部署网站	`hexo d`
`hexo clean`	清除缓存文件 (`db.json`) 和已生成的静态文件 (`public`)。在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令

创建一个仓库

创建仓库页面

仓库名称固定，必须是 username.github.io ，username 就是你 github 的名称

进入设置页面

然后找到下面的 pages

选择主题(choose a theme)之后，就会自动跳转到 readme 的提交页面

根据提供给的链接打开网址，我们就可以看到我们选择的主题（这一步其实不重要，因为我们会用别的主题替换）

安装并运行 hexo

# 安装 hexo
$ npm install -g hexo-cli

# 建立文档
# file - 文件路径
$ cd <file>
$ hexo init

# 或者
# 建立的文件路径/以及名称
# desktop/Blog。desktop为路径 Blog 为文件名称
$ hexo init <file>

来演示一次。

安装依赖

# file 到文件目录
$ cd <file>

# 安装依赖
$ npm install

本地运行

$ hexo server

我们通过 http://localhost:4000/ 就可以打开页面了，这就是默认页面了。

部署到 github pages

部署其实很简单，就是修改 hexo 文件的 _config.yml 底部的 deploy 部署代码。

# gitname: your github name
# branch: 分支

# 下面注释掉的这种方式在2021年8月起，可能会报错，还是使用 ssh 的方式较好
# github: https://github.com/<gitname>/<gitname>.github.io.git
deploy:
  type: git
  repo:
    github: git@github.com:<gitname>/<gitname>.github.io.git
  branch: <branch>

还需要下载一个自动部署插件

$ npm install hexo-deployer-git

所有上面的东西，部署好之后，就可以进行部署了，我们通过一下 hexo d 命令对 github 进行部署。

$ hexo generate
$ hexo deploy

这时候我们的代码就部署到我们的 github 上了。

我们可以直接打开链接看一下 <gitname>.github.io，就可以看到我们部署的项目了，与 hexo s 运行结果相同。

下载使用 next 主题

我们来下载 next 主题

# 方式一
$ npm install hexo-theme-next@latest

# 方式二
$ git clone https://github.com/next-theme/hexo-theme-next themes/next
$ git pull  #更新

使用方法一更好一些，但是如果就更改内容来说，可能方法二比较方便。

我们使用方法一来实现一次。

我们在修改 _config.yml 中的 theme 配置

theme: next

然后我们执行命令，并对 github 进行部署。

$ hexo g -d

我们来看看，我们的成果吧，打开你自己的网页，username.github.io。

当然，部署命令执行之后，需要等待一会儿，不是马上就有的，如果你需要马上就有，可以执行 hexo s，先在本地看看是不是成功了。

这时候，我们就已经成功了。

但是有许多配置项可能都还不理解，我们进行分篇幅介绍。

我们再来介绍一个命令，如果你的主题是第一种下载方式(npm install hexo-theme-next@latest)。

$ cp node_modules/hexo-theme-next/_config.yml _config.next.yml

使用上面的命令，将主题配置文件，移到根目录下。

我们再来看看现在的文件结构。

可以发现，多出来一个 _config.next.yml 配置文件。

我们在里面找到 menu，然后打开这四个路由

在运行，看一下我们首页，就会多出一些标签路由。

当然，除了归档，其他点击都为空路由，因为，我们还没设置这两个文件夹。

$ hexo new page tag
$ hexo new page categories

这是我们 source 文件夹下，多了两个文件夹。

这时候，在打开网站时，就可以打开相关页面了，其他路由同理。

Hexo 配置项 NexT 主题各类修改 NexT 主题Gitalk/disqus评论

hzzzzzzzq / Blog

个人博客搭建 - 1. Hexo + Github Pages + NexT 主题，十分钟学会 #38