个人博客搭建之 Hexo + Github Pages + NexT 主题，十分钟学会

发表于 分类于 阅读次数： 2.1k 5 分钟
我们从如何搭建博客开始，使用 Hexo + GithubPages 以及 NexT 主题来完成，一起来学习吧！

介绍一下 hexo 的主要命令

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

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

创建一个仓库

  • 创建仓库页面

image-20220117153956920

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

image-20220117154056202

  • 进入设置页面

image-20220117154209325

  • 然后找到下面的 pages

image-20220117154336407

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

image-20220117154539668

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

image-20220117154713730

安装并运行 hexo

1
2
# 安装 hexo
$ npm install -g hexo-cli
1
2
3
4
5
6
7
8
9
# 建立文档
# file - 文件路径
$ cd <file>
$ hexo init

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

来演示一次。

image-20220118144154623

  • 安装依赖
1
2
3
4
5
# file 到文件目录
$ cd <file>

# 安装依赖
$ npm install

image-20220118144310872

  • 可以看到现在的目录结构是这样的

image-20220118151322761

  • 本地运行
1
$ hexo server

image-20220118144332639

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

image-20220118144408105

部署到 github pages

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

1
2
3
4
5
6
7
8
9
10
# 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>
  • 还需要下载一个自动部署插件
1
$ npm install hexo-deployer-git

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

1
2
$ hexo generate
$ hexo deploy

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

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

下载使用 next 主题

我们来下载 next 主题

1
2
3
4
5
6
# 方式一
$ npm install hexo-theme-next@latest

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

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

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

image-20220118151413475

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

1
theme: next

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

1
$ hexo g -d

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

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

image-20220118151655445

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

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

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

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

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

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

image-20220123115412196

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

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

image-20220123115524563

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

image-20220123115647543

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

1
2
$ hexo new page tag
$ hexo new page categories

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

image-20220123135642800

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

相关文章推荐
-------------------- 本文结束 感谢阅读 --------------------