请注意,本文任何内容都只适用于 Windows 10 系统,其他系统不适用。

前言

搭建方式

使用 GitHub Pages 来搭建 Hexo 静态博客网站,其优点是完全免费,虽然搭建过程中有点折腾,但搭建完成后基本不用担心维护的事,本文就详细介绍下如何使用 Hexo + GitHub 搭建免费个人博客网站的教程。

什么是 GitHub Pages?

GitHub Pages 是 GitHub 提供的一项服务,允许用户免费托管静态网站或个人项目页面。它基于 Git 版本控制系统,使得用户能够直接从代码仓库中生成和发布网页内容。通过 GitHub Pages,用户可以将自己的项目展示给他人,无需自己购买服务器或域名,非常适合个人网站、项目文档、博客等使用。

——来自 ChatGPT

具体可看官网介绍,可用翻译插件看一下,打不开可以用steam++,具体使用看下文:About GitHub Pages

什么是 Hexo?

Hexo 是一个基于 Node.js 的博客框架,支持 Markdown、一键部署和插件扩展。Hexo 提供了 406 个美观、强大、可定制的主题,让你轻松创建自己的博客。

——来自官网介绍

准备工作

安装 Node.js

点我下载 Node.js,如图:

Node.js下载页面

下载完成后打开,然后一路点 next,最后点 Finish

安装 Git

点我下载 Git,下载速度可能特别慢,耐心等待。如图:

Git 下载界面

安装过程和 Node.js 一样,此处不再重复。

创建博客

安装 Hexo

新建存放博客的文件夹,然后在此文件夹中右键,点击Open Git Bash here,意为打开 Bash ,如图:

请注意,除此以外,下文中所有运行命令的方法都是这样操作的,除了判断成功的方式。
该方法只在这里介绍一次,以后不再重复。

然后在此页面中输入以下命令以安装Hexo:(直接复制粘贴,粘贴时在此窗口点击右键,点击 Paste

具体操作如下图:

1
npm install -g hexo-cli

1

2

然后回车(点击键盘上的Enter)运行即可。如出现错误,请自行上网查询查找解决方法(可以去CSDN搜,那里比较靠谱),每个人的问题不一样。

运行后出现类似于这样的页面就安装成功了:

配置淘宝镜像源

由于众所周知的原因,使用 npm 访问一些资源时有时会遇到拒绝访问的情况。要解决这个问题,我们可以使用国内的淘宝镜像源。

直接运行此命令:

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

Hexo 初始化

继续在此窗口操作,运行这条命令:

1
hexo init

若运行结果的每一行均以’INFO’开头,则表明初始化完成。

安装 npm

继续在此窗口操作,运行这条命令:

1
npm install

博客预览

最后,运行这条命令,如果像下图一样没有报错,就可以在本地访问你的博客了,在浏览器输入http://localhost4000/以预览博客,按 Ctrl + C 停止预览:

1
hexo s

可能你会感觉这个博客太简陋了,别急,一步一步来。

博客部署

我们先把博客部署到 Github上,之后再讲美化。

刚才你访问的博客只能在本地访问自己看到,还无法联网让其他人看到,现在我们就把博客部署(可以理解为上传)到 GitHub 上让其他人看到。

准备工作

下载 Watt Toolkit(原名 Steam++ )

能访问GitHub的可忽略此小节,不能访问的往下看。

既然搭建方式是使用 Github Pages 来搭建,那就必须能访问 Github,但是,部分地区可能会遇到不能访问 Github 的情况,本节的撰写就是为了帮助不能访问 Github 的人能正常访问 Github。

点我去官网下载,如有问题可点我去官网查看常见问题及解决方案。

下载安装完成后,打开它,点击左侧第二个闪电图标“网络加速”选项,滚轮往下滑找到并勾选 GitHub 选项,点击右上角 “一键加速”,就可以访问 GitHub 了。

如图:

Steam++ 页面

安装hexo-deployer-git插件

不要忽略此小节!!!

这样才可以用命令把博客部署到 Github 上。

1
npm install hexo-deployer-git --save

注册 Github 账户

不能访问 GitHub 的,和本文2.1一样,并且在2.1的基础上多打一个“国外验证码平台”的勾,因为在注册 Github 时,需要完成人机验证,而人机验证有时可能加载不出来,所以要勾上这个。

进入 Github 页面,点击右上角的Sign-up

Github 注册

然后根据网页指引,填写你的邮箱,设置密码,剩下的怎么填都无所谓,但有一点要注意,你的 Github 用户名直接与你的域名挂钩!当博客成功部署到 Github上时,会给你一个“XXXX.github.io“域名,其中的XXXX就是你的 Github 用户名!

创建“仓库”

登录后,点击左边的绿色按钮create repository,如果你已经有仓库了,就点绿色按钮new

这里要注意,仓库名字(Repository name)和用户名(Owner)必须一摸一样!且必须写成XXX.github.io样式,类型必须选择Public(我这里已经建好了,才会出现报错)如下图:

创建“仓库”注意事项

完成后在页面最低端点击绿色按钮Create repository,这样仓库就建好了。

将 Github 仓库和本地文件关联起来

完成后,点击按钮ssh,复制 SSH :

有点差别,但是都一样。

按照下列格式粘贴到博客站点配置文件你的博客文件夹/_config.yml中,具体格式为:

1
2
3
4
deploy:
type: git
repo: your ssh
branch: main

请注意,要把 repo 后面的“your ssh”更改为你刚才复制的 ssh!!!

原版

直接改

接下来,开始建立联系,运行下列命令,一个一个来执行

请注意,要把下面的 “your Github name” 和 “your Github email“ (不包括引号)分别改成你自己的 Github 用户名和注册 Github 时所用的邮箱!!!

1
git config --global user.name "your Github name"
1
git config --global user.email "your Github email"

创建 SSH

还有个问题,虽然这样可以把博客部署到 Github 上了,但是每次部署都需要输入你的 GitHub 账户的密码,否则就不能上传。想解决这个问题,就创建 SSH(别问这是什么,照做就行)。

新建 SSH key在cmd中输入如下命令,注意大小写

请注意,要把下面的 “your email” (不包括引号)改成你注册 Github 时所用的邮箱!!!

1
ssh-keygen -t rsa -C "your Email"

然后出现:

1
2
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/电脑名/.ssh/id_rsa):

这一步告诉你生成的 SSH 在哪里,下文中会用到,直接回车即可。

然后出现:

1
2
Enter passphrase (empty for no passphrase):
Enter same passphrase again:

这一步是要求你设置密码,这个密码会在部署博客到 Github 时(运行hexo d时)使用,可以直接回车,意为不设置密码。

然后出现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
BASH
Your identification has been saved in /c/Users/电脑名/.ssh/id_rsa.
Your public key has been saved in /c/Users/电脑名/.ssh/id_rsa.pub.
The key fingerprint is:
65:69:······02:4b emailname@email.com
The key's randomart image is:
+--[ RSA 2048]----+
| |
| . o . |
| . o o = o |
| . o * = o |
| E o + o . |
| . o. . . |
| .. |
+-----------------+

意为密钥成功生成,关闭窗口。

在 Github 上添加 SSH key

打开本地文件:id_rsa.pub(位置已在“创建 SSH”小节中介绍),直接打开复制。

然后登录 GitHub,点击右上角的头像——Settings——SSH and GPG keys,具体流程见下图:

1

2

3

4

将刚才复制的内容粘贴在key文本框里,title可以不填。

测试

在 cmd 运行此命令:

1
ssh -T git@github.com

如果提示:

1
Are you sure you want to continue connecting (yes/no)?

输入 yes 并回车。

像下图这样即为成功:

部署

然后就可以部署你的博客到 github 了,在 bash 运行此命令:

1
hexo cl && hexo g && hexo d

类似于图中这样的即为成功:

至此恭喜你,你已经有了一个简单的博客!接下来我将会介绍如何美化你自己的博客。

至此第一章结束,有什么问题也可以在评论区留言。当然,最好还是先上网查询解决方法,因为这是解决问题最快的方式,如果本文哪些地方有问题,欢迎指出。