本文主要讲述如何搭建Hexo纯静态个人博客

相对于 WordPress 的优势:

不需要购买虚拟主机搭载

支持 MarkDown 语法,支持本地编写、预览和最终发布(Git Push)

本文涉及的技术点:

🚆 Github Pages (搭载服务)、Coding (搭载服务)、Vercel(搭载服务)、LeanCloud (存储服务)

💺 Hexo(博客框架)、ButterFly(博客主题)

🚀 DNSPod (域名解析加速)、jsDeliver (CDN资源加速)

💡  PicGo(图床工具)、PicGo-Plugin-Watermark(图床水印插件)

准备工作

  1. 一个国外域名(国内域名需备案) 访问 NameSilo 域名提供商

  2. Windows 系统安装 Git

    下载 Git        安装 Git 教程        
  3. Windows 系统安装 Node.js(建议使用 12.0 及以上版本)

    下载 Node.js 安装 Node.js 教程
封面图

博客框架

安装Hexo

选择一个文件夹作为博客的根目录文件夹,在文件夹内右击,选择 Git Bash Here

Git Bash Here


打开后输入下方代码,修改 npm 的安装源为 淘宝NPM镜像

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

开始安装

1
$ npm install -g hexo-cli

初始化Hexo

git bash 中输入hexo init 你的博客名称

1
$ hexo init leopold

根目录会创建一个 你的博客名称 的文件夹

创建博客


进入该文件夹, cd 你的博客名称

1
$ cd leopold/

文件及文件夹说明:

文件及文件夹说明


启动Hexo

git bash 中输入

1
2
$ hexo g # generate 编译生成静态文件至 public 文件夹
$ hexo s # server 启动本地预览

输入 http://localhost:4000 ,能正常访问,则启动成功

hexo部署成功的页面


博客仓库

GitHub创建个人仓库

登录GitHub ,选择 New

GitHub创建仓库


其中,Repository name 填入 你的GitHub用户名.github.io,其余默认,点击 Create repository 完成个人仓库的创建

注意,必须以 你的GitHub用户名 为仓库名称,否则无法搭载 GitHub Pages 服务

GitHub创建仓库


生成SSH密匙

git bash 中输入如下命令

1
2
$ git config --global user.name "你的GitHub用户名"
$ git config --global user.email "你的邮箱"

生成密匙,一直回车即可(生成过的请注意输入 Y 确认覆盖)

1
$ ssh-keygen -t rsa -C "youremail"
【选读/点击查看】ssh-keygen 的参数含义是什么?为什么要输入邮箱?

【StackOverFlow】:

The email is only optional field to identify the key.
邮箱仅仅是识别用的key

When you create the ssh you type (for example):
ssh-keygen -t rsa -C “any comment can be here”
当你创建ssh的时候

-t = The type of the key to generate
密钥的类型

-C = comment to identify the key
用于识别这个密钥的注释

So the Comment is for you only and you can put anything inside.
Many sites and software are using this comment as the key name.
所以这个注释你可以输入任何内容,很多网站和软件用这个注释作为密钥的名字


在电脑中找到新生成的公匙,用记事本打开并复制公匙id_rsa.pub)中的内容

注意,不要复制私匙(id_rsa),只需要将公匙提供给 GitHub 即可

顾名思义,私匙,就是你私人的东西,不会提供给任何人。私匙可以将消息加密(数字签名),任何拥有你的公钥的人都可以验证签名是否与消息匹配,因此,GitHub 仅需要你的公钥,即可检查你是否是本人发送的消息。

通俗的讲,私匙就是你的钥匙,而公匙就是你的锁,GitHub 就是你家的门。首先,有锁就有钥匙,因此公匙和私匙是一对。其次,你只需要把锁装在门上(公匙提供给 GitHub),用你的钥匙开你家的锁(公匙验证数字签名是否匹配),你才能通过们进入(匹配成功)。想必,没有人把自己家的钥匙安在门上,也没有人随意地把钥匙扔给别人。这个例子虽然不严谨,但是能帮助理解就行了。

参考:A private key,as its name indicates, is private. It’s yours and yours only. You should never give a private key to anyone. Your private key allows you to sign a message. You then send the message with its signature,and anyone having your public key can verify that the signature matches with the message. That’s the principle of public key cryptography. So Github only needs your public key to check that you’re the one you claim to be.


登录GitHub,右击你的头像,选择 Settings

GitHub-打开设置


找到 SSH and GPG keys ,选择 New SSH Key

GitHub-新建公匙


Key 中填入刚才复制的公匙,选择 Add SSH Key

GitHub-添加公匙


验证是否添加成功

1
$ ssh -T git@github.com

验证是否添加成功


部署

由于黑人事件爆发,GitHub 的默认分支由 master 变更为 main ,因此我们也默认同步提交到 main 分支

打开 _config.yml,找到文件最后一行的 deploy ,输入如下内容

1
2
3
deploy:
type: git
repo: https://github.com/yourGithubName/yourGithubName.github.io.git,main # yourGithubName请自行替换为你的GitHub用户名

_config.xml配置文件


安装 hexo-deployer-git

1
$ npm install hexo-deployer-git --save

清除现有渲染文件(clean),重新渲染文件(generate),部署至 GitHub(deploy

1
$ hexo clean && hexo g && hexo de

提交成功后访问你的GitHub用户名.github.io 即可

如果你提交时报错【remote: Permission to XXXA/xxxx.git denied to XXXB】
说明你电脑使用 Git Bash 配过 SSH ,系统已经将指向 github.com 的用户设置为了 XXXB ,每次 push 操作的时候,默认读取保存在本地的用户 XXXB
快速解决方法为:在 Windows 凭据管理器中删除 GitHub 凭证即可

管理 Windows 凭据

管理 Windows 凭据


域名加速

修改DNS服务器

为了加速网站域名访问和智能解析,我们使用腾讯的 DNSPod 加速域名访问,并指向博客

 登录DNSPod官网

选择 DNS解析 -> 我的域名 -> 添加域名,输入你的域名

添加域名


添加完成后能看到 状态 栏里的 DNS 错误 ,我们需要去域名注册商处修改 DNS 服务器

请自行前往各自的域名服务商处修改 DNS ,下方提供 GoDaddyNameSlio 的修改教程

进入 GoDaddy 后台 ,选择 DNS

修改DNS


找到 域名服务器 ,点击 更改

修改DNS


点击 输入我自己的域名服务器(高级) ,将 DNSPod 提供的地址覆盖到 Godaddy

修改DNS


修改DNS

注意:更改成功后可能需要等待数小时(5分钟)才能生效,每个域名服务商的刷新时间不等

进入 NameSlio 后台 ,选择 DNS

修改DNS


点击你的域名

修改DNS


找到 NameServers ,点击 Change

修改DNS


输入 DNSPod 提供的 NameServer 地址,点击 SUBMIT

修改DNS

注意:更改成功后可能需要等待数小时(5分钟)才能生效,每个域名服务商的刷新时间不等

解析域名

修改完 DNS 服务器后,在 DNSPod 中,按照下图添加记录,其中,记录值填入 你的GitHub用户名.github.io

解析域名


GitHub Pages

进入 GitHub 的博客仓库,选中仓库的 Settings

Settings


在左侧 Options中, 找到 Custom domain ,输入你的域名后,点击 Save,勾选 Enforce HTTPS

解析域名


在博客文件的 Source 中,创建一个文件 CNAME ,输入你的域名

注意,此文件不能有文件后缀

创建CNAME


最后在 Git Bash 中再次提交,注意养成习惯,先删除,在生成,最后提交

1
$ hexo clean && hexo g && hexo de

等待数分钟后访问你购买的域名即可


搭载服务

已备案域名 建议选择 境内分发 Coding + 境外分发 GitHub Pages

未备案域名 建议选择 Vercel

作者建议 无论是否备案都选择 Vercel

【选读/点击查看】为何无论是否备案都建议选择 Vercel ?

根据查阅网上资料发现,GitHubCoding 有时会无法访问,搭载服务并不稳定。因此我选择了 Vercel 作为博客的搭载服务。由于在境内(台湾)设有服务器,境内访问在1-20ms左右。不仅如此,每月还有100G的加速服务,博客多域名绑定(支持子域名),以及自动申请 Let's Encrypt 证书,自动同步 GitHub 仓库部署(可私有化 GitHub 仓库)。

在本地测试 SSL 握手的响应时间也非常短

1
> curl -w "TCP handshake: %{time_connect}, SSL handshake: %{time_appconnect}\n" -so /dev/null https://leofit7.com

TCP握手时间

登录 Vercel 官网 ,登录方式请选择 GitHub 登录。

Vercel 注册账号时请不要使用 QQ 邮箱,Vercel 无法解析,导致验证邮件不可达。

进入后台面板,选择 New Project

Vercel-创建仓库


选择 GitHub 中的博客仓库,选择 Import

Vercel-导入仓库


选择你的 GitHub 账户 ,点击 Select

Vercel-选择账户


确认无误后,点击 Continue

Vercel-确认导入仓库


FRAMEWORK PRESET 选择 Other,点击 Deploy

Vercel-部署仓库


可看到博客搭建完毕,下面我们绑定自定义域名,选择 Open Dashboard

Vercel-部署结果


选择 Settings => Domains

Vercel-设定域名


填入你买的域名后,点击 Add

Vercel-设定域名


可以看到错误信息 Invalid Configuration ,需要添加 CNAME 记录

Vercel-添加CNAME


 登录 DNSPod 官网 ,按照你的 DNS 地址填入即可

添加CNAME


添加记录后,Vercel 会自动帮你申请 Let's Encrypt 的证书,并为我们自动续期,申请成功后会邮箱告知

Vercel-证书


至此,Vercel 搭建博客就告一段落,由于是 GitHub 方式登录,即便仓库私有也能自动部署,因此保险起见,建议把 GitHub 仓库设为私有 ~

GitHub私有化仓库

【选读/点击查看】为何已备案域名建议选择境内 Coding 、境外 GitHub Pages ?

首先,GitHub Pages 在境内访问较慢,在境外访问较快,因此我们需要对访问进行分流。

对于境内而言,我们采用 Coding 搭载博客,在设定已备案的自定义域名后,Coding 会自动申请 Let's Encrypt 的证书和境内的 CDN 加速。

对于境外而言,我们采用 GitHub Pages 搭载博客。

在使用境内分流至 Coding 后,可以看到 Ping 值平均26左右 。

Ping


在本地测试 SSL 握手的响应时间也非常短

1
> curl -w "TCP handshake: %{time_connect}, SSL handshake: %{time_appconnect}\n" -so /dev/null https://yusong.site

TCP握手


问题一:为何要已备案的域名,未备案的不行吗?

Leopold:经过测试发现,未备案的域名在 Coding 部署时,只能选择香港节点,而香港节点的 CDN 加速服务在境外(America),导致境内访问很慢,甚至比 GitHub Pages 还要慢2-3倍。

问题二:既然已备案了,为何作者还要推荐 Vercel 呢?

Leopold:根据查阅网上资料发现,GitHubCoding 有时会无法访问,搭载服务并不稳定。因此我选择了 Vercel 作为博客的搭载服务。由于在境内(台湾)设有服务器,境内访问在1-20ms左右。不仅如此,每月还有100G的免费加速服务,博客多域名绑定(支持子域名),以及 Let's Encrypt 证书自动申请等。

一、创建代码仓库

登录Coding官网 ,选择 项目 -> 创建项目

创建项目


选择 代码托管项目

代码托管项目


输入你的 项目名称项目标识 后,点击 完成创建

创建仓库


进入新建的仓库,选择 代码仓库 ,点击 新建代码仓库

新建代码仓库


点击 导入外部仓库 ,登录并进入 GitHub 的博客仓库,将仓库 HTTPS git 地址复制到 Git 仓库 URL

复制Git地址


导入外部仓库


二、集成部署

导入完成后,我们需要开启仓库的 集成部署功能 ,点击 项目设置


点击 项目与成员 -> 功能开关 ,开启 持续集成持续部署

开启集成部署功能


重新进入 Coding 仓库,选择 持续部署 -> 静态网站 ,按照提示完成必要的 配置腾讯云权限实名认证 后,选择 新建静态网站

新建静态网站


按照如下图配置

注意:网站类型请选择静态网站,节点选择非香港区域即可

新建静态网站


部署成功后点击 访问 ,验证是否部署成功

新建静态网站


三、绑定域名

不难发现,博客(存储桶)的 URL 是 Coding 提供的,我们需要自定义域名访问

进入该博客部署后台

进入部署后台


选择 自定义域名 -> 新建域名 ,输入你的域名

设定自定义域名


添加域名后,我们需要将域名指向 Coding 提供的地址

登录DNSPod控制台 ,添加一条记录

注意:线路类型选择境内

添加记录


将原先添加的 GitHub 记录中的线路类型改为境外

更改GitHub记录为境外


这样,我们就实现了境内访问 Coding ,境外访问 GitHub

四、Hexo 提交至 Coding

Coding 头像右击,选择 个人账户设置 -> SSH公匙 -> 新增公匙

添加公匙


复制你的公匙并填入,步骤和 GitHub Pages 里一致

添加完成后,找到 HTTPS 拉取 Coding 的地址

获取Coding-Git地址


打开博客的 _config.yml 文件,在 deploy 处添加如下图的代码(请自行更换为你的拉取地址)

注意:不要忘记,main

_config.yml


五、验证

我们是如何知道,境内访问的域名是 Coding 部署的,还是 GitHub 部署的呢?

首先需要刷新 DNS Windows 下打开 Cmd(Win + R , 输入 cmd )

1
> ipconfig/flushdns

刷新DNS缓存


其次 ping 你的域名

1
> ping yusong.site

可以看到境内平均响应时长很低

接下来我们尝试更改博客的 Title ,测试是否部署成功

更改 _config.ymltitle

设定Title


Git Bash中执行如下命令:清除缓存、渲染文件、提交文件

1
$ hexo clean && hexo g && hexo de

此时看到代码上传到 Coding 后自动部署

自动部署


部署成功后访问域名,可以看到成功更改标题

验证结果



博客主题

本章节不详细描述如何配置 ButterFly 主题,详情请见 ButterFly主题教程

如需更多 ButterFly 主题 和 Hexo 框架帮助,详情请见 常见错误合集       


资源加速

本章节主要讲述 CDN 资源加速

由于七牛云需要域名备案,而且使用 HTTPS 协议的 CDN 加速会产生额外费用,因此我们使用 jsDelivr 来加速

2022-02-20 Update 注意:此处已不在建议使用 jsDelivr 来加速与搭建图床,原因是它在大陆节点的加速节点已于2022年1月份失效,并且很有可能会和github的结局一样,被ban的日子属于倒数阶段,目前jsDelivr将大陆访问转移至最近的香港节点,导致访问速度骤降。如果你的域名已备案,访问量低,建议选择国内大厂图床(又拍云),或者使用 oss 存储(腾讯云对象存储),访问量低的话一个月最少1分,最多几块钱。如果你的域名没有备案,有visa的话可以选择 aws等国外服务商。因此,抛开问题寻求本质,如果你的网站是博客,访问量只有国内用户,还是建议备案,如果闲麻烦,可以买一个便宜的域名先备案着,专用于cdn加速用,如果你的访客既有国内和国外用户,果断选择含国内加速节点的国外服务商。如果你有其他免费的未备案图床解决方案,欢迎评论,目前博主还是再用jsDelivr,毕竟我的博客没有人看 -,- !

登录GitHub ,新建一个仓库 ,如下图所示

GitHub-新建仓库


创建完成后,复制 HTTPS Git 地址

GitHub-复制Git地址


选一个用于存放静态资源的文件夹,打开 Git Bash ,输入:

git clone 你刚刚新建的 CDN 仓库地址

例如:

1
$ git clone https://github.com/leopold7/CDN.git

拉取成功后,将你的静态资源文件,放入至拉取后的文件夹,提交即可

例如,我们在 CDN 文件夹中新建一个文件夹 images ,放入一张名字为 marver-1 的图片

放入图片


此时,以 CDN/ 为根目录,则这张图片的相对路径为 /images/marver-1.jpg

接下来我们提交下文件

1
2
3
4
5
cd CDN/  # 进入CDN文件夹,或者直接在CDN文件夹里打开Git Bash
git status
git add .
git commit -m '第一次提交'
git push

如果你提交时报错【remote: Permission to XXXA/xxxx.git denied to XXXB】

说明你电脑使用 Git Bash 配过 SSH ,系统已经将指向 github.com 的用户设置为了 XXXB ,每次 push 操作的时候,默认读取保存在本地的用户 XXXB

快速解决方法为:在 Windows 凭据管理器中删除 GitHub 凭证即可

此方法仅针对 HTTPS 方式拉取文件,当你再次执行 git push 时,会提示输入账号密码

使用 SSH 方式拉取的文件,即便删除 Windows 凭证也无效,需要重新将公匙提交给 GitHub,详见章节【3.2】

提交成功后,我们通过浏览器访问下这个文件地址

https://fastly.jsdelivr.net/gh/你的GitHub用户名/仓库名@分支名/文件路径

例如:https://fastly.jsdelivr.net/gh/leopold7/CDN@main/images/marvel-1.jpg

如果你了解 Releases ,可自行添加版本号,此处不详述


图床工具

安装PicGo

PicGo 就是自动把本地图片上传,并转换成链接的一款图床工具

进入 GitHub 个人设置 ,选择 Developer settings

开发者选项


选择 Personal access tokens -> Generate new token

生成tokens


Note 中随便填入,勾选 repo ,点击 Generate

设定权限


添加完成后,将 tokens 复制到记事本中,因为它仅显示一次

下载 PicGo

版本:2.3.0
链接:https://pan.baidu.com/s/1n7Glx2fFfTsi7ZKMnRyPNA
提取码:s30x

GitHub 下载较慢,Gitee 暂未发现下载链接

链接:https://github.com/Molunerfinn/PicGo/releases

安装并打开,选择 图床设置 -> GitHub图床

  • 设定仓库名 :GitHub 用户名/仓库名
  • 设定分支名 :main(默认为 main 分支)
  • 设定 Token :上一步创建的 Personal access tokens
  • 指定存储路径 :上传到指定文件夹内
  • 设定自定义域名 :上传完成后生成的图片链接域名 https://fastly.jsdelivr.net/gh/GitHub用户名/仓库名@main

PicGo设置


搭配Typora

Picgo 搭配 Typora 可实现智能上传图片,以及自动替换 MarkDown 中的图片链接功能

打开 Typora,选择 文件 -> 偏好设置 -> 图像,其中

  • 上传服务:选择 PicGo(app)
  • PicGo 路径:填入PicGo 绝对路径

填入后点击验证图片上传选项,测试是否连通

Typora设置


配置完成后,我们可直接在 Typora 中,右击图片,选择 上传图片

上传图片


上传成功后,Typora 中的资源地址就会自动换成 GitHub 图床的地址

地址自动更换


简直太方便了有木有,快给这款软件一个 Star 吧!!! ★ PicGo  ★ Typora

水印插件watermark

相对于 WordPress 强大的插件库而言,PicGo 里的插件库显得有些薄弱,仅包含“任意放置文字和图片”,并没有透明度功能,总之,麻雀虽小,五脏俱全

打开 PicGo ,选择插件设置,在搜索框中输入 watermark,点击安装即可

水印安装

【选读/点击查看】watermark 插件安装太慢的看这里

原因:三个平台的 sharp 包都内置,导致插件过大,安装缓慢。

解决:手动安装

环境: Node.js 14.15.0 Python 2.7.18 VS2019 16.8.4

Node.js 选择大于 8.0 的版本即可,这里推荐使用 gnvm 完美切换版本

Visual Studio 2019 安装时勾选 使用C++的桌面开发

Visual Studio 2019


【选读/点击查看】Visual Studio 2019 下载太慢的看这里

如果下载 Visual Studio 2019 太慢,请修改 hosts 文件(路径:C:\Windows\System32\drivers\etc\hosts

首先获取加速IP ,如下图所示,加速 IP 为 93.184.215.201

加速域名解析

hosts 中填入加速ip 空格 download.visualstudio.microsoft.com

例如

1
93.184.215.201 download.visualstudio.microsoft.com

无法保存的请先启用写入权限

修改hosts文件的权限

环境准备完毕后进入插件目录 cd {your-plugins-root-path} ,可以在 PicGo 设置中点击 打开配置文件,配置文件所在文件夹就是插件目录

打开PicGo配置文件

读取PicGo配置文件路径


1
2
> cd C:\Users\****\AppData\Roaming\picgo 
> npm install picgo-plugin-watermark

手动安装PicGo


安装完成后重启 Picgo ,即可在 插件设置 中看到 picgo-plugin-watermark

查看插件是否安装成功


P.S.

  • 插件在 启用/禁用 时需要重启 PicGo
  • 安装后无法找到插件的请确认是否安装成功,若无效可尝试替换安装命令为 npm install picgo-plugin-watermark --save (添入 package.json ),
  • 无法上传的时候学会看错误日志,有时候是因为水印插件的问题,有时是因为文件已上传过,由于没有配置 时间戳命名,导致无法上传同路径下的同名文件,请读者自行甄别错误信息

右击插件 右下角 的 设置图标,打开 配置plugin - watermark ,填入水印规则即可使用

配置名 例子 备注
字体文件路径 /Users/fonts/Arial-Unicode-MS.ttf 字体文件路径;水印中有汉字时,此项必须有
水印文字 hello world 默认只支持英文水印,中文支持需要自行导入中文字体文件
字体大小 14 默认14
水印图片路径 /Users/watermark.png 优先级大于文字
水印位置 rb export enum PositionType {
lt = “left-top”,
ct = “center-top”,
rt = “right-top”,
lm = “left-middle”,
cm = “center-middle”,
rm = “right-middle”,
lb = “left-bottom”,
cb = “center-bottom”,
rb = “right-bottom”
}
最小尺寸 200*200 原图最小尺寸,小于这一尺寸不添加水印
高度或宽度任何一个小于限制,都会触发

水印设置


数据存储

P.S. 2023-02-23 此处作者已不再建议使用LeanCloud存储,国内版需备案,国际版也已于半年前不支持国内访问,作者已经转向了Gitalk,仅国外访问。

博客的评论采用 Valine 评论插件,评论存储采用 LeanCloud 国际版

作者建议直接使用 LeanCloud 国际版,虽然官网访问真的很慢很慢……

注意,如果使用 LeanCloud 国内版,请确认你的域名已备案,下方提供了 国内版国际版 的教程

【选读/点击查看】LeanCloud 国内版转国际版

登录LeanCLoud国内版 ,进入你的评论应用后,选择 存储 => 导入导出 ,点击 导出 后,官方会以邮件形式发送下载链接

LeanCloud国内版导出


注意:根据官方解释,导出和导入的格式原本都是 JSON 数组,后来为了便于导出数据后自行处理(以行为单位处理更方便),导出改成了 JSON Lines 格式,但导入没有及时跟进(截止于2021年1月26日)

所以直接导出后的 JSON 是没有办法直接导入的,我们需要手动的改成 JSON 数组格式

除了最后一行数据外,每行后面填入一个 英文逗号 ,最后用 英文中括号 包裹即可

例如:

1
2
3
4
5
[
{ type : one },
{ type : two },
{ type : three }
]

请直接把产品部扔出窗外蟹蟹-,-!我导入好几遍都是0条,同类功能还能开发一半的。。。

创建应用

注册并登录 LeanCLoud 国际版

右上角进入控制台,确定节点为国际版后,选择 创建应用

LeanCloud国际版创建应用


应用创建完成后,点击创建应用卡片右下角的设置图标按钮,进入到应用设置面板,选择 设置 => 应用Keys ,复制你的 AppIDAppKey

复制AppID和AppKey


打开博客主题配置文件 _config.butterfly.yml ,找到 comments ,在 use 处添加一条 - Valine ,开启 Valine 评论

配置Valine


然后将 AppIDAppKey 这两个属性值复制到 valine 对应处

配置Valine


本地启动博客,能看到评论功能正常启动 ,且出现 来发评论吧~ ,无其他错误码

验证是否配置成功


域名绑定

选择 设置 => 域名绑定 ,点击 绑定新域名

域名绑定


输入一个未使用的子域名,比如 comment.leofitz7.com ,其余默认,点击 绑定

域名绑定


可以看到 等待配置 DNS ,我们需要去域名提供商处添加一条记录,指向 CNAME

配置DNS


对应填入即可

添加记录


可以看到状态为 已绑定

验证绑定是否成功


为了防止他人调用( API 三万次 HTTP 调用免费),我们绑定博客的域名

选择 设置 => 安全中心 ,将博客的域名填入 Web 安全域名

设定Web安全域名


评论管理

想要开启评论管理,我们需要部署 Valine-Admin

打开 云引擎 => WEB => 部署 ,选择 部署项目

部署Valine-Admin


点击 Git 部署 => 配置 Git

部署Valine-Admin


Git remote URL 中输入链接 https://github.com/DesertsP/Valine-Admin.git ,点击保存即可

部署Valine-Admin


刷新页面后选择 部署

部署Valine-Admin


访问刚刚绑定的域名,可看到评论管理页面能正常访问

验证部署Valine-Admin是否成功


不难发现,评论管理页面需要账号密码,因此我们需要创建一个管理员账号

原文作者:https://github.com/DesertsP/Valine-Admin

访问管理员注册页面:https://云引擎域名/sign-up,注册管理员登录信息

例如:https://deserts-io.avosapps.us/sign-up

注册管理员

注:使用原版Valine如果遇到注册页面不显示直接跳转至登录页的情况,请手动删除_User表中的全部数据。

进入 存储 => 用户 ,点击 添加用户

注册管理员


输入 用户名密码邮箱

切记要输入邮箱,因为评论管理的登录方式是输入邮箱。
添加用户的时候,如果手机号先输入,点击空白处,再删除,添加的时候会报400,猜测大概率是监听默认排除了空,快过年了,就不给 LeanCloud 前端提 bug 了哈哈哈哈哈

注册管理员


创建完成后,访问你绑定的云引擎域名,输入邮箱和密码就可以了


邮件提醒

请确保你已部署 Valine-Admin

选择 云引擎 => WEB => 设置 ,点击 添加

邮件提醒


填入如下配置即可(来源:https://github.com/DesertsP/Valine-Admin)

变量 示例 说明
SITE_NAME Deserts [必填]博客名称
SITE_URL https://panjunwen.com [必填]首页地址
SMTP_SERVICE QQ [新版支持]邮件服务提供商,支持 QQ、163、126、Gmail 以及 更多
SMTP_USER xxxxxx@qq.com [必填]SMTP登录用户
SMTP_PASS ccxxxxxxxxch [必填]SMTP登录密码(QQ邮箱需要获取独立密码)
SENDER_NAME Deserts [必填]发件人
SENDER_EMAIL xxxxxx@qq.com [必填]发件邮箱
ADMIN_URL https://xxx.leanapp.cn/ [建议]Web主机二级域名(云引擎域名),用于自动唤醒
BLOGGER_EMAIL xxxxx@gmail.com [可选]博主通知收件地址,默认使用SENDER_EMAIL
AKISMET_KEY xxxxxxxx [可选]Akismet Key 用于垃圾评论检测,设为MANUAL_REVIEW开启人工审核,留空不使用反垃圾

由于 LeanCloud 存在休眠策略,在休眠期间被唤醒的过程中,第一封邮件无法发送,后续邮件可以发送,因此我们需要实时唤醒

对于体验版而言,半小时内没有任何外部请求则休眠,每日最大唤醒时长为 18 小时,超过则强制休眠,因此建议在 8 点 - 24 点唤醒即可

此处仅提供带有云服务器的唤醒方法,对于网上流传的其他方法这里不过多解释,各有利弊

  • SSH 你的云服务器后,输入 crontab -e ,打开 crontab 后 ,输入 i 进入编辑模式

  • 输入 */30 8-23 * * * /usr/bin/curl https://你的云引擎域名 ,表示在 8 点 - 24 点,每 30 分钟访问 https://你的云引擎域名

  • 请确认 /usr/bin/curl 命令能正常使用
    云引擎域名不是你的博客地址!请看上一张截图!

  • 输入 :wq ,保存并退出

  • 输入 service crond restart , 重启服务


其他

其他想说的话:

  1. 博客原先搭载服务是 Coding 香港节点 ,在困恼了两天无法优化访问速度时,恰好发现了一篇文章,上面记录了博客的搭载历程,也因此和 Vercel 有了缘分,在此感谢原作者提供解决灵感,附作者文章链接:https://7988888.xyz/blog1/
  2. 文章中的内容偏口语话,文章细节及专业语法恐难达到完美,这是作者的水平问题,但撰写这篇文章时,我一直记得乔布斯说过的一句话,有时,“做到很好” 是 “做到最好” 的敌人,这也是我最终坚持写完的原因