2023-11-26-使用Hexo搭建个人博客

---

title: 使用Hexo搭建个人博客
date: 2023-11-26 23:00:26
tags:

前言

最近闲来无事就学习了一下如何搭建网站。之前就尝试过使用WordPress在云服务器上部署网站。这次碰巧看到一篇使用Hexo搭建网站的文章就尝试了一下。Hexo的好处就是直接部署在GitHub上，不需要花钱租服务器了，但部署在GitHub的坏处就是访问实在过于慢，或许部署在国内的CODING上能加快访问速度，此次我只尝试了部署在GitHub。在此特别感谢B站UP主Homepea的教程。

搭建步骤

GitHub搭建仓库

登录到GitHub，点击“+”，New repository。仓库名：用户名.github.io[固定写法]。选择仓库为Public[如果选择Private，后文提及的GitHub Pages就需要付费使用，建议设置为Public]。最后点击Create repository。

安装Git

有关Git的介绍可以查看这篇文章，这里不做具体讲解。从Git官网下载、解压、安装。鼠标右键打开Git Bash Here。Windows11需要点击显示更多选项。

如果鼠标右键没有Git Bash Here，按住‘Win + R’，打开运行，输入‘regedit’，打开注册表。点击计算机\HKEY_CLASSES_ROOT\Directory\Background\shell。在shell下新建一个项，命名为Git Bash Here。在shell下新建一个项，命名为Git Bash Here。新建字符串值数值名称为Icon，数据数值为所下载应用程序的位置[右键Git Bash，打开文件所在位置。例如：C:\Program Files\Git\git-bash.exe。如果桌面没有Git Bash，点击开始，查看所有应用，找到Git Bash，将Git Bash拖到桌面上]。

右击Get Bash Here新建项，名字为command。双击command中默认，修改数值数据[注意：数值数据为所下载git-bash.exe地址加空格加"–cd=%v."]，点击确定。

设置Git

设置user.name和user.email配置信息，需要输入双引号：

git config --global user.name "GitHub用户名"
git config --global user.email "GitHub注册邮箱"

生成ssh密钥文件

ssh-keygen -t rsa -C "GitHub注册邮箱"

执行完了之后直接三个回车即可，默认不需要设置密码 然后在目录【C:\Users\XXX.ssh】文件夹下面找到id_rsa.pub密钥，如下所示：

复制到GitHub

点击头像，Settings，SSH and GPG keys，New SSH key或点击。Title为标题，随意填即可。

在Git Bash检测GitHub公钥设置是否成功：

ssh git@github.com

返回如下即成功：

安装Node.js

点击Download，选择Windows平台，按提示安装即可。

检测Node.js是否安装成功

node -v

检测npm是否安装成功

npm -v

返回版本号即安装成功。

安装Hexo

Hexo就是博客的框架，Hexo的具体使用教程可以查看文档 | Hexo。这里需要在自己的电脑里创建一个文件夹，这里命名为Hexo，Hexo框架与以后你自己发布的网站都在这个文件夹中，创建好后，进入文件夹中 -> Git Bash Here -> 使用npm命令安装Hexo。

npm install -g hexo-cli
hexo init Hexo

由于之前创建了已Hexo文件夹，我们需要重新打开 Git Bash。打开Hexo文件夹中的Hexo文件夹。右键->Git Bash Here。

hexo g
hexo s

执行结束后我们就可以打开网站了。在浏览器输入http://localhost:4000/。

将Hexo和GItHub关联

在Hexo根目录里_config.yml文件成为站点配置文件，打开_config.yml修改deploy（yml文件是根据缩进来判断的，因此一定要注意空格的多少），具体的操作如下所示:

deploy:
  type: git
  repo: git@github.com:GitHub用户名/GitHub用户名.github.io.git

复制代码保存站点配置，其实就是让Hexo知道你要把Hexo部署在哪个位置，很明显，我们部署在我们GitHub仓库里，最后安装Git部署插件，在部署之前需要执行以下指令，让Hexo能够正确上传。

npm install hexo-deployer-git --save

复制代码这时，我们分别输入三条命令，即可在通过xxx.github.io看到我们的博客了，最后执行下列执行，分别是清理，重建页面和上传仓库三个操作，一般上传之后不能立马看到效果，需要等待十分钟左右。执行的指令如下：

hexo clean && hexo g && hexo d

域名购买和解析

购买域名

推荐使用阿里云或者腾讯云购买。这里以阿里云作为演示。点击域名注册，搜索自己想要的域名即可。

仓库中添加CNAME文件

在仓库中建立名为CNAME的文件(文件名大写，且没有后缀)，在CNAME文件中添加刚刚购买的域名，如[doyayaa.online]，不能包含：[http://]和[www.]，如下图所示：

Github会自动解析，不过还是自己确认以下最好，点击仓库名上方菜单栏中的Settings，向下翻到[Pages]即可，找到自己的域名即可。但是注意，如果上传代码的话CNAME文件会丢失的，因此需要最本地的Hexo文件夹下面的[/source]文件夹下面建一个CNAME文件，内容还是前面购买的域名，这样可以保证每次使用 ‘ hexo d ’ 指令的时候代码仓CNAME文件还在。这点一定要注意，否则上传了代码可能网站还进不去。

添加域名解析

ping你的github.io域名，得到一个IP。
登录到阿里云的云解析控制台，如果没有登陆过就添加域名，我是已经添加过了，所以有，然后点击右边的解析设置。我已Cloudflare作为演示，阿里云的操作一样。如果上面得到的地址是IPV4地址，类型选择A，如果是IPV6地址则选择AAAA，名称一个为：“www”，一个为：“@”。

这样通过doyayaa.online和www.doyayaa.online两种方式就都可以访问自己的网站了。

美化网站

在这里推荐使用B站UP主Homepea的NEXT修改版。Next主题自7.6.0版本开始，自动在首页对文章进行摘要描述作为前言文本的功能被移除，请自行安装第三方插件，或阅读 Hexo 有关文档。没有这个功能的话对导致主页上面是文章的全部内容，显得非常的杂乱，相应的处理方法也是非常简单，自行安装‘ hexo-excerpt ’即可。

在Hexo目录下执行Git Bash

npm install hexo-excerpt --save

在配置文件_config.yml添加内容

#自动在首页对文章进行摘要描述作为前言文本
excerpt:
  depth: 3 #摘要的内容多少
  excerpt_excludes: []
  more_excludes: []
  hideWholePostExcerpts: true

主题的存放目录是 themes，将下载、解压好的主题文件复制到 themes。找到博客目录下的配置文件 _config.yml, 找到Extensions模块，修改字段。

使用的是默认主题，修改前的配置是这样的：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

修改成新下载的主题之后是这样的：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: light

查找字符excerpt_description 改为true，如下所示：

# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

然后，通过运行命令 hexo s ，启动本地服务，通过http://localhost:4000/ 查看修改后的效果。

配置文件_config.yml中设置网站为中文：

language: zh-CN

运行以下命令，使主题更新到博客

hexo clean
hexo g
hexo d