家庭数据中心系列 使用hexo搭建静态博客并部署到到cloudflare pages
本文最后更新于 210 天前,其中的信息可能已经有所发展或是发生改变,如有失效可到评论区留言。

前言

折腾了wordpress这几个月来,我从一个啥都不懂的纯小白,成功的进化成为了初级入门者:能够熟练使用各种插件、进行页面的布局设计、使用主题编辑器快速添加脚本等等常规操作,并充分享受到了wordpress带给新手的便利:评论、搜索(包括全文搜索)、通过插件快速扩充功能等。

不过嘛,有利就有弊,也慢慢感受到worldpress这类动态博客的缺点:
1、依赖于数据库

这点其实既是优势(评论和搜索功能都是基于数据库的),也是劣势(必须使用虚拟机或者云主机或者至少一个支持docker的环境),没有办法像静态博客一样随便找个托管商托管上去就完事。
2、页面需要动态生成

由于动态博客本身的工作方式,正常情况下页面缓存变得很麻烦,对CDN非常不友好。为了使用CDN,一般都需要通过插件把动态页面转成静态html才能进行缓存、又或者使用自建worker-KV的方式(官方正版功能是APO)才能达到比较好的访问体验。而更有甚者,一些博主为了达到接近静态博客全站缓存的效果,生生放弃了自带的评论和搜索功能,将wordpress生生”变成”了静态站点,这样的行为简直令人发指~~。

我虽然在短期内没有从动态博客改换门庭到静态博客的想法,但是也觉得静态博客的确有其优势,加上之前一段时间被ddos攻击了一番,虽然只有很小一部分流量进入我的家庭数据中心,且没造成太大影响,但是也颇为羡慕静态博客直接找个免费的静态页面托管商一托管就啥再也不用担心的优势:这是真正的永远在线啊。况且我现在的同城镜像站点是架在腾讯云的轻量服务器上,万一我不租服务器了,那镜像站点就没了~~~所以想想,如果只是临时解决我家里因为停电这种特殊场景导致的博客主、备用站点都down时的镜像站点需求,又不追求界面一模一样而是专注博文内容的话,那么静态博客其实也是一个实用性很高的解决方案(搜索和评论也有对应的实现方案,不过比较麻烦,暂时就不涉及了)。

研究了半天之后,决定使用基于node.js的Hexo框架,毕竟直接支持markdown,这个优势很大(现在wordpress也可以通过插件支持,不过在代码块里有一些特殊符号的时候,就容易出现乱码,这时候还是需要转成html),并且Hexo貌似也有丰富的支持,同时也可以方便的通过插件把wordpress的文章导过去,虽然对环境配置有一些要求,迁移本地环境到其他环境时候需要重新配置,稍微麻烦一点,但是我只是用来做一个wordpress博客的备份,又不是主力博客,所以这些问题都可以忽略(况且在cloudflare pages上进行构建的时候,是可以指定和本地一模一样的版本的),刚好我的macmini上装了github desktop来维护静态站点的更新,所以干脆就用macmini来部署Hexo,让m1乞丐版macmini继续发挥余热,多做贡献~。

本地部署hexo并创建对应的github仓库

部署node.js

hexo需要使用npm命令进行安装,而npm已经被集成进了node.js里,所以只需要安装node.js即可。
官方下载链接如下:https://nodejs.org/en/download

image.png

下载完安装包并成功安装之后,可以使用如下命令确认当前npm和node的版本:

npm -v
node -v

如下:

image.png

记住这个版本号,后面要用。

在本地环境安装hexo

按照如下流程在本地安装hexo:
1、修改npm命令的权限范围

sudo chown -R (whoami)(npm config get prefix)/{lib/node_modules,bin,share}

注:如果不修改,则无法使用npm正常安装软件
2、升级npm到新版本(可选)
因为看到npm有新版本提示:

image.png

所以给npm升级:

npm install -g [email protected]

3、安装hexo

npm install hexo-cli -g

4、创建并初始化hexo工作目录

mkdir /Volumes/data/hexo
hexo init /Volumes/data/hexo

image.png

以本地hexo目录直接创建github上的hexo仓库


注:本来之后通常的部署方式是采用命令行的方式,需要下载安装git并生成本机ssh公钥,然后将公钥添加到github账号中,还需要安装hexo-deployer-git插件并配置hexo配置文件,最后实现命令行下的更新发布管理,不过因为之前我已经在macmini上部署了github desktop,为了利旧,所以我后续的操作和网上的教程不同,不过因为github desktop是图形界面,用起来肯定比git的纯命令行要舒服,大家可以尝试一下,不过需要先安装github desktop。


以本地hexo目录直接创建hexo仓库,请按照如下流程:

mac_1715586836026.png

mac_1715869141164.png

提交hexo目录init的文件到hexo仓库的main:
mac_1715869403198.png

发布到仓库:
mac_1715869494676.png

image.png

这时候github上已经成功创建hexo仓库并完成了init生成文件的上传:
image.png


也可以在本地启用hexo服务并进行访问,查看实际效果,按照如下流程操作:
打开hexo本地web服务:

cd /Volumes/data/hexo
hexo server

image.png

使用http://localhost:4000访问hexo:
image.png

查看hexo安装的版本,后面构建的时候需要:

hexo version

image.png


使用cloudlflare pages关联github仓库构建hexo

详细的配置步骤请参考我另一篇文章:家庭数据中心系列 使用github+cloudflare pages为www导航页搭建新家,我这里就简要记录下关键步骤:

image.png

image.png

上图中构建命令如下:

npm install [email protected] && npx hexo clean && npx hexo generate

在环境变量中添加和本地一样的npm和node的版本,因为这两者默认版本非常低,不可用:

image.png

部署成功:
image.png

最后和我另一篇文章一样设置好自定义域名即可,最终效果见:Hexo静态博客初始界面

总结

hexo博客的部署其实不算复杂,真正麻烦的还是后续如何使用,这个我先研究一阵再专门写一篇文章记录吧。

博客内容均系原创,转载请注明出处!更多博客文章,可以移步至网站地图了解。博客的RSS地址为:https://blog.tangwudi.com/feed,欢迎订阅;如有需要,可以加入Telegram群一起讨论问题。
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇
       
error:
zh_CN
春节
快乐