Sherroe's Blog

使用GitHub与Hexo搭建个人博客

字数统计: 2.9k阅读时长: 10 min
2022/03/17

其实网上的教程非常之多。随便搜一搜就有各种大佬手把手教你如何用鼠标点击Next按钮以及如何用键盘把字母敲到屏幕上去。

比如说——

【超详细】Hexo博客的安装与本地配置

【2021最新版】保姆级Hexo+github搭建个人博客

这两篇教程也是我搭建博客时的参考,非常细致。如果是想自己搭建的话可以优先看看他们,或是自己在搜索引擎上寻找其他教程。

所以,这篇文章相比起教程,更多是展示一下我这个小小的博客是如何建立的。

[TOC]


准备工作

整个过程其实非常简单。用某位神说的话就是:“只要你会新建文件夹就可以了。”——大抵确实是这样的。但对于真正的小白来说,还是需要先知道一下如何使用命令行以及修改配置文件——当然这些依旧都是很简单的操作。

本项目基于Windows10操作系统,Win11狗都不用。

你需要:

  • 一台电脑。
  • 一个稳定的网络。如果有必要,可能需要科学上网。
  • 一些时间。
  • 一颗恒心。

在GitHub上新建仓库

一切之一切的开始,便是你需要拥有一个GitHub账号。点击链接进入GitHub官网。

正如大多数网站的注册新账号一样,输入邮箱、密码、接收验证码等工序以后,你便可以自由查看成千上万个程序员的开源代码了。唯一不同的可能只是GitHub是全英文界面——但你还有google提供的网页翻译,不是吗?

请不要告诉我你在使用360浏览器。

如果实在不想欣赏那蹩脚的机器翻译,那么只需要记住:sign up 是注册,sign in 是登陆。

请牢记你的注册邮箱、账户名以及登陆密码。

然后就可以点击 Your repositories 来新建仓库了。

image-20220317163919690

右上角的新建按钮上边写着 New,并且是绿色的,非常显眼。

image-20220317164810464

在 Repository name 一栏填入:

1
你的用户名.github.io

这个格式是固定的。例如我的用户名是sherroe,那么我就需要填入“sherroe.github.io”。

下方的 Add a README file 一栏可以勾选,填写说明文档是一个开发者的良好习惯,这和写满清晰注释的代码一样令人喜爱。

image-20220317130818191

然后就可以继续点击绿色按钮了。当你不知道该做什么的时候,点击绿色或蓝色或其他什么明显强调的按钮总是成功率比较大的做法。

建好仓库后,你就可以通过 “你的用户名.github.io” 这个链接来访问你的博客页面了。但这里目前什么都没有——大概只会写着GitHub提供的一些说明性文字,这些内容无需在意。

当然也可以看一下Markdown的语法规则,你写文章的时候总会用到。

准备安装Hexo所需的工具

这时可以查看Hexo的官方文档:文档 | Hexo。官方文档的描述非常清晰,并且考虑了各种情况。当然这会略显繁琐——那么只需要跟着下面的步骤来操作就可以了。

首先需要安装两个工具,他们分别是:

首先是Node.js

image-20220317133635669

右边的绿色按钮是最新版本的程序,但是左边的绿色按钮写了适合大多数用户——那么明显点击左边的按钮是更明智的做法。

下载好之后一直点击next按钮便可以了。中间如果遇到安装路径的话最好自己手动改一下。

接下来是Git

image-20220317134316721

这里的按钮好多。但你不用顾虑太多,点击第一个 Click here 便可以了。它都明明白白写着让你点击它自己了,为什么不呢?

同样是下载好之后一路next,自定义一下安装路径便完成了。

检查安装

使用 Win+R 组合键打开运行框,输入“cmd”打开命令提示符。然后键入如下命令,并按下enter键。

注意该有的空格不能丢。在你键入任何命令、代码时都是如此。

1
node -v
1
npm -v
1
git --version

如果屏幕上显示出了正确的版本号,说明安装成功了。


安装Hexo

安装及初始化

继续在命令行中操作。键入如下命令,并按下enter键。

1
npm install -g hexo-cli

等待安装即可。如果没有错误提示(error),那多半是安装好了。

为什么是“多半”呢?因为你的电脑或者你家的网络总是有可能出岔子,然后你还不知道问题在哪里,或者不知道该怎么解决——这便是计算机程序。

保险起见,和上边一样,最好通过检查版本号来看看是否安装成功。

1
hexo -v

接下来,你可以在一个喜欢的地方新建一个文件夹用以存储你建立博客的各种文件。你可以命名为“blog”,或者“hexo_blog”,或者其他什么喜欢的名字。

尽量不要在文件路径中出现中文——这同样是一个合格开发者的好习惯。

在你建好的文件夹中单击右键,可以看到右键菜单中多出了两个按钮:

image-20220317150059894

点击Git Bash Here,便可以进入 git bash 命令行。

image-20220317165522346

然后键入命令以初始化hexo:

1
hexo init

等待出现 “Start blogging with Hexo!” 即可。

如果出现了错误提示(“Error” 甚至 “Fatal”)——请自行翻译错误提示语句,相信你能看懂。如果是连接超时等网络问题,可以反复多尝试几次。

实在不知道怎么办的话,复制这些句子去搜索引擎自行查询。通常很快就能找到问题所在和解决办法。

注意:此界面无法使用 Ctrl+C 或 Ctrl+V 等Windows快捷键,请乖乖使用鼠标右键进行复制粘贴操作。

本地部署

初始化成功后,继续在 git bash 命令行中键入命令:

1
hexo g

这样就可以生成页面了,这个命令之后会经常用到。

继续键入命令:

1
hexo s                                     

这是为了在本地查看生成的页面。

image-20220317155853177

不要关闭命令行窗口,不要在窗口内进行其他操作。

太棒了——操作了这么久,终于可以看一眼你的博客是什么样了——

在浏览器中输入localhost:4000(浏览器会自动为你补全为 http://localhost:4000/)

你会看到hexo的默认模板所创作出的页面,里边会写着 Hello World 与 Quick Start.

但目前来说,这个页面只能在你的本地查看,接下来我们要把他发布到网络上去。

正如屏幕上显示的那样,你在命令行窗口中按下 Ctrl+C 便可以关闭本地服务器。

所以冷静一下,不要让你的肌肉记忆控制你使用 Ctrl+C 来尝试复制。


SSH Keys

在 git bash 命令行中键入命令:

1
ssh

这是为了检查你的电脑是否安装了ssh,一般都是没问题的。

继续键入命令:

1
ssh-keygen -t rsa -C "邮件地址"

这里的邮件地址就是你注册GitHub的邮箱。我相信你不会傻乎乎地把“邮件地址”这四个汉字敲进命令行里。

键入这个命令后需要多按几次enter键,直到命令执行结束。

标志便是出现那个 ‘$’ 符号,此时你才能键入下一个命令。

随后在文件管理器中进入以下目录:

1
C:\Users\用户名\.ssh

找到一个叫做 id_rsa.pub 的文件,使用 vs code 或记事本打开它。

里边会有一大串代码。全选,然后复制。

此时可放心使用 Ctrl+A 与 Ctrl+C

登陆GitHub,在网站右上角找到settings:

image-20220317163955165

然后找到 SSH and GPG keys:

image-20220317164517658

你猜猜接下来该干什么了?

……

——当然是点击绿色的 New SSH Keys 按钮。

image-20220317165824699

“当你不知道该做什么的时候,点击绿色或蓝色或其他什么明显强调的按钮总是成功率比较大的做法。”——鱼籽sherroe

把你刚刚复制好的代码粘贴到Key里边。Title可以自己随便起个名字。

image-20220317165718882

你问我然后呢?

看见绿色按钮了吗?点它。

最后再回到 git bash 命令行,键入命令:

1
ssh -T git@github.com

屏幕中会出现 “yes/no?” ,此时键入yes,并按下enter.

成功的话,它会亲切地对你说:

image-20220317170911076


将博客发布到互联网

修改配置文件

在你之前创建的文件夹中找到并打开 _config.yml 文件——就是我们通常所说的配置文件。便可以略微自定义一下你的博客页面了。

推荐在你的电脑上安装vs code,并用它来打开配置文件。

实在偷懒的话,可以右键选择用记事本打开文件。

image-20220317154636751

这里可以自定义网站标题、署名等各种东西,具体如何操作请查询hexo官方文档:配置 | Hexo

冒号后一定要加一个空格。

不要使用中文标点符号。

如果想输入中文,请先将文件以 UTF-8 编码保存。

上边的大部分内容随便改改或者保持默认就可以了,下方才是重点:

找到deploy,把它下边的几行代码改成这个样子:

1
2
3
4
deploy:
type: git
repo: https://github.com/用户名/用户名.github.io.git
branch: main

用户名就是你的GitHub用户名,当然那一串链接也可以直接在GitHub的仓库里复制:

也最好是直接在这里复制,免得你自己打错了。

image-20220317172847803

网上许多几年前的教程中branch那一栏填入的是master,但自从GitHub更新后必须填入main.

部署发布

进入 git bash 命令行,键入命令:

1
npm install hexo-deployer-git --save

这样便可以安装一个自动部署发布工具。

不成功就多试几次。

键入命令:

1
hexo g

之前提到过,这样可以生成页面。

键入命令:

1
hexo d

这时可能要多等一会,并且很可能报错。多尝试几次,或者更换网络。

如果成功的话,会弹出一个窗口让你登陆GitHub,可以选择直接通过浏览器登陆(在浏览器已经登陆了你的GitHub账号的情况下)或者通过输入用户名和密码来进行登陆。

这里密码不是你的登陆密码,而是需要你在GitHub的 Settings/Developer settings/Personal access tokens 中生成一个令牌。

那为什么不直接通过浏览器验证登陆呢?反正是自己的电脑。

成功登陆后,你会看到你的GitHub的仓库更新了文件。此时终于可以通过这个链接来访问你创建的博客了。

1
你的用户名.github.io

未完待续……

至此,所有人都可以在互联网上访问你的博客网站了,但运营博客的工作还未开始。关于如何发布新的博客、更换页面主题、自定义域名等等内容之后有空再详细写吧。

CATALOG
  1. 1. 准备工作
  2. 2. 在GitHub上新建仓库
  3. 3. 准备安装Hexo所需的工具
    1. 3.1. 首先是Node.js
    2. 3.2. 接下来是Git
    3. 3.3. 检查安装
  4. 4. 安装Hexo
    1. 4.1. 安装及初始化
    2. 4.2. 本地部署
  5. 5. SSH Keys
  6. 6. 将博客发布到互联网
    1. 6.1. 修改配置文件
    2. 6.2. 部署发布
  7. 7. 未完待续……