如何使用Hexo+GitHub/Gitee建立自己的博客

本篇文章用以记录我使用Hexo+GitHub/Gitee建立自己的博客的流程，以及其中遇到的种种问题及解决方法。

1、什么是HEXO

快速、简洁且高效的博客框架

详细了解：Hexo官方文档

1.1、准备工作

首先需要安装Git+Node.js
Git官方下载地址
如果下载地址太慢或者无响应可选择该地址选择下载：
拉到最下面即可查看最新版本
淘宝 Git for Windows 镜像

Node.js
Node.js官方下载地址
建议选择LTS版本

1.2、安装hexo

在磁盘上建立文件夹，我的文件夹名称为Blog
在目录下右键：

完成后，即可使用 npm 安装 Hexo。
即在打开的窗口粘贴下面的语句用来安装Hexo

npm install -g hexo-cli

使用命令初始化Hexo
hexo init E:/Blog

或者直接
hexo init

在目录下安装

npm install

完成后：目录下文件有：

1.3、部署Hexo

完成后使用命令
hexo generate

生成静态文件

启动服务器

hexo server

默认情况下，访问网址为：

http://localhost:4000/

上面命令可以简写为

hexo g

hexo s

从图片提示我们可知：使用Ctrl+C停止服务

访问http://localhost:4000/即知Hexo部署成功与否

2、布置主题（可略过，直接部署到GitHub/Gitee）

布置主题

我们可以使用hexo官方主题页
选择主题来布置

例如选择该主题

注意:此处要在博客的themes文件夹下！！！

此处我选择的是该主题：
https://github.com/zhaoo/hexo-theme-zhaoo

输入命令：
git clone https://github.com/zhaoo/hexo-theme-zhaoo

git clone 后面的网址依据我们选的主题代码地址决定

我们也可以模仿此方式下载GitHub上的其他文件

此时可能因为网络，会导致获取失败。重新执行命令即可

然后我们将博客主目录下修改_config.yml下大约100行，修改我们主题为我们选择的主题名称，即：
我们下载的文件名。文件名与配置文件中的名称相同即可。

我们可以使用hexo server
先在本地测试，再部署到GitHub

例如：

表示我们已经部署成功。
我使用的博客主题配置文档

Butterfly主题

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

可以访问该主题作者的文档进行配置
主题文档

配置说说:https://artitalk.js.org/
配置评论:https://valine.js.org/
相关云服务:https://leancloud.app/

3、将Hexo部署到GitHub

3.1、什么是GitHub？

GitHub是一个面向开源及私有软件项目的托管平台，因为只支持Git作为唯一的版本库格式进行托管，故名GitHub。
官网：GitHub
有时候很慢，可以换个时间再打开，
注册账户后

3.2、创建仓库

仓库名，我们命名为此格式，方便我们后面访问

github.io

点击Create repository后创建完毕！

此时我们复制这个网站，备份，以便我们再次访问我们的仓库
我的是：https://github.com/CodeTestC/CodeTestC.github.io.git
你们的是自己的用户名。

3.3、为GitHub添加SSH

安装完 Git 之后，要做的第一件事就是设置你的用户名和邮件地址。 这一点很重要，因为每一个 Git 提交都会使用这些信息，它们会写入到你的每一次提交中，不可更改：
在博客目录下右键选择Git Bash Here，使用以下命令：

git config --global user.name "GitHub用户名"
git config --global user.email GitHub注册用的邮箱

再次强调，如果使用了 --global 选项，那么该命令只需要运行一次，因为之后无论你在该系统上做任何事情， Git 都会使用那些信息。 当你想针对特定项目使用不同的用户名称与邮件地址时，可以在那个项目目录下运行没有 --global 选项的命令来配置。

可进Git文档详细了解

许多 Git 服务器都使用 SSH 公钥进行认证。 为了向 Git 服务器提供 SSH 公钥，如果某系统用户尚未拥有密钥，必须事先为其生成一份。 这个过程在所有操作系统上都是相似的。

可通过以下命令查看自己的配置
git config --list

下面我们用以下命令来生成一份密钥：

具体可查看Git文档

或查看GitHub文档

粘贴以下文本，替换为您的GitHub电子邮件地址。

ssh-keygen -t ed25519 -C "your_email@example.com"
注意：如果使用的旧系统不支持Ed25519算法，请使用：

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

当提示您“输入要在其中保存密钥的文件”时，请按Enter。这接受默认文件位置。
Enter a file in which to save the key (/c/Users/you/.ssh/id_ed25519):[Press enter]

下面需要键入一个安全密码，建议直接Enter，代表不设置密码，以后上传代码，文件更新我们的文章是则无需键入密码。键入密码也可以，但是需要我们记住。

在提示符下，键入一个安全的密码短语。有关更多信息，请参见“使用SSH密钥密码短语”。
Enter passphrase (empty for no passphrase): [Type a passphrase]
Enter same passphrase again: [Type passphrase again]

此时即可创建成功！
然后提示我们“输入要在其中保存密钥的文件”时的地址：C:/Users/you/.ssh/
复制id_xxx.pub文件中的内容。

此时我们打开我们的

Title无需填写，直接将我们复制id_xxxx.pub文件中的内容填入key中

此时，我们使用
ssh -T git@github.com
测试连接是否成功！
显示Hi CodeTestC/CodeTestC.github.io! You’ve successfully authenticated,

此处CodeTestC为我的用户名，到时候显示的是你们的用户名

连接成功，我们就成功为GitHub添加SSH

3.4、将 Hexo 部署到 GitHub Pages

可查看Hexo官方文档配置
可通过该页查看下面的参数详细信息

• 安装hexo-deployer-git
  可直接使用此命令安装
  npm install hexo-deployer-git --save

• 在 _config.yml（如果该段已存在的请删除）添加如下配置：

deploy:
  type: git
  repo: https://github.com/<username>/<project>
  # example, https://github.com/hexojs/hexojs.github.io
  branch: gh-pages

• 运行 hexo clean && hexo deploy
  此时可能会弹窗，我们选择浏览器打开
  然后点击按钮，验证我们身份

也有可能因为网络波动导致失败，我们等待网页可以正常打开时，再执行命令

• 查看 username.github.io 上的网页是否部署成功。
• 例如我的网址是https://codetestc.github.io/
• 此时显示这个网页，表示我们已经配置成功！！！
  

4、将Hexo部署到Gitee

设置git

git config --global user.name "用户名"
git config --global user.email "邮箱（gitee注册的邮箱）"

提示：如果需要同时使用GitHub与Gitee, 此处可以搜索引擎搜索如何同时设置GitHub与Gitee

创建仓库
页面新建即可，此处不再演示。

添加密钥

创建密钥步骤与上面写的相同。
ssh-keygen -t ed25519 -C "your_email@example.com"
三步都回车即可。
然后提示我们“输入要在其中保存密钥的文件”时的地址：C:/Users/you/.ssh/
复制id_xxx.pub文件中的内容。
添加到gitee

此时，我们使用
ssh -T git@gitee.com
测试可否连接

申请Gitee Pages

注意:需要正反面身份证照片及手持身份证的照片,并需要工作人员在一个工作日内审核。

hexo配置

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://gitee.com/onlineshow/my-blog.git
  branch: master

repo地址:

复制即可。
branch写master

还需要配置url和root否则会丢失样式！

url就是上面的网站地址不用写仓库名

root就是网站地址最后一个/后面的仓库名

---

在博客目录下执行
hexo clean && hexo g && hexo d

中间会让我们输入gitee的用户名密码。

上传成功

上传成功后
需要更新Gitee Pages服务后才可以访问！
每次上传都需要更新此服务！！！

5、显示markdown(Typora)插入的图片

方法1

以Gitee为例，GitHub同理。

此时默认复制到typora的图片在markdown文件内是此种格式显示图片

在博客文件夹的根目录下
修改版的hexo-asset-image

npm install https://github.com/7ym0n/hexo-asset-image --save
如果实在安装不上，可以先安装
npm install hexo-asset-image --save然后复制https://github.com/7ym0n/hexo-asset-image内的index.js内的全部内容替换博客根目录的node_modules下的hexo-asset-image内的index.js全部内容！

此时我们执行
hexo clean
hexo g && hexo s
本地网页即可显示成功！

hexo d部署到GitHub/Gitee
Gitee别忘记更新一下

更新完成后，打开网站地址:
同样显示成功！

方法2

上传图床直接在markdown内贴图床地址即可。

Gitee建图床的话，突然加了防盗链，不再建议使用Gitee做图床。

6、一些使用配置及指令

配置详细见Hexo文档
指令详细见Hexo文档

6.1、记录一下常用命令（新建页面，文章等)

1、新建页面
hexo new page --path about/me "About me"
2、新建文章
hexo new "post title with whitespace"
3、清理缓存文件以及静态文件
hexo clean
4、 生成静态文件
hexo generate
5、部署网站
hexo deploy
6、启动本地服务器。默认情况下，访问网址为： http://localhost:4000/。
hexo server

• 一般我们新建文章后，使用hexo clean命令
  再使用hexo g && hexo d部署到网站。

• 可以先使用hexo clean命令，
  再使用hexo s部署到网站,然后使用http://localhost:4000/查看效果。

6.2、上述常用命令解释（可略过）

新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。

hexo init [文件夹]

• 默认情况下，Hexo 会使用文章的标题来决定文章文件的路径。对于独立页面来说，Hexo 会创建一个以标题为名字的目录，并在目录中放置一个 index.md 文件。你可以使用 --path 参数来覆盖上述行为、自行决定文件的目录。

新建一个新页面

hexo new page --path about/me "About me"

• 注意！title 是必须指定的
• 以上命令会创建一个 source/about/me.md 文件，同时 Front Matter 中的 title 为 “About me”
• 此时即创建了名为about的新页面。若想显示需要在主题下设置。

新建一篇文章

hexo new "post title with whitespace"

• 执行完此命令后，在我们的source文件夹下的_posts下的文件夹下
  创建了文件名和title都为""双引号内容的md文件，打开编辑即是编辑我们的文章。

生成静态文件

hexo generate

该命令可以简写为

hexo g

文件生成后立即部署网站，部署网站

hexo deploy

该命令可以简写为

hexo d

启动本地服务器。默认情况下，访问网址为： http://localhost:4000/。

hexo server

该命令可以简写为

hexo s

清除缓存文件 (db.json) 和已生成的静态文件 (public)

hexo clean

• 在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令

稍微改一下我们博客主目录下的_config.yml

一些文章内容编辑以及主题详细配置以后更新。