Hexo+Github Pages搭建博客

前言

Hi~ o(￣▽￣)ブ

o(￣▽￣)o

小白第一次通过Github搭建博客且第一次写此记录，也借鉴了许多大佬的教程，在此万分感谢！此文章也难免会出现很多错误，希望各位看到这篇文章的大佬能够屈膝指正，Senorui万分感谢！！！

很多人听到搭建博客、网站就望而却步，弄个博客网站，不得买个台服务器吗？不得搞数据库吗？不得注册域名吗？没事，如果都没有，博客网站依然可以搭建。

我们可以通过Github来免费搭建。Github它提供了GitHub Pages来帮助我们来架设一个静态网站，这就解决了服务器的问题，而域名你可选择购买也可选择使用Github提供的二级域名。

准备工作

安装nodejs

Hexo使用要求：Node.js 版本需不低于 8.10，建议使用 Node.js 10.0 及以上版本

hexo的运行需要nodejs的环境，进入【Nodejs 】，推荐下载LTS版。

下载好以后开始安装，点击next，选择安装路径后一直next就行。

安装Git

我们进入【Git官网】

下载对应安装包

开始安装，点击next，选择安装路径，一路nxet即可，选择默认配置会自动给我们配置好需要的环境。

我是小白我选择默认哈－O－

当在桌面右键显示如图的Git Bash等字样，即为安装成功。

创建Repositories(仓库)

首先要有一个Github账户，没有的也可以现在去【注册Github】

注意：用邮箱注册以后一定要验证激活，不然无法使用。

账号注册成功以后，点击右上角头像，再点击 Repositories，打开仓库页面再然后点击右上角绿色的 New按钮即可创建仓库。

填写仓库名，其形式一定要是username.github.io的格式，参考下图

填写完毕后点击创建。

由于我已经创建了，所以创建按钮变灰了。

创建成功后，此时我们的仓库还是空白的，然后我们在仓库右上角点击 Setting(设置) ，往下找到 GitHub Pages选项，点击其中的 Choose a thame按钮，我们先随便选择一个主题。

设置好以后，回到刚刚的设置界面，在 GitHub Pages下面，我们看到出现了一句话 :
Your site is published at https://senorui.GitHub.io

此时我们的一个空壳的Github Pages已经创建完成了。

安装Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

上面环境安装成功后，即可使用npm安装hexo。

复制下面安装命令，在桌面(存放博客文件下也可)右键选择 Git Bash Here，快捷键 shift+insert粘贴输入代码，回车即可执行安装命令。

命令如下

npm install hexo-cli -g

注：后面所有命令均不需要手动输入符号，Git Bash已经自带了。

安装成功如下图：

然后在你喜欢的位置新建一个存放博客的文件夹（此文件夹即微博客的根目录），在此文件夹下右键选择 Git Bash，输入以下命令

hexo init

即可初始化hexo，成功后可见 Start blogging with Hexo! 字样，如下图：

初始化hexo.webp

博客文件结构如上图。

scaffolds 是模版文件夹，你新建的文章Hexo会根据scaffold来建立文件。
source 是存放用户资源的文件夹。
themes 是主题文件夹，Hexo的页面根据不同的主题来生成不同样式的页面。
-config.yml 是站点配置文件，后面再详细了解。

然后开启本地服务，输入命令

hexo s

开启成功后如上图，然后在浏览器输入 http://localhost:4000

即可看到下图所示的博客效果。

至此，基本博客的搭建及Github仓库的创建就已经完成了。
接下来就是对博客进行必要的配置。

配置博客

更换主题

Hexo自带的主题不喜欢的可以去寻找下载别的主题，Hexo官方收集的主题还是很多的

【官网主题地址】：https://hexo.io/themes

官文加载比较慢，可以去第三方的【中文站】：https://www.hexocn.cn/themes

以下用【Fexo】主题举例。

不要脸的推荐一下我修改过：https://github.com/Senorui/fexo

进入 fexo的仓库,点击 clone or download,复制git地址

然后再在博客根目录下，右键 Git Bash Here输入如下命令

git clone git@github.com:forsigner/fexo.git themes/fexo

git clone 是克隆的意思，themes/fexo 为克隆到 thames 文件夹下名为 fexo的文件下。

当如下图所示时即为安装成功。

然后打开根目录下的站点配置文件 -config.yml中，找到以下代码

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

把代码中的 landscape改为 fexo。

然后在博客根目录下，右键 Git Bash Here输入如下命令

hexo s

在浏览器输入 http://localhost:4000 即可看到主题启用及效果。

站点配置

在博客根目录下，打开站点配置文件 -config.yml，根据我们的需求进行修改，所有下图仅做参考：

博客名及slogan这些根据个人喜好更改

填写部署到Github的参数，先打开Github上新创建的仓库，点击 clone or download，选择 SSH的地址，其形式为git@github.com:username/username.github.io.git

如下图：

依然在根目录的配置文件在 -config.yml中，修改为如下所示：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:Senorui/senorui.github.io.git
  branch: master

具体填写参考下图

配置2.webp

主题的配置

在 根目录/thames/fexo 下，打开主题文件 -config.yml，根据你的需求修改。

基本信息的修改，参考下图：

配置3.webp

配置4.webp

配置5.webp

启用页面

启用分类页面

首先在博客根目录执行命令

hexo new page category

再修改My blog/source/category/index.md里面的内容：

---
title: category
layout: category
comments: false
---

启用标签页面

首先在博客根目录执行命令

hexo new page tag

再修改My blog/source/tag/index.md里面的内容：

---
title: tag
layout: tag
comments: false
---

启用友链页面

在博客根目录执行

hexo new page link

修改My blog/source/link/index.md里面的内容:

---
title: link
layout: link
comments: false
---

启用关于页面

在博客根目录执行

hexo new page about

修改My blog/source/about/index.md里面的内容:

---
title: about
layout: about
comments: false
---

启用搜索页面

首先进入博客的根目录执行命令

yarn add hexo-search

安装Hexo插件hexo-search(重要)

再在博客根目录执行命令

hexo new page search

然后再修改My blog/source/search/index.md里面的内容:

---
title: search
layout: search
comments: false
---

启用项目页面

在博客根目录执行命令

hexo new page project

修改my-blog/source/project/index.md里面的内容:

---
title: project
layout: project
comments: false
---

关于页、友链页、项目页根据自己需求进行修改配置。

下图仅展示关于页的修改做参考：

配置7.webp

启用RSS

首先安装RSS插件，在博客根目录下执行以下命令

yarn add hexo-generator-feed

由于本fexo主题已经配置好RSS功能，则在配置文件中把RSS设置改true
然后执行以下命令，即可在public文件下发现atom.xml。

hexo clean && hexo g

如果主题不带此功能，则安装完此插件后，还需要在站点配置文件 -config.yml中添加如下代码

# RSS Support
plugin:
  - hexo-generator-feed

# Feed Atom
feed:
  type: atom
  path: /atom.xml
  limit: 15

并在然后在 theme目录下的 _config.yml文件中添加配置

rss: /atom.xml

然后执行命令

hexo clean && hexo g

即可在 public文件夹中就会生成 atom.xml文件。

以上，RSS安装成功。

个性化设置

自定义CSS

1.在博客根目录新建文件夹Blog/source/css，主题目录的/source/css也可
2.然后在此目录新建一个 CSS，名字随意，如 personal.css
3.修改fexo/_config.yml下面配置，然后添加你的样式即可

personal_style: /css/personal.css #不需要自定义CSS注释即可

我的个人自定义样式如下：

html.page-home {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(/img/home/Bg.jpg);
  background-color: transparent;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

首页 Footer设置

首页底部添加版权标识以及备案号等等。

在路径Blog\themes\fexo\layout\_partial下，打开home.ejs

在末尾添加如下代码即可

<footer style="position:absolute; bottom: 2%;left: 50%;transform: translateX(-50%);">
<a style="font-size:12px; color:#696969" target="_blank">© 2018-2020  <%= config.author %> | <a style="font-size:12px; color:#00e676" target="_blank" href="http://www.beian.miit.gov.cn/" rel="nofollow">xICP备xxxxxxxx号</a></footer>

不会代码的渣渣代码水平，能实现效果和目的就🆗，见谅！

效果如下

评论系统的配置

Gitalk

首先我启用Gitalk评论系统，其具体安装配置见

官方文档：https://github.com/gitalk/gitalk

这里只做简单介绍。

首先需要去注册一个Github应用程序：https://github.com/settings/developers

应用名称，可随意，Homepages URL填我们的博客网址，Authorization callback URL为我们的网站地址。

具体参考下图

Authorization callback URL如果你指自定义了新的域名就填新的地址(上图为未作修改时的地址)，比如我的就更改为https://senorui.top，这一步仍然可以在你进行自定义域名时再回到Application设置页面(即下一图页面)进行修改。

注册成功后，会给一个ID和密钥，如下图

然后复制ID和密钥填入站点配置文件中的Gitttalk配置处。

gitalk:
 enable: true # 如果使用 gitalk，请设置改之为true
 clientID: ID
 clientSecret: 密钥
 repo: senorui.github.io （仓库名）
 owner: Senorui （仓库所属用户名）
 admin: Senorui (所属用户名和团队启用用户名)

配置6.webp

配置成功以后，需要我们用Github登陆初始化一下。

Disqus

由于原先使用的Gitalk评论系统总是出现初始化不成功、登陆时跳回首页或者跳回页面等待问题，而且它需要的权限太多，也是为了安全考虑最终选择弃用。

注册并配置Disqus

首先需要去官网主页：https://disqus.com

注册一个Disqus账号，登陆后点击首页GET STARTED按钮，点解下图按钮

进入Creat a new site，填写Website Name和分类及语言的信息。
这里的Website Name即为主题配置文件的Short name。

Site Install

我们的hexo博客不属于任何一种，这里选择通用代码并选择配置，如图

进入详细配置页面，填写Website Name和Website URL，完成配置。

安装到Hexo

如果你的主题集成了Disqus评论系统，那么在主题配置配置如下代码

# Disqus 
disqus:
  enable: true
  shortname: xxx  #your shortname
  count: true

有的主题只需添加如下代码，而上述代码却不生效。

disqus_shortname: xxx #your shortname

注意：在Disqus的管理页面可以看到，当Website Name重复时，shorname将改变不再与Website Name相同。

如果你的主题没有集成Disqus评论系统，则再文章的下方加入如下代码即可

<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
    this.page.url = '{{ page.url | absolute_url }}';
    this.page.identifier = '{{ page.url | absolute_url }}';
};
(function () {
    var d = document, s = d.createElement('script');
    s.src = 'https://{{ page.url }}.disqus.com/embed.js";
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
 })();
</script>
<noscript>Please enable JavaScript to view the comments.</noscript>

执行如下命令编译部署后，即可打开新启的评论系统了。

hexo clean && hexo g && hexo d

使用此评论系统的前提是能科学上网！！

部署到Github

配置SSH密钥

为了让本地与远程的Github建立连接，需要再本地配置SSH密钥，这样就可以直接再本地将代码提交到Github上了。

第一此配置SSH需要配置git的username和email。

在Git里面输入以下命令

git config --global user.name "你要设置的名字"
git config --global user.email "你要设置的邮箱"

再输入以下命令生成SSH密钥。

ssh-keygen -t rsa -C "你刚刚设置的邮箱"

命令执行过程中需要进行一次确定(输入y)，不需要设置密码可以直接三个回车。

生成后会在路径C:\Users\你的用户名\.ssh下生成id_rsa 和 id_rsa.pub 两个文件，id_rsa.pub即为存放SSH密钥的文件。

在Github上添加SSH密钥

复制密钥文件中的密钥，打开Github，在设置中找到 SSH and GPG keys，点击右上角的 New SSH key即可添加密钥。

如图

添加完成后我们需要进行测试，看看是否设置成功。

输入以下Git命令

ssh -T git@github.com

当看到我们的设置的用户名时即为配置成功。
如下图：

部署到Github

在博客的根目录下右键选择 Git bash，输入以下命令进行部署：

hexo clean && hexo d -g

如果出现ERROR Deployer not found:git的报错，则进行一下此命令：

yarn add hexo-deployer-git

再次执行上面的部署命令。

稍等片刻即可部署成功，然后在我们的仓库主页点击网址即可访问我们的博客

比如我的网址就是 https://senorui.github.io

博客样式如下图：

为了方便部署，我们可以在博客根目录下创建一个名为deploy.sh的脚本文件，其内容为：

hexo clean && hexo g && hexo d

这样我们部署发布文章时，只需要执行命令

sh deploy.sh

给博客自定义域名

购买域名

可以在华为云、腾讯云、阿里云等服务商购买一个域名。

以我购买平台华为云举例

搜索自己喜欢的名称，寻找喜欢的后缀的域名。
如下图

域名1.webp
域名2.webp

选择什么样后缀的域名根据个人需求，不过个人博客一般可选择.me .info .xyz，但是我综合价格等考虑选择了senorui.top这个域名。

注意：有些域名首年很便宜，但是续费很贵很贵，甚至是首年的好几倍。

购买成功后，需要进行实名认证，具体操作看官方文档。

等待实名认证审核，华为云一般一两个小时就认证通过了。

域名解析与绑定

在等待域名认证审核的时，我们打开GitHub仓库的设置页面，在Github Pages里在自定义域名框里输入购买的域名，并保存，即可看到我们的网址变成了 https://senorui.top

如下图

域名3.webp

后续使用时会出现部署文章到Github时，博客的域名重置为默认的域名，即通过自定义的域名无法访问我们的博客。
这里我们需要安装一个插件，在根目录下打开 Git Bash输入以下命令

yarn add hexo-generator-cname

然后在站点配置文件 -config.yml中添加如下的代码

Plugins:
- hexo-generator-cname

或者，可以在根目录的 sourse目录下新建一个名为 CNAME（没有后缀）的文件，里面填写你的域名即可。

但是此时通过此网址还不可以打开我们的博客。
还需要把域名解析到Github Pages空间上去。

打开域名控制台，点击解析，选择公网解析，再点击解析
然后在右上角点击添加记录集，在弹出页面类型栏选择A记录
在值这栏里填入以下IP：

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

填写完毕后，点击确定。

注：谨慎添加www.senorui.top的解析，好像是Github不可以给此形式的域名进行SSL认证。但是添加后有个奇怪的现象，在浏览器网址栏仅仅输入 www.senorui.top 可以访问我们的博客而输入 https://www.senorui.top 却显示不安全无法打开。

这样我们就可以通过 https://senorui.top 访问我们的博客。

以上域名绑定与解析，【参考官方文档】

设置永久链接

在根目录下用Git Bas输入以下命令安装插件

yarn add hexo-abbrlink

然后在站点配置文件 -config.yml中添加如下代码

# permalink: :year/:month/:day/:title/
# permalink_defaults:
permalink: posts/:abbrlink.html
abbrlink:
  alg: crc16  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex

alg和 rep配置参考如下官方样例

crc16 & hex
e.g:https://post.zz173.com/posts/66c8.html

crc16 & dec
e.g:https://post.zz173.com/posts/65535.html
crc32 & hex
e.g:https://post.zz173.com/posts/8ddf18fb.html

crc32 & dec
e.g:https://post.zz173.com/posts/1690090958.html

设置完成后进行hexo cl && hexo g编译

添加版权信息

用hexo-addlink插件可以简单地在文章尾部添加当前文章链接，并注明版权，有利于SEO。

安装插件

yarn add hexo-addlink

然后在站点配置文件中加入以下代码

# 版权信息
addlink:
  before_text: __本文作者__：<a href="https://senorui.top/" target="_blank">Senorui</a><br/>__本文地址__：
  after_text: <br/>__版权声明__：本博客所有文章除特别声明外，均为原创且采用 <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="external nofollow">知识共享署名4.0</a> 国际许可协议进行许可<br>

注意需要修改作者名！

其样式如下图

版权信息.webp

代码压缩

在博客根目录执行以下命令下安装插件

yarn add hexo-neat

在站点配置文件 -config.yml末尾添加如下代码

#hexo-neat 优化提速插件（去掉HTML、css、js的blank字符）
neat_enable: true
neat_html:
  enable: true
  exclude:
    - '**/*.md'
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/**/instantpage.js'
    - '**/matery.js'

当我们执行命令进行编译部署时它会自动压缩。

hexo clean && hexo g

SEO

Google优化

推送给谷歌相对来说要简单一些。

首先我们在博客源文件里生成站点地图，安装以下插件

yarn add hexo-generator-sitemap  
yarn add hexo-generator-baidu-sitemap   #百度专用

然后在站点配置文件 -config.yml下添加

# hexo sitemap站点地图
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

注：有些主题不需要这个配置，会出错。

再执行以下命令

hexo cl && hexo g -d

随后会在博客根目录的public文件夹下生成 sitemap.xml、baidusiatemap.xml两个文件。

然后登录【Google Search Console】

点击添加资源，输入自己的域名，这里你可以选择添加网域或者仅仅添加网站。

这里我选择的是添加网域，操作如下图

复制TXT记录值后进入域名控制台，添加一个如下图的记录值

添加完成后回到Google Search Console，点击验证，不过一般用等几分钟才能验证成功。
如下图就验证失败了。

过了大概五分钟后即可成功验证。

验证成功后，点击站点地图输入站带你地图链接：https://senorui.top/sitemap.xml，然后提交即可。

提交成功后如下图

此时在Goole搜索site:senorui.top即会出现你的网站。

如下图

百度优化

由于百度的spider是爬取不到GitHub的内容的，所以部署到Github的博客很难被百度收录给…….

首先注册登录【百度搜索资源平台】

注册登录之后在用户中心下的站点管理页面中点击添加网站，按提示操作。

这里我们选择文件验证的方式验证，点击下载文件，然后把下载的html格式文件放在博客的source目录下

下图仅仅做示范，由于我已添加过https://senorui.top,所以加了www来做演示。

百度1.webp

百度2.webp

输入以下命令部署到Github后验证文件即可。

首先安装以下插件

yarn add hexo-baidu-url-submit

如果你的主题支持BaiduPush，那么你的博客路径\blog\themes\fexo\layout\_partial\下有一个 baidu-push.ejs文件，其内含如下代码

<% if (theme.baidu_analytics){ %>
  <script type="text/javascript">
    (function(){
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
  </script>
<% } %>

那么就可以在主题配置中进行如下配置即可。

baiduPush: true

这样我们每次编译部署文章时就会自动把我们的站点推送到百度了。

如果你的主题不支持BaiduPush，则进入百度站长中心，在搜索服务 –> 资源提交 –> 链接提交下的主动推送查看主动推送接口，在站点配置中加入以下代码

baidu_url_submit:
  count: 5 ## 提交最新的五个链接
  host: senorui.top ## 百度站长平台中注册的域名,即你的域名
  token:  ## 准入秘钥，即接口调用地址中的token=的值
  path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里

然后在 deploy下添加一条 type的值

deploy:
-  type: git
   repo: 
   branch: master
-  type: baidu_url_submitter

最后，记得查看配置文件中 #URL的配置，url一定要填写站长平台注册的域名，如下

# URL
url: https://senorui.top
root: /
permalink: :category/:abbrlink.html

我们也可以选择sitemap提交，如下图直接填写数据文件地址https://senorui.top/baidusitemap.xml提交

百度3.webp

但是我提交一天多了还没有反应……

添加Robots

为了优化博客重要链接在搜索引擎中的权重，我们就需要在我们的博客里添加Robots文件，robots.txt是一种存放于网站根目录下的ASCII编码的文本文件，它的作用是告诉搜索引擎此网站中哪些内容是可以被爬取的，哪些是禁止爬取的。

新建一个txt文件，把它放在source目录下，

其内容如下

User-agent: *
Allow: /

User-agent: 360Spider
Disallow: /

Sitemap: https://senorui.top/sitemap.xml
Sitemap: https://senorui.top/baidu_sitemap.xml

其中Sitemap.xml和Baidusite.xml文件需要安装以下两个插件，

yarn add hexo-generator-sitemap  
yarn add hexo-generator-baidu-sitemap   #百度专用

并在在站点配置文件 -config.yml下添加

# hexo sitemap网站地图
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

然后执行以下命令

hexo cl && hexo g -d

即可在public目录下看到这两个文件。

然后再Robots.txt中添加

Sitemap: https://senorui.top/sitemap.xml
Sitemap: https://senorui.top/baidu_sitemap.xml

结束语

至此，作为一个小白总算是把此博客搞起来了。

博客最终效果

在此过程中踩过了多少坑又填了多少坑呢？现在已经不重要了，只有经历了探索未知领域的过程才会有不一样的收获，哪怕它未来不一定用的上呢！

这不，看到这篇文章的小伙伴们不就用上了吗？！ヾ(≧▽≦*)oヾ(≧▽≦*)oヾ(≧▽≦*)o

本文为个人经历的实验过程所编写，如有错误之处还请海涵，在此感谢您的阅读！！！

本文作者： Senorui

本文链接： https://senorui.top/posts/5bb9.html

前言

准备工作

安装nodejs

安装Git

创建Repositories(仓库)

安装Hexo

配置博客

更换主题

站点配置

主题的配置

启用页面

个性化设置

评论系统的配置

部署到Github

配置SSH密钥

在Github上添加SSH密钥

部署到Github

给博客自定义域名

购买域名

域名解析与绑定

设置永久链接

相关文章推荐

添加版权信息

代码压缩

SEO

Google优化

百度优化

添加Robots

结束语