「建站」04 将Hexo部署到Github Page

Greetings! ¶

Yaho~ ふちゃんです！(> ▽ <) /~

在上一节中，我们已经安装好了Hexo并在本地预览了我们的博客网站。

那么在编辑我们的博客之前，不妨先将它部署到Github Page上吧！（本节不涉及域名解析等自定义域名的内容）

Github Page是Github提供的一个静态网站托管服务，我们可以将我们的博客网站部署到Github Page上，这样我们就可以通过Github Page来访问我们的博客网站了。

0. 注意 ¶

我会用<<>>来表示每个人情况不同的内容。（如每个人的路径与邮箱）

1. 修改配置文件 ¶

我们需要修改Hexo的配置文件_config.yml，让Hexo知道我们要将博客网站部署到Github Page上。（也可以顺便修改一下博客网站的标题、描述等信息）

具体的参数信息可以参考Hexo官网。

1.1 Deployment ¶

首先我们找到Deployment这一项（在最下方），然后对其进行补充与修改。

注释里面已经给了官网链接啦

我们要将deploy中的type改为git，并且将repo改为我们的Github仓库地址。（地址可以通过Github仓库的Code按钮来获取）

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/<<你的Github用户名>>/<<你的仓库地址>>.git
  branch: main

注意：一些老教程会将branch设置为master，但是从2020年开始，Github已经将默认分支改为main了，所以我们需要将branch设置为main。

向制作老教程的前辈们致敬！

1.2 URL ¶

然后我们需要将Hexo的_config.yml文件中的url修改为我们的Github Page地址。

找到url这一项（靠近最上方），然后将其修改为https://<<你的Github用户名>>.github.io/<<你的仓库地址>>/即可。（或者说https://<<你的仓库名>>.git）

也强烈推荐通过注释里给出的官网链接来了解更多配置信息。

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://<<你的仓库名>>.git

1.3 *其他（optional） ¶

我们也可以修改一下博客网站的标题、描述等信息。

找到最上方的Site这一项，然后按需修改即可。

• 注意，这里的language指的是网站的语言，而不是博客的语言。具体填入什么需要根据你所选的主题来定。（主题会在下一节中介绍，如果你不知道该填什么，可以先留着默认的en）
• timezone指的是时区，对于中国大陆来说，可以填Asia/Shanghai。

# Site
title: <<你的博客标题>>
subtitle: <<你的博客副标题>>
description: <<你的博客描述>>
keywords: <<你的博客关键词>>
author: <<你的名字>>
language: en
timezone: Asia/Shanghai

2. 安装hexo-deployer-git（不是apt安装的git） ¶

我们需要安装hexo-deployer-git这个插件，来实现将博客网站部署到Github Page上。

• 如果不安装这个插件直接部署的话会报错Deployer not found: git。（在官方文档中也提到这个bug，给出的解决方案就是安装这个插件）

将路径切换到博客网站的根目录下，然后执行以下命令即可。

npm install hexo-deployer-git --save

3. 配置git ¶

距离部署已经不远啦！我们只需要配置一下git就可以啦！

• 如果不配置直接进行部署的话，会出现一个*** Please tell me who you are.的提示，可以根据这个提示下给出的命令来配置git。

也就是下面这两条命令。

git config --global user.name "<<你的Github用户名>>"
git config --global user.email "<<你的Github邮箱>>"

4. 保存github token ¶

从2021年8月13日开始，Github将不再接受使用密码进行git操作，所以我们需要使用token来进行git操作。

打开你的Github主页，然后点击右上角的头像，选择Settings，选择最下方的Developer settings。

然后选择左侧的Personal access tokens，点击右上角的Generate new token。

• 注意，这个token只会显示一次，之后你再打开这个界面就无法再查看它了。请务必将它保存在便于你访问且安全的地方！之后我们每一次更新博客网站都需要用它作为密码来验证。

有关token的配置，我们可以将其期限设置为No expiration（当然，Github强烈建议我们设置一个有期限的token，这里根据自己的需求来定）。然后对于Select scopes，我们最低限度只需要勾选repo即可。

5. 部署与更新 ¶

让我们先回到博客网站的根目录下。

接下来要介绍平时更新博客时常用的几个命令。

• hexo g(hexo generate)：生成静态文件（public文件夹）。

• hexo d(hexo deploy)：部署网站到Github Page上。

• hexo cl(hexo clean)：清除缓存文件（db.json）和已生成的静态文件（public文件夹）。（它不会删除source文件夹中的文件，所以不用担心会误删文章）

  • 我们通过hexo d命令部署网站时，同步到Github仓库的文件夹就是public文件夹。

• hexo s(hexo server)：启动本地服务器，用于预览网站。（默认端口为4000，可以通过hexo s -p <port>来指定端口）

请记住这几个命令，我们每次会经常用到它们。

以下是一个常用的更新博客的流程，注意，以下所有命令都需要在博客网站的根目录下执行！

5.1 清除缓存文件和已生成的静态文件 ¶

我不确定这一步是否必要，但是我每次更新博客时都会执行这一步。

hexo cl

5.2 生成静态文件 ¶

将我们对配置的修改、对文章的修改等等都生成为静态文件到public文件夹中。

hexo g

5.3 部署网站到Github Page上 ¶

hexo d

这一步会要求你输入Github的用户名和密码，然而：

• 用户名是区分大小写的！
• 这里的密码并不是你的Github密码，而是你在上一步中保存的Github token！

对了！如果执行hexo d后卡住，没有出现有关Github的提示，那么可以多次尝试Ctrl+C来终止命令，然后再重新执行hexo d。

如果一切顺利的话，你的博客网站已经部署到Github Page上了。

5.4 更新 ¶

自此往后，每次更新博客网站时，我们只需要执行以下两步即可。

hexo g
hexo d

如果遇到一些地方没有同步的情况，可以尝试先执行hexo cl再执行以上两步。

6. 预览网站 ¶

在短暂的等待后（部署后需要一定的时间才能在网上访问到你的博客网站），你可以查看你的Github仓库是否更新，也可以直接在浏览器中输入<<你的仓库名>>（<<你的用户名>>.github.io）来访问你的博客网站。

不出意外的话，你已经可以在网页中浏览到source文件夹中自带的Hello World文章了。

之后我们的主要工作就是在source文件夹中添加文章啦！

Summary ¶

Congratulations！🎉

至此我们已经了解了部署与更新博客的全部流程啦！\(≧▽≦)/~

那么，下一节！我们来讲讲使用这个框架写博客时会遇到的一些问题吧！（比如如何插入图片、如何使用emoji等等）

有关域名解析的问题，我想在最后面再提，因为我觉得这只是最后的装点～

Have fun! 😉

上一节： 「建站」03 使用Hexo初步创建博客网站与本地预览

下一节： 「建站」05 Hexo中的Markdown特殊用法