（三）Hexo+GitHub-1:简单生成个人网页

检查安装环境：

打开终端：win+r+cmd，检查node，npm，git，hexo版本信息（如果没有版本信息，下载安装）。

1-安装环境

1.1-npm

# Linux
npm -v

 出现以下信息表示已安装npm：

 1.2-node

# Linux
node -v

出现以下信息表示已安装node：

1.3-Github

# Linux
git --vision

出现以下信息表示已安装Github：

1.4-hexo

# Linux
hexo -v

出现以下信息表示已安装hexo：

配置网页运行环境

2-网页运行

2.1-创建Github远程库

登录自己的Github，点击New repository创建新的远程库并填写所搭建网页的域名。”创建之后，点击setting设置远程库：找到GitHub Pages点击Automatic page generator“[1]

”在Repository name下面填写你要创建的地址，这个地址是就是你的域名，以github.io结尾。**例如填写wapchief.github.io以后就在地址栏直接输入wapchief.github.io就可以访问网站按照提示一步步完成创建。“[1]

2.2-存储hexo网页模板到本地

新建网页->Git Bash Here（右键）

安装hexo服务

# Linux
npm install hexo --save

初始化配置文件

# Linux
hexo init

初始化npm

# Linux
npm install

生成hexo网页模板, 访问http://localhost:4000/可以看到生成的初始模板。

# Linux
# Generate hexo framework in the local file
hexo g
# Generate web service in the local port 4000
hexo s

安装主题模板

3-安装主题

这里使用的是hexo的next theme。可以随意选择主题，在Github中自行下载。

3.1-下载next模板

Git bash之后输入以下代码 （下载模板最好带着版本号，如果不，可能会报错）：

# Linux
hexo init
git clone --branch v7.8.0 https://github.com/theme-next/hexo-theme-next themes/next

3.2-运行服务

访问http://localhost:4000/，查看所安装的模版

# Linux
hexo g
hexo s

修改模板中内容

此步骤的目的是，修改模板中的原始内容使得符合自己的目的。

4-修改内容

4.1-修改配置文件

进入项目配置文件_config.yml, 配置远程仓库入口：[1]

# Linux
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
# repo: https://github.com/${git_repo_name}/${git_repo_name}.github.io.git
  repo: https://github.com/chenyang/chenyang.github.io.git
  branch: master

4.2-添加pdf

安装插件 [2]

# Linux
npm install --save hexo-pdf

进入模板配置文件，/themes/next/_config.yml添加如下代码 [2]

pdf:
  enable: true
  # Default height
  height: 500px
  pdfobject:
    # Use 2.1.1 as default, jsdelivr as default CDN, works everywhere even in China
    cdn: //cdn.jsdelivr.net/npm/pdfobject@2.1.1/pdfobject.min.js
    # CDNJS, provided by cloudflare, maybe the best CDN, but not works in China
    #cdn: //cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js

4.2.1-方法一：直接添加文章

新建Markdown文档，添加如下代码到文档中 [2]

外部链接：
{% pdf ${file_online_address %}
本地连接：
{% pdf ./${file_name}.pdf %}

如下是不同形式pdf的添加方式 [3]

# Normal PDF
# Online
{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}
# Local
{% pdf ./bash_freshman.pdf %}

# Google drive
{% pdf https://drive.google.com/file/d/0B6qSwdwPxPRdTEliX0dhQ2JfUEU/preview %}

# Slideshare
{% pdf http://www.slideshare.net/slideshow/embed_code/key/8Jl0hUt2OKUOOE %}

4.2.2-方法二：将文章添加到新的导航

创建导航标签 [2]

# Linux-terminal
# hexo new page ${new_nav_name}
hexo new page book

在/themes/next/_config.yml文件中添加导航 [2]

menu:
    Book: /book/ || book #books

在生成的文件夹下进行与4.2.1相同的操作。

4.3-配置导航categories

4.3.1-方法一：将tags与categories结合

参照引用[4]的方法。

4.3.2-方法二：直接新增categories

如果没有导航categories，在终端跑如下代码，如果有跳过这个步骤。

# Linux
hexo new page "categories"

在Markdown文件中直接添加如下内容

---
type: "${category_name}
---

4.4-修改导航home指向的页面（主题页）

在source目录下，新建index.md文档 [5]

修改项目（根目录）_config.yml文件中index_generator字段 [5]

index_generator
    path: /default-index/

修改主题_config.yml文件的导航Home指向的链接

menu:
 home: / || fa fa-home

4.5-添加音乐播放器

4.5.1-方法一：直接插入音乐外部链接

复制音乐的外部链接[6]

4.5.2-方法二：基于插件播放

添加播放器插件 [6]

# Linux
npm install --save hexo-tag-aplayer

修改配置文件 [6]

插入音乐信息 [6]

4.6-添加网页版权信息

见引用[9]

部署网页至个人域名下

5-部署至个人域名

5.1-查看hexo+Github网页

访问chenyang.github.io.git（远程仓库地址为网页地址）网页，则为创建好的网页。

5.2-个人域名解析

域名->解析->添加记录

创建两个记录，先添加CNAME记录再添加A[8]。

5.3-本地配置部署环境

检查是否登录自己的git：git bash

# Linux
git config --global user.name ${git_user_name}
git config --global user.email ${git_user_email}

检查根目录下_config.yml文件是否配置deploy字段：

deploy:
	type: git
	repo: git@github.com:${git_repo_name}/${git_repo_name}.github.io.git
	branch: master

检查是否安装部署插件，如果没有使用如下语句

# Linux
npm install hexo-deployer-git --save

检查自己是否配置ssh

如果没有配置见引用 [7]

5.4-部署到个人域名

在source目录下创建CNAME文件，此文件无后缀。在此文件中复制个人域名(例如：chmhx.com)。 [7]

配置Github远程库中的Custom domain选项。pages->GitHub Pages->Custom domain,在此添加个人域名（例如：chmhx.com)。 [7]

在所创建的hexo项目下输入如下代码进行成功部署： [7]

# Linux
hexo g
hexo d

如果项目存在以前的代码，为了不影响部署新的任务可以使用如下代码：

# Linux
hexo clean && hexo g && hexo d

推荐阅读:

[1] ‘使用hexo+github免费搭建个人博客网站超详细教程’, November，2020， CSDN，Available at:  使用hexo+github免费搭建个人博客网站超详细教程_wapchief的博客-CSDN博客_hexo博客（Accessed on 17 February 2022)

[2] ‘使用 Github 空间搭建 Hexo 技术博客——Hexo NexT主题内添加pdf 插件（十一）’, March，2019， CSDN，Available at: 使用 Github 空间搭建 Hexo 技术博客——Hexo NexT主题内添加pdf 插件（十一）_EnjoyToShare | 资源分享平台-CSDN博客（Accessed on 17 February 2022)

[3] ‘hexo-pdf’, Github，Available at：https://github.com/superalsrk/hexo-pdf（Accessed on 17 February 2022)

[4] ‘Hexo butterfly Cannot GET /tags/ ||categories/出现404’, August，2020， CSDN，Available at: Hexo butterfly Cannot GET /tags/ ||categories/出现404_Moqiqiuzi之家-CSDN博客（Accessed on 17 February 2022)

[5] ‘Hexo博客-NexT主题自定义主页配置方法’, Apirl，2021， cnblog，Available at: Hexo博客-NexT主题自定义主页配置方法 - 法华寺中班小屁孩 - 博客园，(Accessed on 17 February 2022)

[6] ‘Hexo主题插入音乐之aplayer音乐播放器’, March，2019， CSDN，Available at: Hexo主题插入音乐之aplayer音乐播放器_hushhw的博客-CSDN博客_hexo音乐插件（Accessed on 17 February 2022)

[7] ‘使用GitHub + Hexo搭建技术博客 部署到个人域名’, December，2021， CSDN，Available at: 使用GitHub + Hexo搭建技术博客 部署到个人域名_如魔的博客-CSDN博客（Accessed on 17 February 2022)

[8] ‘添加 CNAME 记录提示和 A 记录冲突如何解决’, August，2019， CSDN，Available at: 添加 CNAME 记录提示和 A 记录冲突如何解决 - 云+社区 - 腾讯云（Accessed on 17 February 2022)

[9] ‘Hexo Next 添加版权协议并修改出现位置’, July，2019， CSDN，Available at: Hexo Next 添加版权协议并修改出现位置 - 知乎（Accessed on 17 February 2022)