blog搭建(github page、hexo、next)

发表于 更新于 分类于 阅读次数：

最近花了不少时间建立了自己的个人blog网站，整个过程也遇到了不少麻烦，所以写一篇blog记录一下我建立blog的全过程。事先说明我是在windows11系统上搭建的。

忽然发现自己不知道什么时候不小心把图片删掉了，真是汤碗了。没办法现在也找不到了，私密马赛。

hexo

推荐可以参考hexo官方文档来下载配置。对于hexo,首先需要配置nodejs(放的是windows的推荐下载链接，linux、macOS的链接在hexo官方文档里有显示)和git，这些网上都会有详细的教程而且没有什么bug，所以就不详细写了(当然不是因为博主已经忘记了自己是怎么安装的了啊)，对于git的安装有一篇推荐的文档. 当然安装好git之后还不够，因为我们的网站是要托管在github上的。如果你没有github账号，请你注册一个。之后我们要把自己电脑的ssh key配置到github上，这样我们就可以把本地的仓库提交到github上了。

配置ssh key

(以下操作最好在git bash中运行，因为cmd、powershell可能无法识别你的git命令)

step1.检查主机是否已有ssh key
1
2
3
cd ~/.ssh
ls
//看看是否存在id_rsa和id_rsa.pub文件，当然你也可能跟我一样是id_ed25519

如下图所示即为已存在ssh key 如果存在，直接跳到step3

step2.生成ssh key

如果不存在ssh key，执行以下命令：

1
2
ssh-keygen -t rsa -C "xxx@xxx.com"
//填你自己注册github的邮箱
step3.获取ssh公钥内容(id_rsa.pub)
1
2
cd ~/.ssh
cat id_rsa.pub

当然你直接去到C:.ssh下面用记事本之类的打开文件也可以。

如下图所示，复制内容： alt text

step4.Github上添加公钥

进入settings alt text 找到SSH and GPG keys，然后点击New SSH key，把刚才的内容复制上去就好了。

step5.验证

执行以下命令： 

1
ssh -T git@github.com
显示如下命令即为设置成功： alt text

安装Hexo时需要注意的问题

(以下的操作推荐可以在vscode中打开hexo的文件夹，使用vscode的终端进行配置，当然你用cmd、powershell也不会有任何问题) 官方文档所给出的安装步骤已经十分详细，但要注意的是在安装Hexo之前最好先给npm换源(nodejs的安装似乎也会出现类似的情况，换源就好了)，否则安装可能会出一些奇怪的问题，比如说一直转圈的杠杠。

换源执行以下命令： 

1
npm config set registry https://registry.npmmirror.com

之后应该就没什么问题了。

建站

依旧还是说文档很全，当你执行完npm install的命令后，你的网站就已经搭建好了，之后的工作就是去美化你的网站。当然你可以先看一下hexo给大家提供的默认网站的样子。 执行以下操作： 

1
2
hexo clean
hexo s
打开http://localhost:4000/你就可以看到当前的网站了，因为我没有保存网站的图片所以就不放了。

配置

打开根目录(也就是你hexo下载的那个文件夹)，找到_config.yml文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 言出法随的blog
subtitle: '记一记每日生活和学习的感想唔'
description: '每一个不曾起舞的日子，都是对生命的辜负'
keywords: Frost,dailylife
author: YHFrozen
language: zh-CN
timezone: 'Asia/Shanghai'

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://yhfrozen.github.io
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

其中title就是blog的名称，subtitle则是对blog的简短介绍，description可以写自己的座右铭，key words有点类似QQ的标签，author就是你的昵称，language选择zh-CN，timezone选择'Asia/Shanghai'，url就写自己的xxx.github.io.

github

接下来就是该如何把自己的blog托管在github page上面。你当然可以先hexo clean&&hexo g，把生成的public文件夹自己手动push到github上。显然这比较麻烦。幸运的是hexo提供了自动化的工具，你只需要输入hexo d就可以自动帮你把public文件夹上传到github上。 首先我们需要安装这个工具。 安装插件hexo-deployer-git 

1
npm install hexo-deployer-git --save
然后再_config.yml中找到deploy字段，更改如下： 
1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:YHFrozen/yhfrozen.github.io.git \\放ssh地址，不要http
  branch: main
现在只需要一行命令就可以帮你自动上传了 
1
hexo clean && hexo d -g # or hexo g -d

hexo常见指令与知识

新建文档
1
hexo new #postname

无需后缀名，hexo会自动在source/_posts下生成相应的.md文档。 例如： 

1
hexo new "welcome to my blog" //如果有空格或特殊字符需要加上双引号

新建页面

hexo 支持建立一些页面，同时也支持对文章进行分类和标签，分类和标签信息都存储在front-matter中。

分类和标签

hexo提供了tags和categories两种页面(当然远不止这两种)，它们都是如下的结构： 

1
2
3
4
5
6
7
8
categories: #分类
- category1
- category2
#...
tags: #标签
- tag1
- tag2
#...
它们的区别在于categories指的是category1下的category2，是严格的父子关系；而tags指的是既是tag1又是tag2，是并列关系。

你可以通过如下指令来建立页面： 

1
hexo new page categories&&hexo new page tags
在source/下会生成相应的文件夹。以tags为例，打开文件夹后会有一个index.md文档，title可以改成你想要的名称，然后在front-matter中添加type: "tags",正文留空，就完成了创建。

关于

同样你可以制作about页面，在前面的基础上在index.md中添加正文部分即可。

常用指令
1
hexo generater

生成静态文件，可以简写为hexo g，这是更新网站的关键步骤之一。

1
hexo deploy

部署到github上，可以简写为hexo d，一般和hexo g连用，写成hexo d -gorhexo g -d.

1
hexo server

启动本地服务器，默认网址是http://localhost:4000/，可以简写为hexo s，你可以把它理解为预览。

1
hexo clean

清除缓存文件(db.json)和已生成的静态文件 (public)。一般在hexo d -g之前都要执行这个命令(hexo s不需要)。

1
hexo new draft #postname

有的时候你要更新一些文章，但其中一部分还没有做完,所以你就最好在写文章前就把它设置成draft,也就是草稿。它的原理是新文章将建立在 source/_drafts 目录下，因此 hexo generate 并不会将其编译到 public 目录下，所以 hexo deploy也不会将其部署到 GitHub。 

1
hexo S --draft
本机预览草稿

Next

next的安装推荐参考官方文档，这里就不说了，因为我没有遇到什么bug。

配置

首先打开_config.yml，找到theme字段，把landscape改成next。 之后就是关于_config.next.yml的配置，推荐参考shwstone大佬的blog。

当然由于next的更新迭代，有一些blog的功能在新版下已经变成了其他样子，这个就靠大家自己在网上找找了。

评论系统

我这里只单独说一下评论系统，我用的是gitalk，基于github page搭建的,其余的比如说twikoo之类最近比较火的评论系统大多是基于verel部署的，和github page不太搭。 gitalk的推荐下载

style

有的时候你会发现next给出的一些模块的颜色、字体之类的你不太满意，这个时候你就需要自己去微调。在_config.next.yml下找到custom_file_path字段，将style: source/_data/styles.styl取消注释并建立相应的styles.styl文件。在这个文件里面你需要运用css去编写。例如设置背景： 

1
2
3
4
5
6
7
body {
 	background:url(/images/background.jpg);// 设定背景图片,images同处于source文件夹下
 	background-repeat: no-repeat;// 设定背景图片非重复填充
          background-attachment:fixed;// 设置背景图片不随页面滚动
          background-position:50% 50%;// 设置背景图片位置
	background-size: cover// 设置保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
}
这就是完全的自定义了，你可以在网站中打开dev tools寻找你想要更改的元素。有一点需要注意的是next似乎给一些元素设置了标签属性，比如.header的颜色的设置的时候就要和下面一样： 
1
2
3
4
5
6
7
// 页面头样式属性
.header {
  // 也可以同时定义背景色
  background-color: #800080 none repeat scroll !important;  
  // 透明度
  opacity: 0.85;  
}
当然其他的一些元素就不用加none repeat scroll !important具体的原因是因为不同选择器的优先级不同，!important会设置成强制优先。

域名购买与设置

对于某些人来说，就比如我，会觉得.github.io不符合胃口，就是想要拥有一个自己的域名。这里记录一下我的购买流程。首先我是在阿里云上购买的，先登录，然后才可以查询域名，进入购买页面。 之后要创建自己的信息模板，需要邮箱、身份证信息。 alt text 购买注册之后进行DNS解析(在控制台界面中)，点击云解析DNS， alt text 点击进入权威域名解析，在操作中选择解析设置，选择第三条(旁边会有提示，A、AAAA、CNAME,选择CNAME),不要选IPv4和IPv6，然后选择www.和@,在记录值中填写你现在的github.io网址。

打开github中的blog仓库，进入Settings选项，点击进入page页面，在最下面的Custom domin中填写你解析好的域名，比如我的就是yhfrozen.fyi，勾选Enforce https项，一分钟左右(可能更少)github会提示你注册成功，这个时候你就真正拥有自己的网站了。 但要注意的是此时你的网站依然托管在github上，也就是说你依旧需要魔法才能登上。如果你想把它搬到内网，你就需要更换国内的服务器，这需要向当地政府做ICP备案.