博客搭建经验

发表于 2021-05-09 更新于 2021-05-19 分类于帮助阅读次数：

前言

在一堆博客平台上兜兜转转好几年，最终还是选择了GitHub。无各种限制+无广告+无社交互动已经很让人心动了，最重要的还是对系统友好、不用花高价去维护，很适合像我这样又穷又自闭的赛博难民。

这两天花了一些时间学习了怎么搭建和配置，趁着还没忘记录一下搭建时遇到的问题和解决办法（详细的搭建过程很容易找到，这里就不阐述了）

遇到的问题

先说明自己所用的版本信息：

Git-2.31.1 64bit

Nodejs-14.16.1 64bit

Hexo-5.4.0

nexT-5.1.4

电脑是Win10。

运行`hexo d`时显示错误

1	fatal: unable to access 'yoursite': Failed to connect to github.com port 443: Timed out

这是一个经常会产生的问题（我几乎每次部署都会弹这种错误反馈）实在不行就hexo clean几次，重新部署几次总能成功的。

域名解析时出现问题

这个问题一般不会出现，但我实在是太想要一个个人域名了就去Godaddy上买了一个。买完后发现网上找到的教程早已过时，DNS的配置方法和页面布局被官方改得妈都不认识，只好自己慢慢试错了。

首先打开cmd，输入ping username.github.io得到GitHub的IP。
进入Godaddy的个人域名管理界面，点击DNS进入DNS管理。添加一个类型A，名称@，值为IP的记录。此外修改名称为www的CNAME，将值改为username.github.io。TTL是默认1h，可以不用动它。
然后把剩余的DNS管理可编辑的都删了（它默认有个_domainconnect 的CNAME和parked custom的记录）
在本地文件source中创建一个CNAME的文件，里面写上自己买的域名，保存，删掉文件后缀。
在GitBash中输入hexo d，让这个CNAME上传到GitHub仓库。
打开仓库，点击Settings进入仓库的设置界面。在左边的目录中找到Pages，在Custom Domain里输入你的域名，然后等待它自己检测DNS配置，变成绿色的√就证明域名解析成功。（如果期间弹出了DNS解析失败等提示可能需要等待一段时间。）
勾选Enforce HTTPS。

然后输入域名就可以跳转到博客界面啦。

tags和categories的页面显示404

这个问题很容易产生！我觉得最大的原因出现在主题的配置文件里。

打开主题配置文件，找到menu一栏
1
2
tags: /tags/|| tags
categories: /categories/|| th
把/和||之间的空格删掉。
在GitBash中输入hexo new page tags，让它在source下生成一个名为tags的文件夹，里面会多出个index.md的文件。
打开index.md，在最后一行中加入一句type: "tags"，直接保存退出。不需要加---在顶端和末端。
添加categories的方法就是同上两个步骤，只是把tags替换成categories。
执行hexo s，在localhost上查看页面是否显示正常。

没啥问题就hexo d了。

nexT自定义

这里记录一些我觉得还比较有趣（麻烦）的自定义过程。

访客量设置

不蒜子在2018年换了域名，所以按照网上找到的教程走很有可能无法显示访问量。

打开\themes\next\layout\third-party\analytics\busuanzi-counter.swig文件，把第一行改成

1
2
3

{% if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

然后在主题配置文件里将busuanzi_count目录下的enable改成true。这下面还可以改一下site_uv_footer和site_pv_footer，这是访问量的后缀。

新版next的配置文件中已经增加了这个功能，只需把开关打开就可以使用了。

头像设置成圆形并且让它转起来

打开themes\next\source\css\_common\components\sidebar\sidebar-author.styl，输入

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
  border-radius: 50%;
  transition: 2s all;
}
.site-author-image:hover{
  transform: rotate(360deg);

新版next的配置文件中已经增加了这个功能，只需把开关打开就可以使用了。

文章置顶

首先在GitBash中输入npm uninstall hexo-generator-index --save卸载默认插件。

然后安装一个新的插件npm install hexo-generator-index-pin-top --save

之后写文章的时候在标签分类下面写上一行top: true就可以让这篇文章出现在第一个了。

一些摸索

仓库整理

在查看仓库时发现我的文章全都以单独文件夹的形式罗列在仓库里，时间长了肯定不好管理。去看了其他人的仓库却发现他们并没有我这样的情况，难道是我最开始安装Git的时候出错了吗？还是说我有哪些配置改错了？

既然是生成部署的问题，那就去站点配置里找答案。

1
2
3

permalink: :name/
permalink_defaults:
pretty_urls:

当时我自定义的时候想“永久链接的格式当然要简介明了才比较好记”，于是跟着官网的设置选择了以文件名(name)为永久链接，这样我的文章地址就变成了https://drifter-games.com/name。

好看是好看，但在进行hexo g的时候，这篇文章就会以index.html的形式放在public\name的文件夹里。（同理，有几篇文章就会生成几个文件夹）随着文章数增加，文件夹也会越来越多，仓库内部的画面可想而知。所以我选择了以年份作为一个整理的方案：

1	permalink: :year/:name/

这样进行hexo g的时候，public文件夹里就会自动把文章进行一个年份归档，之后部署到GitHub仓库的时候就不会再出现这个问题了。

注：执行hexo clean时会自动删除public文件，如果找不到public文件夹在哪的话请先执行hexo g查看。

前言