本文最后更新于 716 天前，其中的信息可能已经有所发展或是发生改变。

之前尝试过搭建过不同的博客类型,折腾了不少工作,最终决定定型在此,采用 Hexo + Github Pages 的方式。今天就带大家一起来搭建自己的博客。

准备工作

Git

安装

Windows:下载并安装
macOS: 下载并安装
Linux(Debian,Ubuntu):sudo apt-get install git-core
Linux(Fedora、RedHat、CentOS):sudo yum install git-core

NodeJS

安装

去官网下载最新的稳定版NodeJS,并安装(安装教程可自行搜索)

检验

安装完成后,要查看我们是否安装成功,可以打开命令提示符(Win + R),输入 cmd 打开控制台,输入如下命令,如果出现对应版本号,说明安装成功了;

node -v
npm -v

设置

下载包是从国外服务器,所以速度较慢,因此推荐用阿里的国内镜像进行设置;

npm config set registry https://registry.npm.taobao.org

Hexo安装

你的硬盘上找个地儿,用来存放你的博客文件,比如我的就在 E:\Blog,这个文件夹你可以根据自己的喜好来设置。然后从命令台进入当前文件夹,接下来就是安装过程了;(由于已经安装过了,所以没有办法再去截图,更为详细的安装过程可以详见这篇文章)

首先安装hexo

npm i hexo-cli -g

新建一个文件夹用于存放你的博客,比如我的是 blog,然后进入该文件夹,并用如下命令进行初始化并安装必备组件;

hexo init .
npm install

├── _config.yml # 网站配置信息
├── package.json # 应用程序信息
├── scaffolds # 模板文件夹
├── source # 存放用户资源
|   ├── _drafts
|   └── _posts
└── themes # 主题文件夹

配置
建站完成后我们需要进行配置,hexo 中主要有两项配置。一项是站点配置文件,路径为 /_config.yml。另一项是主题配置文件,路径是/themes/(下载的主题)/_config.yml。

我们可以先在站点配置文件修改以下基础选项:

#Site
#网站主标题,SEO元素之一
title: 旖旎若鸿的小站
#网站副标题,可选
subtitle: '驻足现实,仰望星空,率性而活'
#网站描述, SEO元素之一,用于告诉搜索引擎关于这个站点的描述
description: '记录生活,热爱生活'
#网站的关键词,如:
keywords: Diary
#网站作者,如:
author: YiniRuohong
#网站使用的语言, 由于 Hexo 具备多语言配置,默认为英文,我们需要修改回中文语言
language: zh-CN
timezone: ''

输入如下命令,然后在浏览器中打开 http://localhost:4000 ,就可以预览您的站点啦

# 新建博客
hexo new "博客名"
# 生成静态网页
hexo g
# 打开本地服务器
hexo s

此时建议先配置您的主题再进行下一步推送操作(主题配置教程见下文进阶教程)

配置您的GitHub个人仓库

完成上面的步骤之后,我们就能在本地进行预览了,不过我们如果想要发布到网上供别人看的话,那就得利用 Github Pages 的功能了,下边就来介绍如何结合 Hexo + Github Pages ,将我们的博客推送到网上去,方便大家在任何地方访问!

首先你得有个 GitHub 账号,没有的请在这里进行注册

有了账号之后,新建一个仓库,而且得确保你的仓库是 public,时,仓库名一定要是:

用户名.github.io
用户名.github.io
用户名.github.io
（重要的事情说三遍）

部署到 Github

完成上面的步骤后,你应该能在本地进行预览了,接下来就是推送网站到 Github Pages 了,然后我们就能被其他人访问了。

只需要在我们刚才的博客根目录中的站点配置文件 _config.yml
完成上面的步骤后,你应该能在本地进行预览了,接下来就是推送网站到 Github Pages 了,然后我们就能被其他人访问了。

只需要在我们刚才的博客根目录中的站点配置文件 _config.yml结尾处添加如下语句:(注意按照图片格式缩进)

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

完成上述步骤之后,主要使用如下命令,就能将我们本地的内容推送到远程 GitHub 仓库了

hexo clean
hexo g
hexo d

然后在浏览器中访问:

https://用户名.http://github.io

初级教程到此结束,接下来是进阶教程~

安装主题

我们熟悉完博客系统的操作后,接下来就是美化博客。Hexo 支持主题,我们可以根据官网的创建主题教程自己来设计,也可以直接在主题商城中找现成的主题。这里以笔者推荐的主题 Next 为例:

安装主题可以通过git clone克隆至blog/theme/下:(在博客根目录打开gitbash)

# 启动主题前需要清除缓存与已部署的文件
hexo clean

# clone 主题
git clone https://github.com/iissnan/hexo-theme-next themes/next

接着在站点配置文件(/_config.yml) 中启动 theme。

再打开主题配置文件(/themes/next/_config.yml)选择 Scheme:

评论、订阅、数据统计、SEO 等部分功能配置已经集成至 next 主题配置中,但大多还需要额外添加依赖还需要根据文档来配置。next 在主题配置中集成了由于配置自定义项过多,读者可以根据自己所需添加相应的统计、SEO 相关的 app key 等就不进一步展开讲。

绑定域名并使用cloudflare加速访问

前言

github page 在国内访问速度非常慢,而且近期 github.io 的域名经常被干扰解析成127.0.0.1,迫于无奈在网上找到了一个能白嫖加速 github page 的办法,就是套一层 cloudflare CDN,虽然它在国内没有 CDN 节点,但是整体效果是完爆 github.io,不过要注意的是免费版本是有请求次数限制的,每天 10W 次,当然这足够我的小博客使用了,这里记录一下操作步骤。

准备工作

域名

域名购买可以自行搜索购买(注意国内需要实名认证),免费域名可以白嫖freenom或pp.ua的,请自行搜索。(注意ppua现在需要银行卡验证)
这里使用我的域名 yiniruohong.cf 为例

GitHub page设置

通过 github 仓库中的设置页面找到对应的设置,把要用到的域名配置上去,示例图:

保存之后 github 会自动的在仓库根目录里生成一个CNAME文件,里面存储着域名配置信息,示例图:

设置域名解析

通过域名提供商,修改刚刚的域名解析,通过 A 记录分别解析到以下 4 个 IP:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

当记录全部解析生效时,就可以通过http://monkeywie.cn访问到博客了,这个时候再开启HTTPS,示例图:

然后 github 会自动签发提供给monkeywie.cn域名使用的 SSL 证书,等待一段时间后,就可以通过HTTPS访问博客了。

使用 cloudflare CDN

~~开始白嫖~~

你需要注册一个cloudflare(以下简称cf)账号
添加站点,把对应的域名填写进去
提交之后会自动扫描域名对应的解析记录:
查看 cloudfalre 对应的 NS 记录:
通过域名的运营商修改对应的 NS 记录,这里每个运营商的修改方式都不一样,我这里是用的Freenom的:
此时可以看到 dns 解析的 ip 已经变了,已经被 cloudflare 接管了,
然后清除下浏览器 DNS 缓存,chrome 浏览器输入chrome://net-internals/#dns进入清除页并清除DNS缓存
再次访问 https://yiniruohong.cf,F12 打开网络面板可以看到已经用上了 CDN 了

发布文章

首先进入博客所在文件夹,然后右键进入控制台,用如下命令进行创建新的文章;

hexo n "博客标题名"

接着在 blog/source/_posts 目录下应该就会有创建好的以文章标题名命名的 Markdown 文件;

接着打开该文件,编写你自己想要的内容即可;

编辑器我这里用的是BookPad——一款支持实时预览的markdown编辑器,如果想选择其它的可以自行搜索

接着在控制台使用如下命令,将其推送到远程 GitHub 仓库,等过一会儿之后,访问即可看到刚才推送的新文章了!

hexo g
hexo d

进阶教程到此结束,接下来是高级教程\~

重定向次数过多

出现原因

github pages 设置好了 CNAME 自定义域名之后,便强制用户的浏览器跳转到用户自定义域名。同样,我们在不使用CDN时,打开 yiniruohong.github.io会自动跳转到 yiniruohong.cf,而CDN中错误的设置了回源host,会导致出现一个死循环,即 github 通知跳转了,结果CDN依旧使用 yiniruohong.github.io去回源取资源。

解决方法

以cf为例:cf的cdn界面有四种选择

Off:不开启https。
Flexible:当我们的源网站没有配置 HTTPS 支持时,启用这个选项,Cloudflare 会在回源的时候通过 HTTP 协议访问我们的网站。
Full:当我们的源网站支持 HTTPS,但是 HTTPS 证书和域名不匹配或者是自签名证书时,Cloudflare 会通过 HTTPS 协议访问源网站,但不会验证证书,也就是说,即使我们的源网站提供的 HTTPS 证书不受浏览器信任,Cloudflare 也会通过 HTTPS 回源网站。
Full(strict):当我们的源网站支持 HTTP ,并且证书有效时(未过期且受信任)。Cloudflare 会通过 HTTPS 协议访问源网站,并在每个请求过程中验证证书。

知道了循环重定向的原因,我们也就知道了怎么解决这个问题,通过测试,下面的两种设置方法都可以解决 Cloudflare 循环重定向的问题。

SSL 中选择 Full 或者 Full(strict),让 CDN 回源的时候使用 HTTPS 的方式回源,没有 HTTP 什么事了,就不会跳来跳去了(推荐)
源网站不设置 HTTPS 支持或者不设置 HTTP 跳转 HTTPS,让 Cloudflare 回源的时候使用 HTTP 方式获取资源。

清理浏览器缓存后即可生效

更新NEXT主题并优化

++请首先备份您的文件并检查hexo版本(升级hexo请自行搜索)++

更新NEXT主题

在blog根目录下输入:

git clone https://github.com/theme-next/hexo-theme-next themes/next-reloaded

这个指令下载最新的v7.8.0版本(今天是2022.2.3)到名字为next-reloaded的文件中(网络错误就多试两次)

然后在修改站点配置文件:

theme: next-reloaded

这一版本需要注意,中文由原来的zh-Hans变成了zh-CN(Blog\themes\next-reloaded/_config.yml 622行)

最后 hexo s --debug

别忘了

hexo g
hexo d

这样就是全新版本了,下面是优化部分

优化

给文章添加阴影效果

首先主题配置文件取消如下代码的注释

style: source/_data/styles.styl

在 blog/source/_data下创建 styles.styl文件,_data文件也是我手动创建的,在styles.styl文件中添加如下内容:

// 主页文章添加阴影效果
.post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

给文章添加本文结束标记

首先主题配置文件取消如下代码的注释
postBodyEnd: source/_data/post-body-end.swig

在 blog/source/_data下创建post-body-end.swig文件,(_data文件也是我手动创建的)在post-body-end.swig文件中添加如下内容:

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-hand-peace-o"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

侧边栏显示当前浏览进度

打开 themes/next-reloaded/_config.yml ,搜索关键字 scrollpercent ,把 false 改为 true
如果想把 top 按钮放在侧边栏,搜索关键字sidebar ,把 false 改为 true

右上角添加github入口

首先到GitHub Corners或者GitHub Ribbons选择自己喜欢的图标,然后copy相应的代码
然后将刚才复制的代码粘贴到themes/next/layout/_layout.swig文件中下面一行
<div class="headband"></div>
把代码中的href后面的值替换成你要跳转的地址,比如你的GitHub主页

隐藏网页底部的Hexo驱动,next主题链接,next版本信息

打开主题配置文件,搜索关键字copyright

copyright:
 # -------------------------------------------------------------
 # Hexo link (Powered by Hexo). 
 powered: true #将true改成false,隐藏Hexo驱动

 theme:
   # Theme & scheme info link (Theme - NexT.scheme).
   enable: true  #将true改成false,隐藏next主题链接
   # Version info of NexT after scheme info (vX.X.X).
   version: true  #将true改成false,隐藏next版本号信息

添加搜索功能

npm i --save hexo-wordcount

打开Hexo的配置文件,添加配置

search:
  path: search.json
  field: post
  format: html
  limit: 10000

打开next的配置文件,搜索关键字local_search,设置为true

设置博客摘要显示

对于摘要显示,首先我们需要开启摘要功能,修改主题配置文件,打开阅读全文按钮

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

# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true #显示阅读全文按钮