本文主要讲述如何使用GitHub Pages/Coding/Vercel搭建Hexo静态博客,以及如何使用jsDelivr加速静态资源、如何使用LeanCloud国际版搭载博客评论,和如何使用PicGo上传图片并添加水印。
前言
相对于WordPress
的优势:
不需要购买虚拟主机搭载
支持MarkDown语法,支持本地编写、预览和最终发布(Git Push)
本文涉及的技术点:
🚆Github Pages(搭载服务)、Coding(搭载服务)、Vercel(搭载服务)、LeanCloud(存储服务)
💺Hexo(博客框架)、ButterFly(博客主题)
🚀DNSPod(域名解析加速)、jsDeliver(CDN资源加速)
💡PicGo(图床工具)、PicGo-Plugin-Watermark(图床水印插件)
本文全部内容发布自我的个人博客:
作者: Leopold Fitz
链接: /posts/44651.html
来源: Leopold’s Blog
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
为提升观看体验,建议访问: /posts/44651.html
准备工作
一个国外域名(国内域名需备案) /
Windows 系统安装Git
下载:/mirrors/git-for-windows/
安装:/qnly/p/10487057.html
Windows 系统安装Node.js
(建议使用12.0
及以上版本)
下载:/en/download/
安装:/aizai846/p/11441693.html
博客框架
安装Hexo
选择一个文件夹作为博客的根目录文件夹,在文件夹内右击,选择Git Bash Here
打开后输入下方代码,修改npm
的安装源为淘宝NPM镜像
$ npm config set registry https://registry.
开始安装
$ npm install -g hexo-cli
初始化Hexo
在git bash
中输入hexo init 你的博客名称
$ hexo init leopold
根目录会创建一个你的博客名称
的文件夹
进入该文件夹,cd 你的博客名称
$ cd leopold/
文件及文件夹说明:
启动Hexo
在git bash
中输入
$ hexo g # generate 编译生成静态文件至 public 文件夹$ hexo s # server 启动本地预览
输入http://localhost:4000
,能正常访问,则启动成功
博客仓库
GitHub创建个人仓库
登录GitHub
:/,选择New
其中,Repository name
填入你的GitHub用户名.github.io
,其余默认,点击Create repository
完成个人仓库的创建
注意,必须以你的GitHub用户名
为仓库名称,否则无法搭载GitHub Pages
服务
生成SSH密匙
在git bash
中输入如下命令
$ git config --global user.name "你的GitHub用户名"$ git config --global user.email "你的邮箱"
生成密匙,一直回车即可(生成过的请注意输入Y
确认覆盖)
$ ssh-keygen -t rsa -C "youremail"
在电脑中找到新生成的公匙,用记事本打开并复制公匙(id_rsa.pub
)中的内容。注意,不要复制私匙(id_rsa
),只需要将公匙提供给 GitHub 即可
右击你的头像,选择 Settings
找到SSH and GPG keys
,选择New SSH Key
在Key
中填入刚才复制的公匙,选择Add SSH Key
验证是否添加成功
$ ssh -T git@
部署
由于黑人事件爆发,GitHub 的默认分支由master
变更为main
,因此我们也默认同步提交到main
分支
打开_config.yml
,找到文件最后一行的deploy
,输入如下内容
deploy:type: gitrepo: /yourGithubName/yourGithubName.github.io.git,main # yourGithubName请自行替换为你的GitHub用户名
安装hexo-deployer-git
$ npm install hexo-deployer-git --save
清除现有渲染文件(clean
),重新渲染文件(generate
),部署至 GitHub(deploy
)
$ hexo clean && hexo g && hexo de
提交成功后访问你的GitHub用户名.github.io
即可
如果你提交时报错【remote: Permission to XXXA/xxxx.git denied to XXXB】
说明你电脑使用Git Bash
配过SSH
,系统已经将指向的用户设置为了 XXXB ,每次
push
操作的时候,默认读取保存在本地的用户 XXXB
快速解决方法为:在 Windows 凭据管理器中删除 GitHub 凭证即可
域名加速
修改DNS服务器
为了加速网站域名访问和智能解析,我们使用腾讯的DNSPod
加速域名访问,并指向博客
登录DNSPod官网 : /
选择DNS解析
->我的域名
->添加域名
,输入你的域名
添加完成后能看到状态
栏里的DNS 错误
,我们需要去域名注册商处修改 DNS 服务器
请自行前往各自的域名服务商处修改DNS
,下方提供GoDaddy
和NameSlio
的修改教程
Godaddy
进入 GoDaddy 后台 : /zh , 选择DNS
找到域名服务器
,点击更改
点击输入我自己的域名服务器(高级)
,将DNSPod
提供的地址覆盖到Godaddy
处
注意:更改成功后可能需要等待数小时(5分钟)才能生效,每个域名服务商的刷新时间不等
NameSlio
进入 NameSlio 后台 :/account_domains.php , 选择DNS
点击你的域名
找到NameServers
,点击Change
输入DNSPod
提供的NameServer
地址,点击SUBMIT
注意:更改成功后可能需要等待数小时(5分钟)才能生效,每个域名服务商的刷新时间不等
解析域名
修改完DNS
服务器后,在DNSPod
中,按照下图添加记录,其中,记录值填入你的GitHub用户名.github.io
GitHub Pages
进入GitHub
的博客仓库,选中仓库的Settings
在左侧Options
中, 找到Custom domain
,输入你的域名后,点击Save
,勾选Enforce HTTPS
在博客文件的Source
中,创建一个文件CNAME
,输入你的域名
注意,此文件不能有文件后缀
最后在Git Bash
中再次提交,注意养成习惯,先删除,在生成,最后提交
$ hexo clean && hexo g && hexo de
等待数分钟后访问你购买的域名即可
搭载服务
已备案域名建议选择境内分发 Coding
+境外分发 GitHub Pages
未备案域名建议选择Vercel
作者建议无论是否备案都选择Vercel
Vercel
为何无论是否备案都建议选择 Vercel ?
根据查阅网上资料发现,GitHub
和Coding
有时会无法访问,搭载服务并不稳定。因此我选择了Vercel
作为博客的搭载服务。由于在境内(台湾)设有服务器,境内访问在1-20ms左右。不仅如此,每月还有100G的加速服务,博客多域名绑定(支持子域名),以及自动申请Let's Encrypt
证书,自动同步GitHub
仓库部署(可私有化GitHub
仓库)。
在本地测试SSL
握手的响应时间也非常短
> curl -w "TCP handshake: %{time_connect}, SSL handshake: %{time_appconnect}\n" -so /dev/null
登录 Vercel 官网 : /dashboard ,登录方式请选择 GitHub 登录。
在Vercel
注册账号时请不要使用QQ
邮箱,Vercel
无法解析,导致验证邮件不可达。
进入后台面板,选择New Project
选择GitHub
中的博客仓库,选择Import
选择你的GitHub
账户 ,点击Select
确认无误后,点击Continue
FRAMEWORK PRESET
选择Other
,点击Deploy
可看到博客搭建完毕,下面我们绑定自定义域名,选择Open Dashboard
选择Settings
=>Domains
填入你买的域名后,点击Add
可以看到错误信息Invalid Configuration
,需要添加CNAME
记录
DNSPod 官网 : , 按照你的 DNS 地址填入即可
添加记录后,Vercel
会自动帮你申请Let's Encrypt
的证书,并为我们自动续期,申请成功后会邮箱告知
至此,Vercel
搭建博客就告一段落,由于是GitHub
方式登录,即便仓库私有也能自动部署,因此保险起见,建议把GitHub
仓库设为私有 ~
Coding + GitHub
为何已备案域名建议选择境内 Coding 、境外 GitHub Pages
首先,GitHub Pages
在境内访问较慢,在境外访问较快,因此我们需要对访问进行分流。
对于境内而言,我们采用Coding
搭载博客,在设定已备案的自定义域名后,Coding
会自动申请Let's Encrypt
的证书和境内的CDN
加速。
对于境外而言,我们采用GitHub Pages
搭载博客。
在使用境内分流至Coding
后,可以看到Ping
值平均26左右 。
在本地测试SSL
握手的响应时间也非常短
> curl -w "TCP handshake: %{time_connect}, SSL handshake: %{time_appconnect}\n" -so /dev/null https://yusong.site
问题一:为何要已备案的域名,未备案的不行吗?
Leopold:经过测试发现,未备案的域名在Coding
部署时,只能选择香港节点,而香港节点的CDN
加速服务在境外(America
),导致境内访问很慢,甚至比GitHub Pages
还要慢2-3倍。
问题二:既然已备案了,为何作者还要推荐Vercel
呢?
Leopold:根据查阅网上资料发现,GitHub
和Coding
有时会无法访问,搭载服务并不稳定。因此我选择了Vercel
作为博客的搭载服务。由于在境内(台湾)设有服务器,境内访问在1-20ms左右。不仅如此,每月还有100G的免费加速服务,博客多域名绑定(支持子域名),以及Let's Encrypt
证书自动申请等。
创建代码仓库
登录Coding官网 : / , 选择项目
->创建项目
选择代码托管项目
输入你的项目名称
和项目标识
后,点击完成创建
进入新建的仓库,选择代码仓库
,点击新建代码仓库
点击导入外部仓库
,登录并进入GitHub
的博客仓库,将仓库HTTPS git
地址复制到Git 仓库 URL
集成部署
导入完成后,我们需要开启仓库的集成部署功能
,点击项目设置
点击项目与成员
->功能开关
,开启持续集成
和持续部署
重新进入Coding
仓库,选择持续部署
->静态网站
,按照提示完成必要的配置腾讯云权限
和实名认证
后,选择新建静态网站
按照如下图配置,注意:网站类型请选择静态网站,节点选择非香港区域即可
部署成功后点击访问
,验证是否部署成功
绑定域名
不难发现,博客(存储桶)的 URL 是 Coding 提供的,我们需要自定义域名访问
进入该博客部署后台
选择自定义域名
->新建域名
,输入你的域名
添加域名后,我们需要将域名指向 Coding 提供的地址
登录DNSPod控制台 : ,添加一条记录
注意:线路类型选择境内
将原先添加的GitHub
记录中的线路类型改为境外
这样,我们就实现了境内访问Coding
,境外访问GitHub
Hexo 提交至 Coding
在Coding
头像右击,选择个人账户设置
->SSH公匙
->新增公匙
复制你的公匙并填入,步骤和GitHub Pages
里一致
添加完成后,找到HTTPS
拉取Coding
的地址
打开博客的_config.yml
文件,在deploy
处添加如下图的代码(请自行更换为你的拉取地址)
注意:不要忘记,main
验证
我们是如何知道,境内访问的域名是Coding
部署的,还是GitHub
部署的呢?
首先需要刷新DNS
,Windows
下打开Cmd
(Win + R , 输入 cmd )
> ipconfig/flushdns
其次ping
你的域名
> ping yusong.site
可以看到境内平均响应时长很低
接下来我们尝试更改博客的Title
,测试是否部署成功
更改_config.yml
的title
在Git Bash
中执行如下命令:清除缓存、渲染文件、提交文件
$ hexo clean && hexo g && hexo de
此时看到代码上传到Coding
后自动部署
部署成功后访问域名,可以看到成功更改标题
博客主题
本章节不详细描述如何配置 ButterFly 主题,详情请见 /posts/21cfbf15
资源加速
本章节主要讲述CDN资源加速
由于七牛云需要域名备案,而且使用HTTPS
协议的CDN
加速会产生额外费用,因此我们使用jsDelivr
来加速
登录GitHub : / ,新建一个仓库 ,如下图所示
创建完成后,复制HTTPS Git
地址
选一个用于存放静态资源的文件夹,打开Git Bash
,输入:
git clone 你刚刚新建的 CDN 仓库地址
例如:
$ git clone /leopold7/CDN.git
拉取成功后,将你的静态资源文件,放入至拉取后的文件夹内,提交即可
例如,我们在CDN
文件夹中新建一个文件夹images
,放入一张名字为marver-1
的图片
此时,以CDN/
为根目录,则这张图片的相对路径为/images/marver-1.jpg
接下来我们提交下文件
cd CDN/ # 进入CDN文件夹,或者直接在CDN文件夹里打开Git Bashgit status git add .git commit -m '第一次提交'git push
提交成功后,我们通过浏览器访问下这个文件地址
/gh/你的GitHub用户名/仓库名@分支名/文件路径
例如:/gh/leopold7/CDN@main/images/marvel-1.jpg
图床工具
安装PicGo
PicGo
就是自动把本地图片上传,并转换成链接的一款图床工具
进入 GitHub 个人设置 : /settings/profile ,选择 Developer settings
选择Personal access tokens
->Generate new token
在Note
中随便填入,勾选repo
,点击Generate
添加完成后,将tokens
复制到记事本中,因为它仅显示一次
Leopold网盘下载(推荐)
/fitz/%E8%BD%AF%E4%BB%B6/%E6%8A%80%E6%9C%AF/%E3%80%90%E5%9B%BE%E5%BA%8A%E3%80%91PicGo/
下载PicGo
版本:2.3.0
链接:/s/1n7Glx2fFfTsi7ZKMnRyPNA
提取码: s30x
GitHub 下载较慢,Gitee 暂未发现下载链接
链接:/Molunerfinn/PicGo/releases
安装并打开,选择图床设置
->GitHub图床
设定仓库名 :GitHub
用户名/仓库名设定分支名 :main
(默认为main
分支)设定 Token :上一步创建的Personal access tokens
指定存储路径 :上传到指定文件夹内设定自定义域名 :上传完成后生成的图片链接域名/gh/GitHub用户名/仓库名@main
搭配Typora
Picgo
搭配Typora
可实现智能上传图片,以及自动替换MarkDown
中的图片链接功能
打开Typora
,选择文件
->偏好设置
->图像
,其中
上传服务:选择 PicGo(app)PicGo 路径:填入PicGo 绝对路径
填入后点击验证图片上传选项
,测试是否连通
配置完成后,我们可直接在Typora
中,右击图片,选择上传图片
上传成功后,Typora
中的资源地址就会自动换成GitHub
图床的地址
水印插件watermark
相对于WordPress
强大的插件库而言,PicGo
里的插件库显得有些薄弱,仅包含“任意放置文字和图片",并没有透明度功能,总之,麻雀虽小,五脏俱全
打开PicGo
,选择插件设置
,在搜索框中输入watermark
,点击安装即可
watermark 插件安装太慢的看这里
原因:三个平台的sharp
包都内置,导致插件过大,安装缓慢。
解决:手动安装
环境: Node.js 14.15.0 Python 2.7.18 VS 16.8.4
Node.js
选择大于8.0
的版本即可,这里推荐使用gnvm
完美切换版本
Visual Studio
安装时勾选使用C++的桌面开发
Visual Studio 下载太慢的看这里
如果下载Visual Studio
太慢,请修改hosts
文件(路径:C:\Windows\System32\drivers\etc\hosts
)
首先获取加速IP: https://microsoft./download. ,如下图所示,加速 IP 为 93.184.215.201
在hosts
中填入加速ip 空格 download.
例如
93.184.215.201 download.
无法保存的请先启用写入权限
环境准备完毕后进入插件目录cd {your-plugins-root-path}
,可以在PicGo
设置中点击打开配置文件
,配置文件所在文件夹就是插件目录
> cd C:\Users\****\AppData\Roaming\picgo > npm install picgo-plugin-watermark
安装完成后重启Picgo
,即可在插件设置
中看到picgo-plugin-watermark
P.S.
插件在启用/禁用
时需要重启PicGo
安装后无法找到插件的请确认是否安装成功,若无效可尝试替换安装命令为npm install picgo-plugin-watermark --save
(添入package.json
),无法上传的时候学会看错误日志,有时候是因为水印插件的问题,有时是因为文件已上传过,由于没有配置时间戳
命名,导致无法上传同路径下的同名文件,请读者自行甄别错误信息
右击插件右下角
的 设置图标,打开配置plugin - watermark
,填入水印规则即可使用
数据存储
博客的评论采用Valine
评论插件,评论存储采用LeanCloud
国际版
作者建议直接使用LeanCloud
国际版,虽然官网访问真的很慢很慢…
注意,如果使用LeanCloud
国内版,请确认你的域名已备案,下方提供了国内版
转国际版
的教程
国内版转国际版
登录LeanCLoud国内版 : , 进入你的评论应用后,选择存储
=>导入导出
,点击导出
后,官方会以邮件形式发送下载链接
注意:根据官方解释,导出和导入的格式原本都是JSON
数组,后来为了便于导出数据后自行处理(以行为单位处理更方便),导出改成了JSON Lines
格式,但导入没有及时跟进(截止于1月26日)
所以直接导出后的JSON
是没有办法直接导入的,我们需要手动的改成JSON
数组格式
除了最后一行数据外,每行后面填入一个英文逗号
,最后用英文中括号
包裹即可
例如:
[{type : one },{type : two },{type : three }]
国际版
注册并登录LeanCLoud国际版 https://console.leancloud.app
右上角进入控制台,确定节点为国际版后,选择创建应用
应用创建完成后,点击创建应用卡片右下角的设置图标按钮,进入到应用设置面板,选择设置
=>应用Keys
,复制你的AppID
和AppKey
打开博客主题配置文件_config.butterfly.yml
,找到comments
,在use
处添加一条- Valine
,开启Valine
评论
然后将AppID
和AppKey
这两个属性值复制到valine
对应处
本地启动博客,能看到评论功能正常启动 ,且出现来发评论吧~
,无其他错误码
域名绑定
选择设置
=>域名绑定
,点击绑定新域名
输入一个未使用的子域名,例如,其余默认,点击
绑定
可以看到等待配置 DNS
,我们需要去域名提供商处添加一条记录,指向CNAME
对应填入即可
可以看到状态为已绑定
为了防止他人调用(API
三万次HTTP
调用免费),我们绑定博客的域名
选择设置
=>安全中心
,将博客的域名填入Web 安全域名
中
评论管理
想要开启评论管理,我们需要部署Valine-Admin
打开云引擎
=>WEB
=>部署
,选择部署项目
点击Git 部署
=>配置 Git
在Git remote URL
中输入链接/DesertsP/Valine-Admin.git
,点击保存即可
刷新页面后选择部署
访问刚刚绑定的域名,可看到评论管理页面能正常访问
不难发现,评论管理页面需要账号密码,因此我们需要创建一个管理员账号
方法1
原文作者:/DesertsP/Valine-Admin
访问管理员注册页面:https://云引擎域名/sign-up
,注册管理员登录信息
例如:https://deserts-io.avosapps.us/sign-up
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2TMn804P-1612086271876)(/DesertsP/Valine-Admin/blob/master/assets/imgs/signup2.png?raw=true)]]
注:使用原版Valine如果遇到注册页面不显示直接跳转至登录页的情况,请手动删除_User表中的全部数据。
进入存储
=>用户
,点击添加用户
输入用户名
、密码
和邮箱
切记要输入邮箱,因为评论管理的登录方式是输入邮箱。
彩蛋添加用户的时候,如果手机号先输入,点击空白处,再删除,添加的时候会报400,猜测大概率是监听默认排除了空,快过年了,就不给 LeanCloud 前端提 bug 了哈哈哈哈哈
创建完成后,访问你绑定的云引擎域名,输入邮箱和密码就可以了
邮件提醒
请确保你已部署Valine-Admin
选择云引擎
=>WEB
=>设置
,点击添加
填入如下配置即可(来源:/DesertsP/Valine-Admin)
由于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
, 重启服务
其他
其他想说的话:
博客原先搭载服务是Coding
香港节点 ,在困恼了两天无法优化访问速度时,恰好发现了一篇文章,上面记录了博客的搭载历程,也因此和Vercel
有了缘分,在此感谢原作者提供解决灵感,附作者文章链接:https://7988888.xyz/blog1/文章中的内容偏口语话,文章细节及专业语法恐难达到完美,这是作者的水平问题,但撰写这篇文章时,我一直记得乔布斯说过的一句话,有时,“做到很好” 是 “做到最好” 的敌人,这也是我最终坚持写完的原因
本文全部内容发布自我的个人博客:
作者: Leopold Fitz
链接: /posts/44651.html
来源: Leopold’s Blog
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。