使用hexo 搭建Github pages 个人博客

hexo
others
发布日期:   2019-07-21

下面介绍本博客使用hexo搭建github pages的过程。

一、流程介绍

安装Homebrew –> 安装nodejs –> 安装hexo、npm –> 本地测试 –> 配置Github ssh key链接 –> 发布到Github pages –> 修改主题 –> 添加字数统计等插件 –> 后续待补充。

二、安装Homebrew

可以使用mac系统自带ruby环境，只需在终端下输入如下指令即可完成Homebrew的安装，如果以下链接失效可以去官网看看新的链接：

1
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2.1 测试是否安装成功

1
2
3
4
5
 node -v
v12.6.0
 npm -v
6.10.1
#打印版本号说明安装成功

2.2 问题解决

1
node command not found

可以尝试如下方法解决问题

1
2
3
vim ~/.bash_profile
打开文件后在文件内增加下面一行（将命令添加到环境变量中）
PATH=/usr/local/bin:/usr/bin:/usr/sbin:/bin:/sbin

三、安装hexo

Node.js和Git都安装成功后开始安装Hexo。安装时注意权限问题，加上sudo，其中-g表示全局安装。

1
sudo npm install -g hexo

3.1 问题解决

安装hexo时可能出现如下问题：

  • 问题1
1
2
npm WARN deprecated core-js@1.2.7: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.
/usr/local/bin/hexo -> /usr/local/lib/node_modules/hexo/bin/hexo

这是因为core-js 版本过低，可以使用如下命令将其升级

1
npm install -g core-js@3
  • 问题2
1
permission denied, mkdir '/usr/local/lib/node_modules/hexo/node_modules/fsevents/.node-gyp'

权限问题，增加权限即可
https://cn.bing.com/search?q=macos+%E5%A6%82%E4%BD%95%E7%BB%99%E6%96%87%E4%BB%B6%E5%A4%B9%E5%A2%9E%E5%8A%A0%E6%9D%83%E9%99%90

四、博客初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#创建存储博客的文件夹
mkdir hello-gits.github.io

#进入到博客文件夹
cd hello-gits.github.io

#初始化本地博客，下载所需
hexo init

#安装npm
sudo npm install

#生成静态文件 (这些命令需要在该文件夹内执行)
hexo g

#启动服务器。默认情况下，访问网址为： https://localhost:4000/
hexo s

接下来通过浏览器访问 https://localhost:4000 查看博客，效果如下图
效果图

五、发布到github pages

5.1 创建仓库

新建仓库名称必须为user.github.io，如hello-gits.github.io。
新建仓库

5.2 关联远程仓库

1
2
3
4
5
6
#切换到博客目录下
cd hello-gits.github.io

#编辑该目录下 _config.yml 文件 
vim _config.yml

打开后到文档最后部分，将deploy配置如下。

1
2
3
4
deploy:
  type: git
  repository: git@github.com:hello-gits/hello-gits.github.io.git
  branch: master

5.3添加ssh keys到GitHub

添加ssh key后不需要每次更新博客再输入用户名和密码。首先检查本地是否包含ssh keys。如果存在则直接将ssh key添加到GitHub之中，否则新生成ssh key。
执行下述命令生成新的ssh key，将your_email@example.com改成自己注册的GitHub邮箱地址。默认会在~/.ssh/id_rsa.pub中生成id_rsa和id_rsa.pub文件。

1
2
3
4
#生成 ssh key
ssh-keygen -t rsa -C "your_email@exampl"
#打开ssh key 信息文件,并复制文件中的内容
vim ~/.ssh/id_rsa.pub

将ssh key 内容复制到 GitHub -> Setting -> SSH keys -> add SSH key
title 可以标注本机名称，以便将来删除，点击Add key完成添加。
这时可以通过 hexo d 命令将博客部署到GitHub之中，可以通过 your_email.github.io 访问看到更新内容。

5.4 将博客更新到github pages

1
2
#部署博客到github 
hexo d

接下来可以去你新建仓库的同名地址访问到你的博客，例如我的博客地址为：https://hello-gits.github.io

六、更换主题

可以在一下网址找到你喜欢的主题：
https://www.zhihu.com/question/24422335
https://hexo.io/themes/
本博客主题地址：https://github.com/blinkfox/hexo-theme-matery

将喜欢的博客clone 到自己的主题文件夹下

1
2
3
4
5
6
7
8
9
cd hello-gits.github.io

#clone 主题
git clone https://github.com/iissnan/hexo-theme-next themes/next

#修改主题
vim _config.yml

#theme的名称landscape更改为next

七、其他设置

7.1 新建分类 categories 页

categories 页是用来展示所有分类的页面，如果在你的博客 source 目录下还没有 categories/index.md 文件，那么你就需要新建一个，命令如下：

1
hexo new page "categories"

编辑你刚刚新建的页面文件 /source/categories/index.md，至少需要以下内容：

1
2
3
4
5
6
7

---
title: categories
date: 2019-07-21 17:25:12
type: "categories"
layout: "categories"
---

7.2 新建标签 tags 页

tags 页是用来展示所有标签的页面，如果在你的博客 source 目录下还没有 tags/index.md 文件，那么你就需要新建一个，命令如下：

1
2

hexo new page "tags"

编辑你刚刚新建的页面文件 /source/tags/index.md，至少需要以下内容：

1
2
3
4
5
6
7

---
title: tags
date: 2019-07-21 17:25:20
type: "tags"
layout: "tags"
---

7.3 新建关于我 about 页

about 页是用来展示关于我和我的博客信息的页面，如果在你的博客 source 目录下还没有 about/index.md 文件，那么你就需要新建一个，命令如下：

1
2

hexo new page "about"

编辑你刚刚新建的页面文件 /source/about/index.md，至少需要以下内容：

1
2
3
4
5
6
7

---
title: about
date: 2019-07-21 17:25:30
type: "about"
layout: "about"
---

7.4 新建友情连接 friends 页（可选的）

friends 页是用来展示友情连接信息的页面，如果在你的博客 source 目录下还没有 friends/index.md 文件，那么你就需要新建一个，命令如下：

1
hexo new page "friends"

编辑你刚刚新建的页面文件 /source/friends/index.md，至少需要以下内容：

1
2
3
4
5
6
7

---
title: friends
date: 2019-07-21 17:25:43
type: "friends"
layout: "friends"
---

八、插件安装（可选）

8.1 代码高亮

由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下：

1
npm i -S hexo-prism-plugin

然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：

1
2
3
4
5
6
7
8
highlight:
  enable: false

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

8.2 搜索

本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：

1
npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

1
2
3
search:
  path: search.xml
  field: post

8.3 中文链接转拼音

如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。

安装命令如下：

1
npm i hexo-permalink-pinyin --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

1
2
3
permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

注：除了此插件外，hexo-abbrlink 插件也可以生成非中文的链接。

8.4 文章字数统计插件

如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件。

安装命令如下：

1
npm i --save hexo-wordcount

然后在本主题下的 _config.yml 文件与主题文件夹中的_config.yml文件，激活以下配置项即可：

1
2
3
4
5
wordCount:
  enable: false # 将这个值设置为 true 即可.
  postWordCount: true
  min2read: true
  totalCount: true

九、后记

到这里github 博客就算基本搭建成功了，后面还有一些如google 收录、域名绑定、SEO 等工作可以自己看一些文章做一下。

文章作者: hnbian
文章链接: https://www.hnbian.cn/posts/b1f6f33c.html
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 hnbian !
hexo
评论
  目录