Github Page的部署-从零开始

Github Page的部署-从零开始

1 注册Github

注册账号

注册账号直接按照流程注册即可，注册一个github账号是完全免费的

注册的时候注意，如果你想直接使用 username.github.io访问你的page的话，这里取的名字就最好是你后面创建仓库的名字

创建仓库

创建一个仓库，命名规则为 username.github.io

❗如果你想直接用username.github.io访问你的page的话，这里的username要与你注册的用户名一致才行！

如图，选择public，Description看情况填写即可：

2 在你的电脑上安装需要的软件

我所安装的软件全是安装在本地window10系统中

安装git

Git的下载地址为 链接

下载后直接安装就行，基本配置全部按照默认的来就行，并没有太多需要注意的地方

可以参考这个链接来进行安装

安装node.js

Node.js与Git的安装一致，直接到官网下载安装即可，下载地址为 链接

也可以参考这篇教程来进行安装 链接

git和node.js安装完成之后，打开windows自带的shell，通过以下指令分别查看是否安装成功：

1
2
3
4
5
6
7
PS C:\Users\Jason> git -v  #查看git的版本
git version 2.38.1.windows.1

PS C:\Users\Jason> node -v #查看node的版本
v18.12.1
PS C:\Users\Jason> npm -v #查看npm的版本
8.19.2

如果以上的指令都能返回出版本号，那么代表软件安装成功了，此外网上还有不少教程有多的一步，就是设置一个镜像网站，方便下载包什么的，但是因为我自己挂了梯子的，所以这一步我就省略了（GitHub不挂梯子还是有时候连接不上，如果想稳定的使用GitHub来作为博客的载体，还是应该需要一个梯子的）

安装hexo

首先，在自己的电脑中选择一个目录来作为自己博客的文件夹，建议这个时候选择的目录中不要带中文吧，不然鬼知道以后会报什么错误。

然后这个时候如果你的git安装成功了的话，在这个目录下鼠标右键点击，是会出现两个新的选项的

选择Git Bash Here，进入shell界面

然后输入 以下指令安装hexo

1
npm install hexo-cli -g

安装之后可以通过hexo -v查看是否安装成功

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Jason@Phoenix MINGW64 /d/Site/blog
$ hexo -v
INFO  Validating config
hexo: 6.3.0
hexo-cli: 4.3.0
os: win32 10.0.22621
node: 18.12.1
v8: 10.2.154.15-node.12
uv: 1.43.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.18.1
modules: 108
nghttp2: 1.47.0
napi: 8
llhttp: 6.0.10
openssl: 3.0.7+quic
cldr: 41.0
icu: 71.1
tz: 2022b
unicode: 14.0
ngtcp2: 0.8.1
nghttp3: 0.7.0

下面输出的就是安装的一些信息，这样就代表hexo安装成功了。

3 创建博客并设置主题

hexo安装好之后就可以正式开始完成你的博客并应用你想要的主题了

依然与之前的操作类似，在你的博客的目录下选择Git Bash Here，进入shell

输入hexo ini name，初始化你的博客，name是你自己命名，例如：blog

注意：选择的目录应该是一个空的文件夹，里面不能有其它文件，不然这一步会报错

1
2
3
4
5
6
Jason@Phoenix MINGW64 /d/Site/tec
$ hexo ini blog
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
INFO  Start blogging with Hexo!

这个时候你就可以在你选择的目录下看到hexo自动帮你创建好的文件了

这里面比较重要的内容是_config.yml，这个里面是hexo在渲染你的博客的时候的一些设置，以后可以根据需要对其修改。

然后进入到blog目录下，用两个指令来在本地生成并预览博客

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Jason@Phoenix MINGW64 /d/Site/tec
$ cd blog/   # 切换到blog目录

Jason@Phoenix MINGW64 /d/Site/tec/blog
$ hexo g # 渲染并生成博客
INFO  Validating config
INFO  Start processing
INFO  Files loaded in 355 ms
INFO  Generated: archives/index.html
INFO  Generated: archives/2022/index.html
INFO  Generated: index.html
INFO  Generated: fancybox/jquery.fancybox.min.css
INFO  Generated: js/script.js
INFO  Generated: css/style.css
INFO  Generated: js/jquery-3.4.1.min.js
INFO  Generated: css/fonts/fontawesome-webfont.woff2
INFO  Generated: archives/2022/11/index.html
INFO  Generated: fancybox/jquery.fancybox.min.js
INFO  Generated: css/fonts/fontawesome-webfont.eot
INFO  Generated: css/fonts/fontawesome-webfont.woff
INFO  Generated: css/fonts/FontAwesome.otf
INFO  Generated: css/fonts/fontawesome-webfont.ttf
INFO  Generated: css/images/banner.jpg
INFO  Generated: 2022/11/13/hello-world/index.html
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  17 files generated in 750 ms

Jason@Phoenix MINGW64 /d/Site/tec/blog
$ hexo s # 在本地预览博客
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

在浏览器输入 http://localhost:4000/ 就可以预览博客了

这里是用的hexo本身自带的主题，个人觉得不是很好看，因此可以自己选择一个喜欢的主题。主题在hexo官网上有，链接

我选择了Fluid这个主题，这里是他的GitHub链接，当然你也可以直接在hexo官网上搜索Fluid，然后也会给出这个主题的链接。

主题的安装一般都是一样的，最简单的就是直接通过npm安装，这种在hexo官网上能搜到的主题一般都可以直接通过npm安装的，fluid的安装命令如下

1
npm --save hexo-theme-fluid

我的运行结果如下：

1
2
3
4
5
6
7
8
9
10
Jason@Phoenix MINGW64 /d/Site/tec/blog
$ npm install --save hexo-theme-fluid

added 1 package, and audited 241 packages in 3s

22 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

理论上来说这样就是可以了的，但是我在用这个方法时，运行结束后我不能在theme里面找到fluid的文件夹，推测是hexo-cli版本不够的原因，所以我用了第二个方法，这个方法也是更加普适的方法，首先下载主题的release版本：

下载好之后，解压，重命名为fluid，再将其复制到你创建的blog目录下的theme里面。

然后打开该fluid，复制其中的_config.yml的内容，再到blog目录下创建一个文件，命名为_config.fluid.yml，然后将刚刚复制的内容粘贴进去，保存。

随后打开blog目录下的_config.yml（注意，不是blog/theme/目录下的那个_config.yml），在里面找到theme，将theme后面的landscape改为fluid。

保存好之后就可以使用fluid的主题了

这个时候再回到git bash中，先输入一下hexo clean（推荐每次你要重新生成博客的时候都先clean一下，避免出错），然后再hexo g与hexo s。以下是我用这个命令的输出结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
Jason@Phoenix MINGW64 /d/Site/tec/blog
$ hexo clean # 清除已有的博客文件
INFO  Validating config
INFO  Deleted database.
INFO  Deleted public folder.

Jason@Phoenix MINGW64 /d/Site/tec/blog
$ hexo g # 生成博客文件
INFO  Validating config
INFO  Start processing
INFO
------------------------------------------------
|                                              |
|     ________  __            _        __      |
|    |_   __  |[  |          (_)      |  ]     |
|      | |_ \_| | | __   _   __   .--.| |      |
|      |  _|    | |[  | | | [  |/ /'`\' |      |
|     _| |_     | | | \_/ |, | || \__/  |      |
|    |_____|   [___]'.__.'_/[___]'.__.;__]     |
|                                              |
|       Thank you for using Fluid theme !      |
|   Docs: https://hexo.fluid-dev.com/docs/en/  |
|                                              |
------------------------------------------------

INFO  Files loaded in 225 ms
INFO  Generated: local-search.xml
INFO  Generated: tags/index.html
INFO  Generated: links/index.html
INFO  Generated: archives/index.html
INFO  Generated: archives/2022/index.html
INFO  Generated: categories/index.html
INFO  Generated: archives/2022/11/index.html
INFO  Generated: 404.html
INFO  Generated: index.html
INFO  Generated: xml/local-search.xml
INFO  Generated: img/avatar.png
INFO  Generated: img/police_beian.png
INFO  Generated: img/fluid.png
INFO  Generated: img/loading.gif
INFO  Generated: css/highlight.css
INFO  Generated: js/boot.js
INFO  Generated: css/highlight-dark.css
INFO  Generated: js/color-schema.js
INFO  Generated: js/leancloud.js
INFO  Generated: css/gitalk.css
INFO  Generated: js/plugins.js
INFO  Generated: css/main.css
INFO  Generated: js/utils.js
INFO  Generated: js/img-lazyload.js
INFO  Generated: js/events.js
INFO  Generated: js/local-search.js
INFO  Generated: 2022/11/13/hello-world/index.html
INFO  Generated: img/default.png
INFO  28 files generated in 278 ms

Jason@Phoenix MINGW64 /d/Site/tec/blog
$ hexo s # 预览博客
INFO  Validating config
INFO  Start processing
INFO
------------------------------------------------
|                                              |
|     ________  __            _        __      |
|    |_   __  |[  |          (_)      |  ]     |
|      | |_ \_| | | __   _   __   .--.| |      |
|      |  _|    | |[  | | | [  |/ /'`\' |      |
|     _| |_     | | | \_/ |, | || \__/  |      |
|    |_____|   [___]'.__.'_/[___]'.__.;__]     |
|                                              |
|       Thank you for using Fluid theme !      |
|   Docs: https://hexo.fluid-dev.com/docs/en/  |
|                                              |
------------------------------------------------

INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

可以看到，装了flui主题之后在生成博客的时候会有明显的提示，打开localhost:4000，也会发现主题已经应用。

接下来就可以使用这个注意愉快的开始写博客了，fluid的一些特性以及配置都可以在blog目录下的_config.yml和_config.fluid.yml中修改，这两个文件中都对各个参数给出了非常容易理解的注释，修改起来还是很方便的。

4 部署到GitHub Page

写好了博客还需要将其部署到自己的Github上才行，接下来说一下怎么部署。

首先，你需要在Git Bash中与你的Github链接，依次输入以下两个指令

1
2
3
git config --global user.name "用户名"
git config --global user.email "邮箱"

然后需要生成你的ssh密钥，来链接github，输入

1
ssh-keygen -t rsa -C "你的Github邮箱"

连续按enter键，它会告诉你ssh密钥生成成功，并且存到了一个路径下，这个时候可以再输入

1
cat ~/.ssh/id_rsa.pub

这个时候Git Bash上会输出密钥的内容，可以直接复制，当然，如果不习惯Linux操作内容的话，也可以按照之前它输出的路径直接打开文件夹去找对应的id_rsa.pub文件，再用记事本打开那个文件并复制其中的内容。复制好密钥之后，打开你的Github主页，进入到Settings，选择SSH and GPG keys，点击New SSH key。

Title可以随便写一个，Key Type推荐选择Autentication Key，然后将Key粘贴到下面的框中，再点击Add SSH key即可。

这个时候密钥就配置好了，回到Git Bash，输入:

1
2
ssh -T [email protected]

如果跟返回的是类似我的结果

1
2
3
4
Jason@Phoenix MINGW64 /d/Site/tec/blog
$ ssh -T [email protected]
Hi PhoenixJason! You've successfully authenticated, but GitHub does not provide shell access.

那么就代表链接成功了，接下来就是准备部署，首先需要安装一下hexo的部署工具，直接在Git Bash中输入

1
npm i hexo-deployer-git

安装好之后，还需要修改一下_config.yml中的部署信息，如下图

1
2
3
4
deploy:
  type: 'git' # type设置为git，注意git和https部署的类型不一样，下面的repo格式也不一样
  repo: [email protected]:username/username.github.io.git # username即为你的用户名和仓库名，如果你前面注册的时候两个名字是一样的话，这里也应该是一样的
  branch: master

配置好再保存，就可以直接在blog目录下，在Git Bash中输入

1
hexo d

即可成功部署。

部署之后就可以用username.github.io查看你的博客网站了，注意部署之后GitHub上也会需要一定的时间来重新部署，这个你可以打开仓库的action查看部署进度。

5 设置自定义域名

一般来说，GitHub上的page网址格式统一是 username.github.io，名字虽然不算难记，但是多少逼格不够，所以如果你自己有一个域名的话，就可以自定义域名访问，比如我的phoenixjason.cn。以下是设置方法。

首先需要ping一下你的username.github.io，这个我是通过另外一台服务器来ping的，可以返回ipv4的地址，但是我在自己的电脑上ping，就没办法返回ipv4的地址。

记住这个ipv4地址，然后到你的域名的控制台，添加解析记录。这里虽然我是在阿里云买的域名，但是由于我后面搭建图床的一系列操作，所以我就转到cloud flare去解析了，但是添加解析记录的方法都是一致的。不过转过去貌似要修改一下解析的服务器，这个就需要再Cloud Flare中复制解析服务器的地址，再到阿里云里面取改一下，这个调整起来也很简单。

这里第一和第三条解析记录就是为了自定义域名的，第二条是为了图床用的，第一条解析记录A，@，内容就是你刚刚获得的ipv4地址，第三条记录时CNAME，www，内容则是username.github.io。解析记录添加好之后，就可以打开你的Github，进入刚刚创建的仓库，选择setting-pages，在最下面，Custom Domain中输入你的域名，再点击save即可

之后你就可以直接使用你的域名访问你的博客网站了。

6 图床的设置

开始写了博客就知道了图床的重要性，所以我最终还是决定搭建一个图床，虽然最后PicGo部分还是调试失败了，但是前期的工作还是搭建了一个勉强能用的免费图床，而且因为我是用wolai编写博客再导出md文件，图片都是直接帮我打包好了的，我只要改一下名字上传即可，所以没有PicGo倒是对我影响也不大。

我的图床是基于Backblaze(B2)和CloudFlare搭建的，也是跟着网上的教程一步一步来的，目前来收运行的比较稳定。

首先需要再Backblaze上创建一个账号并创建一个储存桶。这里是Backblaze的链接

注意创建的时候记得选择Public，名字的话就随便取了，推荐复杂一点，不要太容易让别人知道。

创建好之后，首先打开CORS rules，选择Share everything in this bucket with all HTTPS origins

然后打开bucket settings，在bucket info中输入

1
{"cache-control":"max-age=4320000"}

然后可以随便上传一张图片，然后点击图片，获取friendly URL

记住这个链接，然后打开Cloud Flare，添加一条解析记录

就是这里的第二条解析记录，可以用一个二级域名，比如我的就是image，内容就指向你刚刚获取的那个friendly URL。添加了解析记录之后，点击SST/TLS，选择 完全(严格)

然后点击规则，添加两条规则，具体可以参考链接

注意：这里我也不清楚这两条规则是否会有用，所以详细步骤就不写了，因为我认为这两个规则可能是为了后续用PicGo等软件的时候所需要的。

接下来，你就可以通过二级域名/file/bucketname/img_name.jpg的格式取访问你的图片了，例如

这样一个简易的图床就搭建好了，配合wolai编写blog，图片直接插入到wolai中，再将页面导出markdown格式，它会直接将你的图片打包在一个目录下，但是这个命名规则可能不能被markdown接受，所以最好自己再对图片改一下名，然后按照规则自己把url写好，替换掉markdown里面的图片引用，最后将图片打包好上传到backblaze中即可。（感觉还是有点麻烦，不过在编写其它内容的时候用wolai不用考虑太多，图片插入麻烦一点也没啥了，如果以后我自建一个服务器的话，这样做文件迁移也好弄）

7 总结

以上就是全部的内容了，我的博客也算是才搭建完毕

总体来说还是需要修改很多东西的，目前也在探索的阶段，不过自己从零开始搭建一个博客网站还是学到了不少东西的，以后也会基于Fluid自定义一些页面吧，不过那都是后话了，图床的话我就打算先这样用着，毕竟一直白嫖也不是个事儿。以后可能会自己弄一个服务器作为图床，也需要探究怎么弄，慢慢来吧。

#Hobby #Computer #Blog
Github Page的部署-从零开始
http://phoenixjason.cn/2022/11/19/20221119ithub Page的部署-从零开始/
作者
Jason
发布于
2022年11月19日
许可协议