玩腻了hexo ? 来玩玩在Cloudflare Worker建博客吧

2020.08.05

2022.02.13

tech blog

939 字 4 分钟

最近，想折腾 hexo 上个 pjax 怎无奈自己 js 太垃圾，在重载方面解决不好 Fancybox 懒加载 和 Valine 问题，而且blank 主题都是我一个人在开发，没有其他人的帮助，我也无奈放弃 pjax 。
前几天搭建 Cloudflare worker 代理谷歌网站 👉 https://js.dmx.best 的时候，发现还有人在 Cloudflare worker 上搭建博客
项目地址：https://github.com/kasuganosoras/cloudflare-worker-blog

效果：

二次开发版

搭建完成后，个人觉得还可以魔改一下，变得更好看些，所以我就改了以下方面：

Pjax支持
Aplayer音乐播放器
随机背景+自动切换（来自于群里的小康大佬👉 小康大佬博客）

效果👇

预览地址👉 https://blog.dmx.best
大家可以进去听听歌什么的吧，因为加上了pjax，随意切换文章音乐都不会断！

修改随机背景

选好图片替换下列链接

注意：最后一张图片结束没有逗号

<script> (function() {
  var t = [
  "https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/images/2020/08/04/cfbg1.webp",
  "https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/images/2020/08/04/zZxPjB9Z.webp",
  "https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/images/2020/08/04/7vdoYEP4.webp",
  "https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/images/2020/08/04/InXUuuL1.webp",
  "https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/images/2020/08/04/OIkchljg.webp",
  "https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/images/2020/08/04/8cYATHya.webp",
  "https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/images/2020/08/04/HSGYlHNj.webp",
  "https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/images/2020/08/04/cfbg6.webp",
  "https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/images/2020/08/04/EupdGLc2.webp"
  ];
  window.$("#bg").backstretch(t, {
    duration: 1e4,
    alignY: 0,
    transition: "fade",
    transitionDuration: 1e3
  })
})()
</script>

修改音乐歌单

<meting-js
  server="netease"
  type="playlist"
  id="60198"
  fixed="true">
</meting-js>

因为这里填的服务商是网易云server="netease"，所以把你的网易云歌单ID填入 id="" 中

想换成QQ音乐?或者更多自定义?
请前往Meting文档：👉 https://github.com/metowolf/Meting

搭建教程，项目的 README.md已经说得很清楚了，我就照搬过来啦

下面教程,全部copy来自kasuganosoras/cloudflare-worker-blog 的readme.md

如何部署

首先在 Cloudflare 控制面板创建一个新的 workers

将 workers.js（或者 workers-sakurafrp.js）的内容根据自己情况修改，然后替换 Cloudflare 在线编辑器的默认代码。

点击 Save and deploy 保存。

如何编写文章

首先创建一个 Github 项目，名字随意，然后将这个项目 clone 到本地。

1
2
3

# 示例
git clone https://github.com/kasuganosoras/cloudflare-worker-blog
cd cloudflare-worker-blog/

进入项目文件夹，新建一个 posts 文件夹

1	mkdir posts/

在里面编写文章，内容一般用 .md 后缀即可，例如 helloworld.md

写完之后回到项目根目录（就是上级目录），然后新建一个 list.json

1	touch list.json

编辑 list.json，在里面写入以下内容

[
  {
    "title":"文章名称",
    "time":"发布时间",
    "file":"posts/helloworld.md（或者其他名字）"
  }
]

如果你有多篇文章就这样写：

[
  {
    "title":"文章1",
    "time":"2019-06-01",
    "file":"posts/1.md"
  },
  {
    "title":"文章2",
    "time":"2019-06-03",
    "file":"posts/2.md"
  },
  {
    "title":"文章3",
    "time":"2019-06-07",
    "file":"posts/3.md"
  } <--注意json格式，最后一篇文章的这里不需要逗号
]

一切就绪后，使用 git push 命令将代码推送到仓库上。

然后修改你的 workers，设置 github_base 为你的仓库名称，例如 kasuganosoras/cloudflare-worker-blog

现在访问你的 Workers 即可看到文章。

作者: DmxZ

链接: https://dmx.pub/posts/23af5ca.html

声明: 本博客所有文章除特别声明外，均采用许可协议 CC-BY-NC-4.0 转载请注明出处！

cloudflare worker blog