通过Github Pages+Hexo搭建博客教程

废话不多说，直接上教程：

一：环境和工具准备：
1.系统：Windows10
2.Node js
3.Git
4.hexo
5.文本编辑器（这里推荐Sublime Text）
一个Github账号

二.Node js的安装：
1.打开Node官网，下载Node js安装程序，下载地址：https://nodejs.org/en/download/
2.下载后安装，安装目录尽量默认，除非你对它非常了解。
3.安装完成后，检查是否安装成功。键盘按下Win+R键，打开cmd窗口，输入：node -v，看到了
版本信息，代表安装成功。
4.修改下载源。npm下载各种模块，默认是从国外的服务器下载，速度较慢，把它换成国内镜像，打开cmd窗口，运行命令：npm config set registry https://registry.npm.taobao.org

三.安装Git：
1.进入官网：https://git-scm.com/downloads ，由于官网下载太慢可以通过淘宝的开源镜像下载网址：https://registry.npmmirror.com/binary.html?path=git-for-windows/v2.36.1.windows.1/
2.下载后傻瓜式安装即可，安装目录可以默认，可以自选。
3.在桌面右键，出现Open Git Bash here即代表安装成功。

四.安装Hexo：
1.右键Git Bash输入如下命令安装：npm install -g hexo-cli
2.安装完后输入hexo -v验证，出现版本号即代表成功。

五.Github与仓库的创建
1.进入官网：https://github.com/
2.点击右上角Sign up进行注册：
3.填写自己的邮箱、密码、用户名等信息，然后用邮箱验证即可完成。
4.注册完成后，点击右上角+按钮，选择New repository，创建一个名称为用户名.github.io
的仓库。

注意：1.名称必须为你的用户名.github.io,不然会404
2.Description：为描述仓库。（选填）
3.勾选 Initialize this repository with a README 初始化一个 README.md文件。
4.点击 Creat repository 进行创建。

六.环境配置：
1.配置用户名和邮箱：
git config --global user.name "你的用户名" git config --global user.email "你的邮箱"
2.通过 git config -l检查是否配置成功，现在git安装及配置全部完成。

七.连接至Github：
1.执行以下命令生成ssh公钥，它用于你的计算机连接Github。
ssh-keygen -t rsa -C "你的邮箱"

生成之后打开C盘用户文件夹下的.ssh文件夹，有一个名为id_rsa.pub的文件，用记事本打开
复制里面所有内容，然后开始在github中配置ssh密钥。

2.将 SSH KEY 配置到 GitHub
进入Github，点击右上角头像，选择settings，进入设置后选择 SSH and GPG keys，
名字尽量写英文的，把刚才复制的公钥填到 Key 那一栏。完成后保存。

3.测试连接，输入以下命令：
ssh -T git@github.com
出现连接到账户的提示信息，说明大功告成，现在完成了环境准备工作。

八.初始化Hexo项目
1.在你想放博客文件的路径打开GBH，执行下列命令初始化项目。（把blog后面的东西删掉）
hexo init blog(项目名)
2.进入blog文件夹，再次右键GBH，输入 npm i安装相关依赖。

3.安装完成后，blog文件夹内有如下结构：
【node_modules】：依赖包
【scaffolds】：生成文章的一些模板
【source】：用来存放你的文章
【themes】：主题
【.npmignore】：发布时忽略的文件（可忽略）
【_config.landscape.yml】：主题的配置文件
【config.yml】：博客的配置文件
【package.json】：项目名称、描述、版本、运行和开发等信息

4.输入hexo s启动项目

5.打开浏览器，输入他给出的链接：http://localhost:4000/
看到如下效果代表博客构建成功。
！博客

九.更换主题（这里我以我使用的Fluid主题为例）
注：以下步骤摘自Fluid官网：https://github.com/fluid-dev/hexo-theme-fluid
1.安装主题
进入博客文件夹执行以下命令安装主题：
`npm install --save hexo-theme-fluid`
然后在博客目录下创建 _config.fluid.yml，将主题的 _config.yml 内容复制进去。
下载链接：https://github.com/fluid-dev/hexo-theme-fluid/blob/master/_config.yml
(进不去的挂魔法)
2.指定主题
`theme: fluid # 指定主题 language: zh-CN # 指定语言，会影响主题显示的语言，按需修改`
3.创建「关于页」：输入如下命令：
hexo new page about
创建成功后，编辑博客目录下 /source/about/index.md，添加 layout 属性。
修改完成后的文件示例如下：
`

title: about
date: 2024-01-28 15:20:33
layout: about

这里写关于页的正文，支持 Markdown, HTML
`
本地启动项目:
输入命令：hexo g -d
hexo s

浏览器输入：http://localhost:4000，
即可看到Fluid主题页面

十.页面个性化

浏览器tab页名称
修改根目录下 _config.yml 中的 title 字段。
subtitle为副标题
description不用填写
keywords关键词，可不填写
author博客所有者
language语言，中国大陆使用zh-CN
timezone不用填写

2.博客导航栏左侧文字
blog目录下_config.fluid.yml中的blog_title 字段。

3.首页正中间的文字
blog目录下_config.fluid.yml中的text字段。

如果想使用一言，需打开主题的打字机功能，修改好后如下所示

一些好玩的功能

Some fun features

fun_features:

为 subtitle 添加打字机效果

Typing animation for subtitle

typing:
enable: true

然后添加一言，修改好后如下所示：

`
# 通过 API 接口作为首页副标题的内容，必须返回的是 JSON 格式，如果请求失败则按 text 字段显示，该功能必须先开启 typing 打字机功能
# Subtitle of the homepage through the API, must be returned a JSON. If the request fails, it will be displayed in `text` value. This feature must first enable the typing animation
api:
  enable: true

  # 请求地址
  # Request url
  url: "https://v1.hitokoto.cn/"

  # 请求方法
  # Request method
  # Available: GET | POST | PUT
  method: "GET"

  # 请求头
  # Request headers
  headers: {}

  # 从请求结果获取字符串的取值字段，最终必须是一个字符串，例如返回结果为 {"data": {"author": "fluid", "content": "An elegant theme"}}, 则取值字段为 ['data', 'content']；如果返回是列表则自动选择第一项
  # The value field of the string obtained from the response. For example, the response content is {"data": {"author": "fluid", "content": "An elegant theme"}}, the expected `keys: ['data','content']`; if the return is a list, the first item is automatically selected
  keys: ["hitokoto"]
`

至此，一言添加完毕。

十一.将静态博客挂载到Github Pages
方法一：
1.安装 hexo-deployer-git，输入以下命令：
npm install hexo-deployer-git --save
2.修改根目录下的 _config.yml，配置 GitHub 相关信息

deploy:
type: git
repository: https://github.com/XXX/XXX.github.io.git
branch: main
token: XXXXXXXXXXXXX

repository获取方式为：
进入https://github.com/,
点击右上角三条杠，点击你新建的用户名.github.io的仓库
点击中间那个绿色的Code按钮，选择左边的 Local 下面三个选项里选SSH,复制那个链接即可

其中 token 为 GitHub 的 Personal access tokens，获取方式如下图：
token只会出现一次，复制下来妥善保存，如果丢失，则要重新生成。

！token

部署到Github：
先输入hexo clean清除缓存
再输入命令hexo g -d
部署完成后等待两分钟，浏览器访问：https://你的GitHub用户名.github.io
能正常访问即部署成功。
方法二：直接将blog文件夹内 public 目录中的文件和目录推送至 GitHub 仓库和分支中。（不推荐）

十二.连接不到Github的解决方法：

注意：当你在与Github进行ssh通信时候出现超时或者是连接被关闭的情况，可以尝试以下解决方案。

1.挂代理和换网络
2.开源项目Github520
通过修改Host文件的方法解决访问速度慢的问题（地址：https://github.com/521xueweihan/GitHub520）
3.连接有效性检验：ssh -T git@github.com

结语：到这里，使用Github Pages+Hexo搭建博客的教程结束，明天更新主题的优化和改造，有什么不懂的可以在下面留言，回复的话应该到明天了，明天见！

#Hexo博客教程

通过Github Pages+Hexo搭建博客教程

http://example.com/2024/01/28/Pages-Hexo搭建博客教程/

作者

图酱的老粉

发布于

2024年1月28日

更新于

2024年6月23日

许可协议

Workers and Pages搭建各种项目（更新中》》》）上一篇

我的第一篇文章下一篇

通过Github Pages+Hexo搭建博客教程

title: aboutdate: 2024-01-28 15:20:33layout: about

一些好玩的功能

Some fun features

为 subtitle 添加打字机效果

Typing animation for subtitle

title: about
date: 2024-01-28 15:20:33
layout: about