本期教大家如何搭建 Hexo

首先需要准备的东西如下:

1.电脑

2.手

3.脑袋

好了没了

安装 Node.js

由于 Hexo 这款博客程序是基于 Node.js 所构建的,所以我们需要下载 Node.js

打开Node.js 官网

选择下载稳定版(LTS):12.18.3

下载并安装完成后验证是否安装好了的方法

打开终端

输入 node -v 和 npm -v

如果出现版本号 v….就说明安装成功

安装 Git

使用 Hexo 呢 Git 也是必不可少的

打开Git 官网

点击 Donload 2.28.0 for Windows 即可进行下载

但由于是使用 GitHub 的 release 进行下载所以速度较慢

国内用户可以使用:淘宝镜像源进行下载,最新版本需要翻到最底下进行下载

安装好后在桌面单击右键,如果右键菜单出现

Git Bash Here 的字眼则代表安装成功

安装 Hexo

新建一个文件夹,在里面右键

选择 Git Bash Here 打开 Git 终端

输入

1
npm install hexo-cli -g

安装 Hexo-cli

安装好后输入

1
hexo init

来初始化 Hexo,此步骤会从 GitHub 下载 Hexo 的主题、依赖文件所以时间会比较久,请耐心等待哦 o( ̄ ▽  ̄)ブ如果你有条件就科学上网吧~

当提示 INFO  Start blogging with Hexo!时就安装完成了

查看安装的文件夹

发现有这些文件/文件夹:

  • node_modules
  • scaffolds
  • source
  • themes
  • .gitignore
  • _config.yml
  • package.json
  • package-lock.json

其中 node_modules 是你安装的插件存放位置,删掉了必须重新 npm i

scaffolds 是你博客的模板存储位置,page.md 就是创建 page 时使用什么模板以此类推就行

source 是用来存放博客资源的,一般都是随手扔文件进去就行

.gitignore 目前用不到(除了使用 GitHub actions 等持续集成部署博客的)

_config.yml 用来存放 Hexo 配置

package.json 顾名思义,就是你安装的插件名称和版本都会被存储在里面

其中我们要用到的是 themes、_config.yml

安装主题

首先我们去Hexo 官方主题网站找一个好看的主题

这边用 Butterfly 为例

点击它的图片进去看看效果

个人觉得还行,目前我正在用,体验也非常好

这款主题的 GitHub 仓库为https://github.com/jerryc127/hexo-theme-butterfly

进入后在 README.md 中有 2 种安装方法

1.使用普通安装方法(git clone)

2.使用 NPM 安装(npm install hexo-theme-butterfly)

这边用 GIT 做演示

复制指令

在终端内部粘贴并回车

安装完成后根据 GitHub 仓库的 README.md 提示还需要安装 pug&stylus 渲染器

指令如下:

1
npm install hexo-renderer-pug hexo-renderer-stylus

安装依赖完成后我们打开_config.yml

找到 theme:

把它改为 Butterfly

保存文件,然后在终端执行

1
hexo s

打开 Hexo 的本地预览工具看看效果

默认的打开地址是:http://localhost4000

用户可通过 hexo s -p 来指定访问端口

比如 2000

1080

8081 等

更改名称

Hexo 安装完成后默认的名称为 Hexo,那么如何更改呢

首先打开_config.yml

找到”# Site”

更改 title subtitle description keywords author

title 更改为您的博客名字

subtitle 更改为你的介绍

keywords 更改为你想要的关键字

author 更改为你自己的名字

部署到服务器

一切准备完成后就可以部署了

这边演示 Coding 部署

双部署也一样

首先打开Coding 官网

如果没有账号就点击免费注册

注册完成进入你的企业

选择创建项目

项目模板使用 DevOps

名称可以随意

例如:👴 的博客等

这边用 👴 的博客示范

启用 README.md 初始化可以随意

公开源代码可以自选

配置完后点击完成创建

接下来进入持续部署-静态网站

进行实名认证

认证完成后点击立即发布静态网站

网站名称依旧随便填写

其他配置不要动

点击完成创建

这时候出现这个页面

选择设置

下滑找到自定义域名

复制用以代替 xxxx.coding-pages.com 作为网站的访问地址的 xxxx.coding-pages.com

然后打开 DNS 解析商

这边使用 dns.la

新建一个解析

解析设置:

其中主机记录可以自行设置

比如 www

test

cna 等

如果要直接用域名访问主机记录留空

做好解析之后回到 Coding 页面

添加刚才的域名

这边使用 test.slqwq.cn 做示范

这时候会出现这样的样子

这是在生成证书

证书状态变为正常后推荐打开强制 HTTPS

这些做完后打开_config.yml 找到 deploy 配置

里面这样填写

1
2
3
4
deploy:
type: git
repo: https://e.coding.net/企业名/项目名/仓库名.git
branch: master

填写完后在终端内输入

1
npm install hexo-deployer-git --save

安装 Hexo-Deployer-Git

安装完后就可以使用

1
hexo clean && hexo d -g

部署了

End

结束了~

感谢您的观看

更多进阶功能可前往Hexo 文档Butterfly 主题文档查看