一些”原理”

做一件事知道了原理再去做，常常会让我们的方向更加明晰。所以，在开头处先来分享一点我个人对搭建博客的理解。这里使用的是Hexo这种生成博客页面的工具。首先，我们通过Github建立一个仓库的博客，里面存放着我们博客中的内容，然后通过Git将本地的一个存放着博客中的原始数据的文件夹与Github中的那个仓库链接起来，接着通过Hexo这个工具把我们编写的博客内容和一些配置文件转化为博客网页中的实际数据和代码存放在Github的仓库中，最终实现对博客网站内容的编辑。(仅为个人主观理解的想法，可能不太准确)

准备工作

已知了前面的”原理”，我们不难发现要准备的无非是三样东西：Github Git Hexo，那么我们要做的准备工作也就很明晰了

注册Github 账号

可在Github官网按照引导完成注册

下载Git

可点击此处的链接前往官网下载Git

配置Hexo

Hexo的实现基于Node.js，所以需要下载。可点击此处的链接前往官网下载安装包，按照自己电脑的系统选择合适的安装包下载并进行安装即可

可用如下命令查看自己安装后Node的版本以确认是否成功安装

1
node -v

安装Node的同时也安装了npm，它也是后面使用Hexo不可或缺的。可用如下命令查看自己安装后npm的版本以确认是否成功安装

1
npm -v

这些工作完成后即可安装Hexo，由于安装时对文件夹的权限要求比较高，所以需要以管理员身份运行终端并输入以下指令(如果不使用管理员身份，则需要修改多个文件夹的权限，很麻烦)以完成安装

1
npm install -g hexo-cli

可用如下命令查看自己安装后Hexo的版本以确认是否成功安装

1
hexo -v

创建仓库

登录GitHub后点击右上角的头像，在弹出的侧栏选项中点击Your repositories打开仓库页面

接着点击绿色的new进入创建仓库界面，填写仓库名时必须命名为<你的用户名>.github.io，然后点击最下方绿色的Create repository进行创建

然后给仓库新建一个名为index.html的文件，将其内容编辑为形如下面的内容：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>hanafuda_store</title>  
</head>  
<body>  
    <h1>hanafuda_store的个人主页</h1>  
    <h1>Hello ~</h1>  
</body>  
</html>

然后网站便创造成功了，可在浏览器中输入网址<你的用户名>.github.io进行查看
效果示意图

生成SSH Keys

在任意文件夹处右键空白处，然后点Git bash here,输入

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

然后敲4次Enter

然后进入C:\Users\用户名，在里面进入.ssh文件夹

用记事本打开里面的id_rsa.pub,全选复制里面的代码

然后打开Github，进入用户设置，找到SSH keys

新建一个SSH keys，名称随意，在下方粘贴代码并完成创建

可通过gitbash窗口中输入测试是否成功

1
ssh -T git@github.com

回车执行后再输入yes即可

本地生成博客内容

在合适的位置位置新建文件夹以存放博客本地内容，然后进入文件夹，右键空白处然后点菜单中的Git bash here，输入如下指令

1
2
3
4
5
hexo init   
#如果"command not find"，就在前面加上npx  
  
hexo g  
hexo s

现在就可以复制生成的链接进入浏览器看到我们生成的本地服务器了（输入Ctrl+C以关闭）

上线博客

进入之前的文件夹，用文本编辑器打开_config.yml，拉到最下面将deploy后面的全删掉，复制粘贴这段

1
2
3
4
5
type: git  
repository: <你的用户名>.github.io  
branch: main  
  
#要注意缩进格式，每行前面都有两个空格不要删，每个冒号后面都有个空格也不要删！

回到博客文件夹，右键git bash，输入如下指令安装自动部署发布工具

1
npm install hexo-deployer-git --save

然后在文件夹右键打开git bash，依次输入如下指令

1
2
hexo g      #生成  
hexo d      #上传

如果是第一次使用git的话需要进行如下配置

1
2
git config --global user.email "你的邮箱"  
git config --global user.name "你的名字"

配置完后再hexo d上传，需要在跳出来的窗口内使用Github进行登录

接下来我们就成功把本地内容上传到Github了，这样就算搭建完成了，可再次进入<你的用户名>.github.io查看

完善资料

现在博客标题还是默认的hexo，整个页面是初始默认的，接下来我们对其进行修改，用记事本打开我们文件夹中的_config.yml文件

可将#Site下面的内容按自己的需求填写

1
2
3
4
5
6
7
8
## Site  
title: 标题  
subtitle: 副标题  
description: 描述  
keywords: 关键词  
author: 站主  
language: 语言（可以填写zh-CN）  
timezone: 时区（可以填写Asia/Shanghai）

此时的页面效果便如图所示

上传文章

可将markdown文档作为博客的内容上传，可通过如下指令直接生成新文档

1
hexo new 文章标题

也可将自己写好的内容直接放入文件夹中的source/_posts中

写好后仍用之前的指令进行生成和上传

1
2
hexo g  
hexo d

插入图片

这是一个棘手的环节，使用某些图床或本地地址都会导致图片无法显示，目前确认可行的一种方法是通过在Gitee上建立一个仓库作为图床用链接进行上传，然后在自己的文档最前面添加如下的一行内容，再用一个空行与正文隔开即可正常显示图片

1
<meta name="referrer" content="no-referrer" />

配置主题:

应用主题首先要安装主题，需要在自己的博客根目录下git bash并运行如下指令

1
npm install hexo-theme-butterfly

然后修改 Hexo 根目录下的 _config.yml文件，把主题改为butterfly

1
theme: butterfly

在hexo的根目录创建一个文件_config.butterfly.yml，并把主题目录的_config.yml内容复制到_config.butterfly.yml里Hexo会自动合併主题中的_config.yml和_config.butterfly.yml里的配置

完成上述过程后就可以通过修改yml文件中的内容完成对博客页面内容的修改

各个功能的实现可以参考butterfly主题官方的介绍网页

当然，完成修改后还必须执行hexo g/d的生成和上传指令才会生效

参考资料:

如何用Hexo搭建个人博客?

Hexo博客搭建基础教程

GitHub Pages + Hexo搭建个人博客网站

Butterfly 文档(三) 主题配置