【注意】:本文纯属才疏尚浅的我以笔记的形式进行的记录,很多知识其实我也不是太懂,可能存在理解偏差和认知错误,来学习的朋友们请自己甄别,路过的大神们也别喷我哈哈,有什么问题和建议可以评论提出或者其它方式联系我。我会尽可能保持更新该文章所使用到的技术和做法,并随时接受勘误。

右下角设置可调为夜间模式阅读文章
PC端目录在侧边栏或右下角,手机端目录在右下角
点击目录可跳转到文章相应部分(本文强烈建议在PC端观看)
PC端右下角设置也可隐藏侧边栏,或者进入纯净的阅读模式

本篇文章为 百里飞洋丨Barry Flynn 版权所有,
转载与分享请务必携带原文链接:https://blog.meta-code.top/2021/09/15/2021-1/
侵权必究!!!

引言

  每当在大佬们群里划水的时候,身为 大佬 菜鸡,总是很羡慕他们拥有自己的域名和博客。但由于我还是初学计算机的学生,买域名或者租云服务器主机其实也并不是很急迫的事情 (才不是因为不想掏那份钱哈哈哈) ,主要我是怕买了之后不会用,在那一边闲着 haha~ 因此我选择了 Hexo 作为我的博客框架,花了一两天时间,查找翻阅网上各种教程,将 Hexo 成功部署到了 GitHub Pages,建立了人生第一个真正属于自己的个人(博客)网站。

  • 什么是Hexo?
      Hexo 是一个快速、简洁而强大的博客框架,基于 Node.js,同样托管于 GitHub 之上。生态中拥有众多插件主题。你可以基于它快速生成一些静态页面。你可以使用别人的各种主题与插件,也可以自己定制开发想要的功能。

  • 为什么选择了Hexo而没有选择其他的?
      其他常用的博客框架还有 WordPressTypechoGhost 等,但这些往往都需要购置自己的服务器,而无法静态化地部署到 GitHub Pages 上。个人博客的话,用 Hexo 完全不需要去另外购买空间,不需要有虚拟主机或者云服务器,可以直接托管到 Github、coding、gitee 等托管平台,免费提供的空间就完全足够了,毕竟一篇写完的文章大小都是kb级别的。
      第二,因为 Hexo 是完全使用 markdown 文件写的博客(一种介于txt文本和Word文档之间的一种格式),后期备份和迁移非常方便。我的危机意识比较强,特别不放心那些空间商的数据库和空间的安全性,生怕某一天网站崩了就全没了。
      第三,Hexo 生成的属于静态网站,体积小,访问速度快,性能更优,而且纯静态的方便网站的 SEO (搜索引擎优化)。

  静态网站生成器还有 VuepressGatsby 等。但这些多是为了写文档而量身定制的,你也可以使用它们,但是相较 Hexo 的博客定位,它们关于博客的插件和主题以及解决办法会少得多。
  虽然Hexo 提供的功能 Hugo 几乎都有,(生成大量文件时,甚至比 Hexo 更快)不过它是基于 GO 语言。日后你想对自己的网站进行自定义,即便是 Hugo,你编写前端的交互仍旧需要使用 JavaScript,所以选择基于 JavaScript 的 Hexo 可以降低学习成本。(你若对 GO 有兴趣,仍然可以自己尝试使用 Hugo)
  所以对于新手来说,使用 Hexo 作为起始点,不失为一个好选择。(当然如果你有钱租服务器,并希望快速上手的话,就可以考虑考虑 WordPress 或者 Typecho)
——(云游君)

  • 为什么选择率先部署到 GitHub 而不是其他平台?
      GitHub是一个面向开源及私有软件项目的托管平台,也是世界上最大的代码托管平台,因为只支持Git作为唯一的版本库格式进行托管,故名GitHub。GitHub中文社区,是国内领先的开源社区,是一个可以发现优质开源项目的地方。(由于程序员大多是男性,GitHub又被戏谑地调侃成全球最大同性交友网站”Gayhub”,哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈……咳咳,说多了)
      Hexo 配合 GitHub 的 actions 或其他 CI/CD,比如 cycleci 等,能做到一键部署、发布。国内的代码托管平台比如 coding 和 gitee(码云)的服务可能没有GitHub全面,开源项目也少,也没有GitHub的社区归属感强,所以一般选择GitHub托管代码。(我不久之后可能也会选择 coding 或 gitee 啥的国内平台也同步备份和托管博客啥的了,因为GitHub服务器在国外,有时候访问我这个博客,那个网速啊真一言难尽……平时不卡的时候只能说还行吧)

前期准备

一、用GitHub创建仓库

1. 注册GitHub账号

(有账号的可跳过此步骤)
  虽然都是英文,但不必畏惧,也并不会造成使用障碍,只要记得最常用的选项含义即可,以及善用浏览器的网页翻译功能和手头的翻译软件。

注意:注册时的英文用户名将成为你可以使用的免费域名前缀。

注册GitHub账号.jpg

注册流程非常简单,这里不再赘述。

2. 创建一个新的项目

单击 右上角【+】- New Repository 新建项目(以下简称仓库),然后填写项目信息。
仓库的名字格式应为:你的用户名.github.io

为什么必须这个作为仓库名?
因为这是GitHub Pages 服务的命名规范,同时它也将成为你的专属域名。当然,你也可以购置自己的专属域名并用它来提供内容。

比如我的用户名是Barry-Flynn,那么我的仓库就叫:Barry-Flynn.github.io
(全部小写更好,有大写也没事,除了有时用大小写切换有一丢丢麻烦外,没有区别)

在description一栏填写简介,随便填填,比如我填的是:百里飞洋的个人空间

创建GitHub博客仓库.png

然后选择 Public。
最后可以选择勾选一下 Initialize the repository with a README。(其实无所谓,此步的作用是用不用生成一个类似仓库说明书的 README.md 文件)
完成后点击下面的 Create Repository。

二、安装 VS Code

  在安装Git之前,我建议先安装 VS Code 。因为安装 Git Bash 时,可以设置 VS Code 作为默认编辑器。Visual Studio Code,简称 VS Code。目前最为强大易用的编辑器,轻量且快速。(宇宙第一编辑器哈哈哈)

注意:它并不是我们常常听到的 VS,VS 常常指的是 Visual Studio,是一个功能强大的 IDE(集成开发环境),体积要比 VS Code 都要大上一个量级。

对于它的安装,直接官网下载就行了,免费的,不再赘述。

三、安装 Git

  Git 是一个开源的分布式版本控制系统,由 Linus Torvalds(同时也是 Linux 的作者)为了管理 Linux 开发而开发。类似的工具还有:SVN。但始终更推荐 Git,因为它功能更为强大且它的背后还有更强大的生态:GitHub。

  简而言之,是一个版本管理工具。譬如设计师设计好了第三版的海报,客户却说还是要第一版吧,这时便可以通过 Git 快速回退到最初的版本。
  你只需要把每次更改的状态(Git 会自动进行检测,你只要掌握基础的几条命令就可以了)告诉 Git,而不需要每个版本都保存一份压缩包,既方便也能大大节约空间。
  当然这主要只对代码文本起作用,因为 Git 的本质是记录各行代码的增减,倘若是像视频、海报这类二进制文件来说便体现不出丝毫优势了。当然想要应对这种场景还有 Git LFS
——(云游君)

你可以直接去官网下载Git并安装,如果国内网速太慢可以“科学上网”或者从“腾讯软件中心”等平台下载。MacOS 用户可以下载官网的安装包进行安装,也可以直接安装 App Store 的 Xcode(附带会安装 Git,但是比较大)。安装时一路next到底就行了,也可以在网上找教程,我不再多说。

四、安装 Node.js

  何为Node.js ? Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js是一个事件驱动I/O(计算机接口)服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。
  对的,第一次看到这个解释的时候其实我也很难理解,但不妨碍我们用它,想进一步了解的朋友们可以去官网浏览官方文档,或者看看下面这段其他博主的理解。

什么是 Node.js ?
  这得从什么是 JS 说起,JS 也就是 JavaScript。(为什么有种从盘古开天辟地开始的感觉)没错,JavaScript 就是网页的盘古。JavaScript 是一种编程语言,我们所见到的网页中的交互和逻辑处理几乎都是由 JavaScript 完成。JavaScript 语法简单,易学易用。(当然也请不要小瞧它,虽然它入门门槛低,但上限同样也很高。包括但不限于实现网站前后端,手机桌面应用程序,机器学习,计算机图形学等。)在 Node.js 诞生前,JavaScript 都运行于浏览器端。
  也就是说,它是鱼,浏览器是装满了水的水缸。2008 年,Chrome V8 诞生。2009 年,Node.js 诞生。并成为 GitHub 早期最著名的开源项目。GitHub 可能大家已有所了解,后续再说。
  Node.js 便是一个基于 Chrome V8 引擎的 JavaScript 运行环境。(当年第一次看到这句话时,我也一脸懵逼。)按照我的理解,JavaScript 是鱼,Chrome V8 就是抽水机,Node.js 则把这台抽水机也装在你电脑上。于是你的电脑也有了 Node.js 这个和浏览器相似的水缸,也可以在里面运行 JavaScript 了!当然 Node.js 和浏览器端还是因为自身定位和一些历史原因而有些许区别的,不再展开。
——(云游君)

建议下载长期支持版(LTS)而非当前发布版(因为如果是最新版,容易出现一些奇妙的 bug)。

全部默认下一步进行安装。然后,
Windows 用户打开命令提示符,即按住键盘 Win+R,输入 cmd 然后回车,弹出黑色代码窗口。(本文以 Windows10 为例)

MacOS 用户打开终端。
Linux 用户右上角关闭本标签页。

后续如提到输入命令,均默认指打开终端进行输入。

输入 node --version 回车,如果得到的版本号与你方才安装的一致,那么 Node.js 就已经成功安装。

Node.js 安装成功时也默认安装了 npm,在此后将会用到。
npm 是随 Node.js 一起被安装的包管理工具,你可以理解成 Node.js 自带的应用商店。

对了,国内使用 npm 可能很慢,你可以“科学的上网”,或者考虑切换为国内镜像源(比如淘宝镜像源),即手动输入以下内容后按回车(也可以Ctrl+C复制和Ctrl+V粘贴以下代码到命令窗口按回车):

1
npm config set registry https://registry.npm.taobao.org

(上面这行切换镜像源方法的代码我没用过,还不确定它的有效性,如果你会“科学的上网”的话不用管这种方法,不会的话可以输入这行命令试一下,没报错就OK,如果报错就自行搜索方法吧先,鄙人实在是不才)

五、安装Hexo

  这里是它的官网: Hexo
  这个是它的 中文官方文档 (建议收藏,用到了就多看看)
  这是它的GitHub项目链接: https://github.com/hexojs/hexo

如何安装Hexo呢?

在cmd终端窗口中输入以下命令后回车:

1
npm install hexo-cli -g

然后等待一会进度条走完,没报错就代表安装成功。
进度条卡住不动可能还是国内网络问题,“科学的上网”哦,咳咳….

如果安装失败,可能是没有权限,可以尝试头部加上 sudo 重新执行,即输入:

1
sudo npm install hexo-cli -g 

上面命令中,
install 自然是安装。
hexo-cli 则是 hexo 的终端工具,可以帮助你生成一些模版文件,之后再用到。
-g 代表的是全局安装。也就是在任何地方都可以使用,否则会只能在安装的目录下使用。

正式操作

六、初始化 Hexo 工程

  注意:接下来应该是你自己的自定义的目录,请不要完全复制粘贴我的!
比如说我是Windows用户,想把我的网站代码以后都储存在
电脑 E 盘的 BarryFlynn\Github\ 文件夹下
那么我要先在E盘建立相应的文件夹,然后再继续操作。
由于cmd终端最开始默认在C盘操作,我得先切换到E盘,那么我要输入 E: 然后回车,即我会看到:

1
2
3
4
5
6
Microsoft Windows [版本 10.0.19042.1165]
(c) Microsoft Corporation。保留所有权利。

C:\Users\10272>E:

E:\>

然后此时,我要通过 cd 命令进入我本地电脑打算存储网站代码的文件夹目录。(或者右键文件夹 Git Bash Here),即 BarryFlynn\Github\ 文件夹里

也就是说我需要输入 cd BarryFlynn\Github\ 然后回车,我会看到:

1
2
E:\>cd BarryFlynn\Github\
E:\BarryFlynn\Github>

好了成功进入,接下来输入下方代码,再按回车:

1
hexo init 你的名字.github.io

hexo :正是因为我们之前安装了 hexo-cli 这一个包,所以我们可以在终端中使用 hexo 这一命令。
init :用来初始化博客的模版文件。后面跟的是你要新建的文件夹,最好和你此前新建的仓库名一致,比如我的是: Barry-Flynn.github.io

然后我会看到

1
2
3
4
5
6
7
8
9
10
11
E:\BarryFlynn\Github>hexo init Barry-Flynn.github.io
INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
[32mINFO [39m Install dependencies
added 242 packages from 207 contributors in 105.871s

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

INFO Start blogging with Hexo!

E:\BarryFlynn\Github>

下面通过 cd 进入我的博客文件夹,

即输入 cd Barry-Flynn.github.io 后按回车,我会看到:

1
2
3
E:\BarryFlynn\Github>cd Barry-Flynn.github.io

E:\BarryFlynn\Github\Barry-Flynn.github.io>

现在我就是处于 E:\BarryFlynn\Github\Barry-Flynn.github.io 文件夹下操作了(你的博客源文件的文件夹当然可以跟我的路径不一致,放到你想放的地方就好,不过也需要参照我的方法用命令进入里面),

现在在这个文件夹内默认安装所有 package.json 文件中提到的包,
即输入 npm install 然后回车,我会看到:

1
2
3
4
5
6
7
8
9
10
11
12
13
E:\BarryFlynn\Github\Barry-Flynn.github.io>npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

audited 243 packages in 4.956s

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

found 0 vulnerabilities


E:\BarryFlynn\Github\Barry-Flynn.github.io>

这时候,我的 Barry-Flynn.github.io 文件夹里面会多出一堆文件,
文件夹结构应该大致是这样:

1
2
3
4
5
6
7
8
.
├── config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

现在我们输入 hexo server 然后回车,会看到:

1
2
3
4
E:\BarryFlynn\Github\Barry-Flynn.github.io>hexo server
INFO Validating config
INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

server 代表开启本地的 Hexo 服务器,这时你就可以打开浏览器,在地址栏中输入 localhost:4000 就可以看到本地的网页了。
hexo博客搭建成功页面.png

这个网页就是Hexo为你自动生成的博客页面。
Ctrl+C 中断服务器的运行,
系统提示 终止批处理操作吗(Y/N)? 输入 Y 然后回车。
至此,基础的模版页面便已经搭建好了。

七、生成静态文件

  到现在,我们的工作都是在本地进行,想必你也很想放到线上与小伙伴们分享。这便轮到了 GitHub Pages 的出场,不过 GitHub Pages 只支持纯静态文件。

所以我们需要使用下面一行命令先来生成站点的静态文件。

1
2
3
hexo generate

(上方命令也可以缩写为 hexo g)

输入后回车,我会看到:

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
E:\BarryFlynn\Github\Barry-Flynn.github.io>hexo g
INFO Validating config
INFO Start processing
INFO Files loaded in 209 ms
INFO Generated: archives/index.html
INFO Generated: archives/2021/index.html
INFO Generated: archives/2021/08/index.html
(node:20772) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:20772) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:20772) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:20772) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:20772) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:20772) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
INFO Generated: index.html
INFO Generated: fancybox/jquery.fancybox.min.css
INFO Generated: js/script.js
INFO Generated: 2021/08/25/hello-world/index.html
INFO Generated: css/style.css
INFO Generated: css/fonts/fontawesome-webfont.woff2
INFO Generated: css/fonts/fontawesome-webfont.woff
INFO Generated: fancybox/jquery.fancybox.min.js
INFO Generated: css/fonts/fontawesome-webfont.ttf
INFO Generated: css/fonts/FontAwesome.otf
INFO Generated: css/fonts/fontawesome-webfont.eot
INFO Generated: js/jquery-3.4.1.min.js
INFO Generated: css/images/banner.jpg
INFO Generated: css/fonts/fontawesome-webfont.svg
INFO 17 files generated in 1.98 s

E:\BarryFlynn\Github\Barry-Flynn.github.io>

此时我的文件夹目录下会出现 public 这个文件夹,里面存放的就是我的站点的静态文件。

八、与远程仓库建立关联

接下来我们将本地的仓库与此前在 GitHub 上建立的仓库建立关联。

输入 git init 初始化 Git 仓库,只需要执行一次即可,以后不用执行了,因为这是进行初始化,看到:

1
2
E:\BarryFlynn\Github\Barry-Flynn.github.io>git init
Initialized empty Git repository in E:/BarryFlynn/Github/Barry-Flynn.github.io/.git/

在将其部署到 GitHub Pages 上之前,我们最好先建立一个分支。

什么是分支?
Git 提供了版本管理功能,其中还有一个分支功能,你现在可以简单地将其理解为平行世界。比如,对同一个文件夹,切换到它的不同的分支会显示不同的文件内容。

你的名字.github.io 部署后,GitHub Pages 将默认使用你的 main分支(以前叫 master分支,一个意思,主要分支的意思)作为静态文件部署。所以我们最好新建一个 hexo 分支(命名无所谓)用来存储 Hexo 的源代码,master 分支则用来存储部署后的静态文件。为了方便,不想其他名字了,这个分支我就直接起名叫 hexo 吧。

新建该分支的命令语句是 git checkout -b hexo ,然后回车,可以看到:

1
2
3
4
E:\BarryFlynn\Github\Barry-Flynn.github.io>git checkout -b hexo
Switched to a new branch 'hexo'

E:\BarryFlynn\Github\Barry-Flynn.github.io>

这时便成功建立了一个 hexo 分支。(此后基本上所有的命令工作都将在 hexo 分支下进行)

你可以通过 git branch -v 来查看当前有哪些分支,使用 git checkout 分支名 来切换到对应的分支。
这是一位博主“云游君”的 Git 学习笔记

九、部署 main分支

为了更方便的将博客静态文件( main 分支)部署到 GitHub Pages 上,Hexo 提供了 hexo-deployer-git 插件。

老规矩,安装该插件,要输入下面命令,

1
npm install hexo-deployer-git

回车后可以看到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
E:\BarryFlynn\Github\Barry-Flynn.github.io>npm install hexo-deployer-git
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ hexo-deployer-git@3.0.0
added 1 package from 1 contributor and audited 244 packages in 8.166s

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

found 0 vulnerabilities


E:\BarryFlynn\Github\Barry-Flynn.github.io>

下面对 你的名字.github.io 文件夹下的 _config.yml 文件进行配置。

右键 _config.yml ,打开方式选VS Code(或者直接用VS Code打开该文件),

滑到最下面,把关于

1
2
3
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:' '

的这段代码补充为

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo: https://github.com/你的名字/你的名字.github.io #仓库地址
branch: main # 默认使用 master 分支(Github现在改名为main分支)
message: Update Hexo Static Content # 自定义的此次部署更新的说明

Ctrl+S保存代码,然后退出VS Code,部署!

终端里输入命令 hexo deploy 后(或者缩写为 hexo d )回车,我的电脑显示:

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
E:\BarryFlynn\Github\Barry-Flynn.github.io>hexo deploy
INFO Validating config
INFO Deploying: git
INFO Setting up Git deployment...
Initialized empty Git repository in E:/BarryFlynn/Github/Barry-Flynn.github.io/.deploy_git/.git/
Author identity unknown

*** Please tell me who you are.

Run

git config --global user.email "you@example.com"
git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

fatal: unable to auto-detect email address (got '10272@DESKTOP-N3PNS7C.(none)')
FATAL {
err: Error: Spawn failed
at ChildProcess.<anonymous> (E:\BarryFlynn\Github\Barry-Flynn.github.io\node_modules\hexo-util\lib\spawn.js:51:21) at ChildProcess.emit (events.js:400:28)
at ChildProcess.cp.emit (E:\BarryFlynn\Github\Barry-Flynn.github.io\node_modules\cross-spawn\lib\enoent.js:34:29)
at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12) {
code: 128
}
} Something's wrong. Maybe you can find the solution here: %s https://hexo.io/docs/troubleshooting.html

E:\BarryFlynn\Github\Barry-Flynn.github.io>

是的,部署出错(FATAL)了,“ Please tell me who you are.”

原来是创建git文件夹的时候信息不完善导致的,

它提示我需要运行(Run)下面两行程序,来设置我帐户的默认标识。

git config –global user.email “you@example.com
git config –global user.name “Your Name”

注意双引号前有空格,邮箱随便填也可以,比如QQ邮箱啥的,

我用的这个邮箱查找路径是:点击Github主页右上角头像,点击settings,点击Emails,然后就能找到Github的这个邮箱了

那么我分别输入这两个命令按回车,执行两次代码,可见下方:
(如果你们没有报错,可以忽略这个)

1
2
3
4
5
E:\BarryFlynn\Github\Barry-Flynn.github.io>git config --global user.email "Barry-Flynn@users.noreply.github.com"

E:\BarryFlynn\Github\Barry-Flynn.github.io>git config --global user.name "Barry Flynn"

E:\BarryFlynn\Github\Barry-Flynn.github.io>

再用命令 git config -l 查看所有的配置信息

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
E:\BarryFlynn\Github\Barry-Flynn.github.io>git config -l
diff.astextplain.textconv=astextplain
filter.lfs.clean=git-lfs clean -- %f
filter.lfs.smudge=git-lfs smudge -- %f
filter.lfs.process=git-lfs filter-process
filter.lfs.required=true
http.sslbackend=openssl
http.sslcainfo=E:/Git/mingw64/ssl/certs/ca-bundle.crt
core.autocrlf=true
core.fscache=true
core.symlinks=false
pull.rebase=false
credential.helper=manager-core
credential.https://dev.azure.com.usehttppath=true
init.defaultbranch=master
user.email=Barry-Flynn@users.noreply.github.com
user.name=Barry Flynn
core.repositoryformatversion=0
core.filemode=false
core.bare=false
core.logallrefupdates=true
core.symlinks=false
core.ignorecase=true

E:\BarryFlynn\Github\Barry-Flynn.github.io>

可以看见下面这两条信息,代表信息以及完善上去了

user.email=Barry-Flynn@users.noreply.github.com
user.name=Barry Flynn

那我就可以接着部署了!

终端里输入命令 hexo deploy 后(或者缩写为 hexo d )回车,这次,我的电脑却再次报错:
那一大坨的代码最底端为

1
2
3
4
5
6
7
8
9
10
11
fatal: unable to access 'https://github.com/Barry-Flynn/Barry-Flynn.github.io/': OpenSSL SSL_read: Connection was reset, errno 10054
FATAL {
err: Error: Spawn failed
at ChildProcess.<anonymous> (E:\BarryFlynn\Github\Barry-Flynn.github.io\node_modules\hexo-util\lib\spawn.js:51:21) at ChildProcess.emit (events.js:400:28)
at ChildProcess.cp.emit (E:\BarryFlynn\Github\Barry-Flynn.github.io\node_modules\cross-spawn\lib\enoent.js:34:29)
at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12) {
code: 128
}
} Something's wrong. Maybe you can find the solution here: %s https://hexo.io/docs/troubleshooting.html

E:\BarryFlynn\Github\Barry-Flynn.github.io>

我电脑怎么又报错了?我很晕。问了群里大佬,说可能是网络问题。好吧,秒懂,咳咳咳……差点忘了GitHub服务器在国外啊!

解决方法是多 hexo d 几次或者那个啥…咳咳…
我第三次输入命令 hexo deploy ,回车

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
E:\BarryFlynn\Github\Barry-Flynn.github.io>hexo deploy
INFO Validating config
INFO Deploying: git
INFO Clearing .deploy_git folder...
INFO Copying files from public folder...
INFO Copying files from extend dirs...
warning: LF will be replaced by CRLF in 2021/08/25/hello-world/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in archives/2021/08/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in archives/2021/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in archives/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in css/fonts/fontawesome-webfont.svg.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in css/style.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.min.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in js/jquery-3.4.1.min.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in js/script.js.
The file will have its original line endings in your working directory
On branch master
nothing to commit, working tree clean
info: please complete authentication in your browser...
Enumerating objects: 31, done.
Counting objects: 100% (31/31), done.
Delta compression using up to 4 threads
Compressing objects: 100% (25/25), done.
Writing objects: 100% (31/31), 882.21 KiB | 4.98 MiB/s, done.
Total 31 (delta 3), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (3/3), done.
To https://github.com/Barry-Flynn/Barry-Flynn.github.io
+ 4b62927...a9fc5f8 HEAD -> main (forced update)
Branch 'master' set up to track remote branch 'main' from 'https://github.com/Barry-Flynn/Barry-Flynn.github.io'.
[32mINFO [39m Deploy done: [35mgit[39m

E:\BarryFlynn\Github\Barry-Flynn.github.io>

成功了!Ohhhhhhhhhhh~

等待完成后,打开网址 https://你的名字.github.io ,稍等片刻不要着急,刷新一下就能看到你的线上网站了!

  • 建议使用 https,因为 http 可能无法正常打开。HTTPS 是多了安全加密的 HTTP,Chrome 浏览器已经默认会显示 http 链接为不安全。为了安全,建议开启强制 https 跳转。
    前往GitHub项目地址页面 -> Settings -> Options -> GitHub Pages -> Enforce HTTPS。(翻到下面)
    此时,http 网址会自动重定向到 https

——(云游君)

  • 但我根据这个去找了一些,我的GitHub Pages默认设置就是https,所以我不用管了。

十、备份 hexo 源代码分支

我们当前只是将生成的静态文件部署到了云端,准确的说只是将生成文件 存进了 GitHub 的 main(或叫master)分支。
为了以防万一,我们应该将网站的源代码(也就是 hexo分支 里的)源文件也推送到 GitHub 仓库的 hexo分支 进行备份。

输入下方代码按回车,与远程 Git 仓库建立连接,只此一次即可,以后无需输入

1
git remote add origin https://github.com/你的用户名/你的名字.github.io

但当时在这个时候我手抖了,这行代码后面那个仓库链接我还没输入完,输入了 https://github.com/Barry-Flynn 就按了回车。
查了一下,我需要运行输入 git remote rm origin 删除远程地址,然后再输入一遍正确的命令与远程 Git 仓库建立连接就行了:
(你们不用执行这一步哦,我是因为输错地址导致绑定错了)

1
2
3
E:\BarryFlynn\Github\Barry-Flynn.github.io>git remote rm origin

E:\BarryFlynn\Github\Barry-Flynn.github.io>git remote add origin https://github.com/Barry-Flynn/Barry-Flynn.github.io

好了,接下来大家准备提交,
第一次提交时,你可能需先运行下面命令设置一下默认提交分支,以后不用再输入这个了

1
git push --set-upstream origin hexo

将网站的源代码(也就是 hexo分支 里的)源文件也推送到 GitHub 仓库的 hexo分支 进行备份的三行命令是
(括号内为注释,不用输入哈!)

1
2
3
4
5
6
7
8
(添加到缓存区)
git add -A

(这次做了什么更改,简单描述下即可)
git commit -m "你的更新描述"

(推送至远程仓库)
git push

最后那句命令如果push不上去的话多试几次,或者“科学的上网”,你懂得。

十一、打开网址查看效果

如果与之前本地预览时一样,就代表成功了。
hexo博客搭建成功页面.png






恭喜你有自己博客啦!
下篇文章我会讲讲怎么创作和更换好看的博客主题
THE END.

嘿咻~终于写完了 快累死我了 ,很开心!
看到这篇文章写了八千三百多字我也很惊讶,如果能对你有一些帮助,可以根据心情在文章末尾进行小小的打赏支持啊,一分一毛一块也是爱。[真诚.jpg]
另外,我可能后续还会更新相关文章,确定不收藏我的博客网站吗?[乖巧.jpg]
哈哈好啦,感谢能够读到这里的你,祝你学习进步、生活愉快,我们有缘再见(或许吧)!See you!

本篇文章为 百里飞洋丨Barry Flynn 版权所有,
转载与分享请务必携带原文链接:https://blog.meta-code.top/2021/09/15/2021-1/
侵权必究!!!

参考文章

感谢下方作者提供技术参考:
1、《教你如何从零开始搭建一个属于自己的网站》
-作者云游君 - 地址https://www.yunyoujun.cn/share/how-to-build-your-site/
2、《手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo》
-作者CodeSheep - 哔哩哔哩https://www.bilibili.com/video/BV1Yb411a7ty/
3、《基于 Github Action 的 CI/CD 流程》
-作者Feng Nie - 知乎https://zhuanlan.zhihu.com/p/250534172


我的陌生知识点积累

  • SEO(Search Engine Optimization):汉译为搜索引擎优化。是一种方式:利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位,获得品牌收益。很大程度上是网站经营者的一种商业行为,将自己或自己公司的排名前移。

  • Github Actions:是由Github创建推出的持续集成 (Con­tin­u­ous in­te­gra­tion,简称 CI) 服务。 它提供了配置非常不错的虚拟服务器环境,目的是使所有软件开发工作流程的自动化变得容易,可直接从GitHub构建,测试、打包和部署项目代码。CI(持续集成)由很多操作组成,比如代码合并、运行测试、登录远程服务器,发布到第三方服务等等。Github Actions 的最大优势就是它是与 GitHub 高度整合的,只需一个配置文件即可自动开启服务。甚至你不需要购买服务器,因为 GitHub Actions 自带云环境运行,包括私有仓库也可以享用,而且云环境性能也非常不错。持续集成的目的,就是让产品可以快速迭代,同时还能保持高质量。它的核心措施是,代码集成到主干之前,必须通过自动化测试。只要有一个测试用例失败,就不能集成。

  • 持续集成指的是,频繁地(一天多次)将代码集成到主干。 它的好处主要有两个:
    (1)快速发现错误。每完成一点更新,就集成到主干,可以快速发现错误,定位错误也比较容易。
    (2)防止分支大幅偏离主干。如果不是经常集成,主干又在不断更新,会导致以后集成的难度变大,甚至难以集成。

  • 持续交付(Continuous delivery)指的是,频繁地将软件的新版本,交付给质量团队或者用户,以供评审。如果评审通过,代码就进入生产阶段。 持续交付可以看作持续集成的下一步。它强调的是,不管怎么更新,软件是随时随地可以交付的。

  • 持续部署(Continuous deployment,简称CD)是持续交付的下一步,指的是代码通过评审以后,自动部署到生产环境。持续部署的目标是,代码在任何时刻都是可部署的,可以进入生产阶段。