hexo+github+zeit搭建博客

Hello world!

搭建好了之后，居然鸽了这么久

0x01 写在前面

When you see this page, you can write anything you want!

以前一直认为写博客和写日记一样。

“那写书的人靠不住，我靠谁啊？博主？”
“更靠不住。”
“一群写博客的人。”
“正经人谁写博客啊。”
“是啊。”
“你写博客吗。”
“我不写。”
“你写博客吗？”
“谁能把心里话写博客里？”
“写出来的哪能叫心里话？”
“下贱。”
“下贱。”

可现在越发局得，写博客真不是给别人看的，也不是用来彰显什么的，而是极大有利于自己的。

目前局得写博客至少有以下几个好处：

1. 在写博客的时候，自己会认真梳理所写知识，可以极大地提高自己对相关知识地认知和掌握程度。
2. 规定自己定期更新博客，可以起到督促自己学习地作用。
3. 以前写在博客里的知识，在不久的将来忘了，可以很好的复习，一方面可以快速找到，另一方面看自己写的比看别人写的要爽很多。
4. 博客就像一个自由化的笔记本，只有有智能设备和网络，你随时可以访问自己的知识，而不用局限于某个地理位置。
5. 有了博客之后，当你突然有灵感时，有一个可以书写自己想法，且日后很容易搜寻到的地方。
6. 开放搜索的博客，还可以和志同道合的朋友一起进行相关知识的讨论，促进共同的进步。
7. 。。。。。。。（欢迎补充

在此，由衷地感谢我的朋友 minhal【CTF/逆向/网络安全大手子/双一流/人帅声美/单身可撩】。

在他给我的帮助、安利和鼓励下，使我迈出了这难得的第一步。（虽然菜的一批，花了很多时间。

0x02 blog搭建的踩坑记录

“物资”准备

所谓兵马未动，粮草先行。先来看看需要准备什么。本次搭建的blog所需要的“物资”及其简单，并且迁移方便。

必须的物资： Github 账户，一个PC，会一些基本的linux命令，会使用基本的markdawn语言。

可选的物资：一个自己的域名、一个服务器和Typora md编辑器（Google、百度你都能下载）。

博客工作原理

本blog是基于hexo的框架的。在自己的某个设备（可以是个人PC、或者服务器、或者虚拟机（推荐））上搭建好相关的服务，然后每次更新blog只需要进行md文件编写，然后运行相关命令，其会自动通过增量发现机制，将本地的文件生成静态网页。然后我们将该静态网页托管于GitHub中，就可以通过访问Github实现对该静态网页的访问。

以上其实就已经实现了基本的功能了。 没特别追求的朋友可以跳过下面的 进阶搭建过程 。

没什么特殊花里胡哨追求的，我个人觉得就已经够了。下面是一些额外的东西，虽然不是必须的，但是会让自己的博客稍微好点。

一方面，上面生成的地址必须是自己GitHub账号下的固定仓库；另一方面，由于众所周知的原因，GitHub国内访问速度比较慢，因此推荐将服务挂载到zeit上面进行托管，可以速度快些。但是他默认生成的域名又较长，难以记忆（不利于我们的优秀博客进行传播）。因此，准备一个自己的域名，然后将DNS解析（zeit可以配置自己域名的DNS解析，和cloudflare有类似的功能）挂在上面会好记一些。（逼格更高）。

基础搭建过程

GitHub仓库的建立

（如果您还没有GitHub账号，请点击这里，进行注册，下面默认您已经有一个GitHub账号）

step1： 登录自己的GitHub，然后点击右上角头像，选择 Your Repositories 标签后，点击 New 标签，新建一个仓库。

step2： 点击 New 标签之后，就会出现下图所示的界面，其中分三步完成仓库的建立。

第一步，构建名字为 yourname.github.io 的仓库，其中 yourname 一定是需要使用你自己的GitHub的用户名。（别问我怎么知道的，我看别人的教程搭建的时候，我也倔强过。）

第二步，仓库一定要选择公开的，即 public。

第三步，点击 Create repository 按钮，仓库构建的完毕。 然后网页会自动跳转到你的仓库页面。

到这里就完成了GitHub仓库的搭建。

hexo的安装

连接到自己的服务器，或者用个人PC开启一个虚拟机（推荐，便与以后迁移，可以直接clone这个虚拟机，而不用再搭建一次）。

这里需要注意的是，我个人使用服务器的Ubuntu18.04和新建的虚拟机Ubuntu18.04 都安装失败了（后期会报错），目前尚不清楚是什么原因，后来使用kali2020的虚拟机，搭建成功的。因此，如果你使用的系统是其他版本，也遇到了类似的问题，不妨试试kali2020.

在终端中输入下面的命令进行hexo和git的安装：

apt-get install npm

apt-get install git

# 若 hexo warning 需要更高版本的 node 和 npm，请自行升级
npm install -g hexo

初始化项目

在该虚拟机的终端中（如果你用的服务器，就是服务器的终端），随便选择一个目录。（建议，新建一个 blog 目录，避免文件纷繁复杂。）在该目录下，运行下列命令，进行项目初始化：

hexo init

等待初始化完毕后，继续在该终端中下面的输入命令，开启本地服务运行，查看效果。

hexo s

然后在你虚拟机的游览器访问 localhost:4000 如果没有出错的话，就可以看到一个demo网页。

部署到GitHub，——让世界都能访问

step1：修改配置文件

接下来，我们就要把上面的运行在本地的服务发布到GitHub仓库中去，让全世界能访问GitHub的地方都能访问我们的 blog 。

在上一步中运行终端的目录下找到文件 _config.yml （这个是离线网页的配置文件），使用任何的你方便的文本编辑器打开，再以你方便的方式，找到 deploy 字段，将其替换为下面的字。！！！请一定修改下面你的GitHub的用户名。！！！

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

step2：安装 hexo-deployer-git 工具

首先，安装工具 hexo-deployer-git ，运行下面的命令进行安装

npm install hexo-deployer-git --save

step3：推送到GitHub仓库中。

安装完毕后，运行下面的两条命令，将项目部署到GitHub上。

hexo clean

hexo deploy

这里如果是第一次使用git的朋友，有可能会让你输入GitHub的账号和密码进行身份验证。

step4：记住密钥

一次两次地输入密钥尚且可以接受，每次更新都得进行身份认证就有点小烦，于是需要将本地的密钥和GitHub建立一个认证。非常详细的配置过程,请移步 这里.

推荐直接用方法2，方法1我没成功。 推荐直接用方法2，方法1我没成功。 推荐直接用方法2，方法1我没成功。

方法1：本地生成RSA密钥，将公钥拷贝到自己的GitHub中进行信任

首先在虚拟机的终端中运行下列命令,然后会得到一份RSA的密钥. 注意,当其询问保存的名字时,直接回车就会保存在默认位置.

#在终端中配置本地git的用户名和邮箱
git config --global user.name "yourname"
git config --global user.email "youremail"

##检查
git config user.name
git config user.email

#生成RSA的密钥
ssh-keygen -t rsa -C "youremail"

然后在自己GitHub账户的网页右上角,点击 setting 字段,进入设置。

然后选择 SSH and GPG keys 后,点击右上方的 New SSH key 。

然后给这个key取一个明显的名字,我这里叫blog。然后将刚才生成的密钥中的公钥文件 id_rsa.pub 用文本编辑器打开,然后copy到GitHub添加SSH key页面的key字段中,保存即可。

方法2: 我使用了上述的方法几次都失败了,于是我采用了利用账号密码的方式.

如下图，找到当前运行过git终端的文件夹(我的是blog根目录下),然后打开 显示隐藏文件 。

移步到 blog/.deploy_git/.git/ 目录下,找到 config 文件,然后用文本编辑器打开,添加下列的字段。保存后,再登录一次,就会记住用户名和密码了.

[credential]
     helper = store

检验是否建立成功.

建立完毕之后,可以使用下面的命令检测是否密钥使用成功.

ssh -T [email protected]

成功的话会打印下列信息

Hi yourname! You’ve successfully authenticated, but GitHub does not provide shell access.

查看效果

在任意一个有网并且能够访问GitHub的地方，打开浏览器，输入下面的网址 （请先修改为你自己的GitHub的用户名）

https://yourname.github.io/

在上面的都搭建完毕，并且没有错的情况下，你将会看到和之前的离线访问一样的demo。恭喜你！成功让世界都能访问你的demo了！

创建自己的新文章

咱不是为了搭建blog而搭建blog嘛。这搭建完毕了，自然得知道该如何编写新的博文撒。

命令如下：

// [layout] 为布局，可选项为 `post`、`page`、`draft`，这将决定文章所在文件路径。
// <title> 为文章标题
// 如 hexo new post 除了帅气，我还有啥！
hexo new [layout] <title>

在运行了上面的命令之后，你就可以在 blog/source/_posts/ （我的根目录就是 blog ）目录下看到 名字为 <title>.md 的md文件，你可以直接修改这个md文件，然后再运行 3.4 中的 step3 的命令，即可把新建的md生成新的静态网页的blog内容发布上去。

添加页面

在网站中还可以为不同的位置生成多个不同的页面，如：标签页、友链页等。

使用命令 hexo new page tags

可以生成 tags 页面，在 source/tags/index.md 可以对此页面的参数进行修改。

最后，到这里就已经可以实现最基础的，编写blog，并且让别人都能够访问blog了。如果没特别追求的朋友可以跳过下面的。

参考连接

使用hexo搭建blog：https://www.jianshu.com/p/390f202c5b0e

GitHub官方指导连接: https://docs.github.com/cn/github/authenticating-to-github/connecting-to-github-with-ssh

记住用户名账号: https://www.cnblogs.com/L-Arikes/p/4686859.html

minhal: https://minhal.me/2020/05/08/hexo-github-zeit-Blog/

ZEIT 托管

正如前面所说，GitHub的方式搭建自己的blog本来已经很不错，比较完美了，但是鉴于某些原因，国内访问GitHub的速度，总是有些小瑕疵。这里使用zeit托管的方式.用于加速.

注册/登录

进入 ZEIT 后使用自己的GitHub账号进行关联登录.

导入项目

1. 登录完成之后,在当前页面寻找 Import Project 按钮
2. 然后选择 Import Git Repository 下面的 continue 选择导入GitHub的项目, 导入刚才前面的仓库即: yourname.github.io
3. 下图中的 placeholder 已经写的很清楚需要输入什么了.(https://github.com/yourname/yourname.github.io)
4. 然后一路默认点就行.最后会给你生成一个域名,你再用任意一个能访问GitHub的浏览器打开这个网址,就可以看到和前面一样的demo效果.

域名修改

生成的这个域名也太丑了,并且又长又难记诶,这显然不利于我以后写的优秀blog的传播啊.

没有域名的童鞋,先拥有一个自己的域名再进行下面的操作. 出门Google有付费的域名(阿里云/华为云/腾讯云都有卖),也有免费的域名(这个似乎挺不错的freenom).

step1: 在ZEIT里面点击上方的 Domains 进行域名的配置,没有自己域名的这个地方有个 buy 按钮,似乎这里也可以买?

step2: 然后点击 add 标签，然后选择本次的实验仓库，continue 后,输入自己的域名并确定.

step3: 添加相应的, A记录, CNAME记录等。如下图，我添加了A记录，同时添加了CNAME记录。将WWW和blog都映射到同一个网站。

(关于域名的配置问题不是这里的重点,可能需要提醒的地方就是需要到你购买域名的地方的管理页面,将DNS解析设置为第三方的DNS,这里就是将ZEIT的DNS的字段贴进去.) 可以参考官方文档

step4: 然后访问自己的域名就可以发现已经重定向到了自己刚才搭建的GitHub上的blog的demo了。DNS解析更新有时候有几分钟的延时，如果这样做了，仍然没有反应的话，可以等待几分钟再试。

主题切换

推荐官方主题网站，可视化展现，选择自己所爱，按照对方所述搭建即可。

只是在配置的过程中需要注意，yml中有些时候字符可能存在引号等会触发歧义，需要用引号包裹起来或者进行引号转义。

添加评论系统

一个好的blog少了评论系统，怎么和自己的读者进行和谐的沟通呢？所以，咱得整一个。（from minhal

1. 注册 LeanCloud (这似乎需要手机号，介意的请选择 国际版 但似乎要梯子，笔者用的国际版)。

2. 点 get start free 然后注册账户，用邮箱就好。

3. 然后会看到下面的界面，先去验证邮箱，然后点击创建新应用。

   

   选择 Developer 免费就好。

   

   然后长这个样子

   

4. 设置 APP ID 和 APP KEY

   点击右上角这个图标，进入设置

   

   然后长这个样子，很显然可以看到 AppID 和 AppKey 。

   

   然后复制这俩玩意，到对应的配置文件中添加。（安装 hexo 的机器中

   笔者这里是在 butterfly 主题的 yml 文件中直接添加并启用 valine 。详情请参考对应主题的配置教程。

   

5. 安全中心添加博客域名

   然后就点左边的安全中心 Security ，然后添加自己的博客的域名地址。记得保存。

   

6. 提交并保存应该就可以了。望顺利。

   至少我是可以了。

   

设置文本加密

写点废话

有些时候有的文本不想完全公开，因此对某些文本进行加密的方法就应运而生了。

通过对某些博文进行加密可以使得不想完全公开的博文必须要必须拥有口令的人才能查看。

根据官方的说法，他们是通过AES来进行加密的，同时还会检验密文是否被篡改。如果官方所说属实，并且官方没有犯一些不必要的错误，则这个插件的安全性还是足够的。但是还是不要把太私密的东西放上去，毕竟，是吧。

安装插件

在环境中，这里是 kali 中，运行下面的命令，安装插件。

npm install hexo-blog-encrypt --save

设置启用

在博客根目录的 yml 中，添加下面的文字，可以适当修改。

# 文章加密
encrypt:
  enable: true
  abstract: 这是一篇加密文章，内容可能是个人情感宣泄或者收费技术。如果你非常好奇，请与我联系。 # 预览显示文字，可能与主题中的description会冲突
  message: 输入密码，查看文章。 # 觅马输入框前面的提示文字
  wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

然后在你需要加密的博文的头部添加合适的字段如下

---
title: 哪些事er # 文章标题
date: 2020-12-11 23:39:31 # 文章创建时间
cover: https://cdn.jsdelivr.net/gh/qriosa/picgo-blog/img/thing.gif # 文章显示的缩略图
password: 123456 # 解密此文章的觅马
categories: 杂项 # 文章所属分类
tags: # 文章所属 tag 标签
	- 杂项
---

然后就是这样了

参考

参考连接： https://blog.csdn.net/cungudafa/article/details/104346521

官方 Github： https://github.com/D0n9X1n/hexo-blog-encrypt/blob/master/ReadMe.zh.md

添加搜索功能

说点废话

本来这个模块应该根据不同的主题来进行设定的，但是我在配置的过程中遇到了不少的坑，因此在这里记录一下，以备不时之需。

本博客是使用的 hexo-algoliasearch 本来先尝试了 hexo-algolia 但是安装之后，编译报错了。然后尝试了前者就一瞬成功了。

两个都是可以的，只是前者不用设置环境变量，后者必须设置环境变量。

注册账户 algolia

algolia 点击注册。

然后验证邮箱之后登录进去。遇到了一个有意思的信息填写界面，于是记录了一下，实测信息可以乱填，电话可以不填。

然后应该是选择某个位置的服务器作为数据中心吧，这里我选 Hong Kong，理论上和图上都显示它的延时最低。

然后在欢迎界面中有一些介绍，有兴趣的可以看看，没兴趣的可以点右下角直接新建一个 Index 。

然后设置一个名字 这里我就叫做 blog 好了。

然后点击左侧的 API Keys 里面可以看到自己的这几个信息，先把页面留在这里，后面需要使用。

然后是创建有哪些搜索的内容。

然后查看 各个 key

安装、配置 hexo-algoliasearch

本来按照 官方链接 装就好了，但是我这里还是讲一下自己的安装过程吧。

在 kali 博客根目录下运行命令 npm install hexo-algoliasearch --save 安装包。

npm install hexo-algoliasearch --save

然后在博客根目录的配置文件 _config.yml 中进行添加配置。

plugins:
  - hexo-algoliasearch

然后再在这个文件中再添加下面的配置

# search
algolia:
  appId: '前面的 Application ID' 
  apiKey: 'Search-Only API Key'
  adminApiKey: 'Admin API Key'
  chunkSize: 5000
  indexName: 'blog' # 这就是我前面设置的哪个index的名字
  fields: # 下面这些我也是按心情改的，应该就是有哪些搜索的范围吧
    - content:strip:truncate,0,200
    - excerpt:strip
    - categoriesh:strip:truncate,0,200
    - archives:strip:truncate,0,200
    - about:strip:truncate,0,200
    - link:strip:truncate,0,200
    - tags:strip:truncate,0,200
    - title:strip:truncate,0,200

然后进行编译

hexo algolia

在主题配置中启用该搜索

我用的 butterfly 直接在配置主题配置文件（不是博客根目录哪个哈） _config.yml 中选择 true 就可以了。其他的应该也是类似的。

参考

butterfly：https://butterfly.js.org/posts/ceeb73f/#%E6%90%9C%E7%B4%A2%E7%B3%BB%E7%B5%B1

hexo-algoliasearch： https://github.com/LouisBarranqueiro/hexo-algoliasearch

文章置顶

只需要在每个文章的顶部设置 sticky: 1 即可，设置的数值越大，优先级越高。

0x03 总结

本来没有这个总结，但是后来觉得似乎缺少了什么，于是来补充一个。

希望这篇博客能够帮到你。-_-

苟富贵