我的博客工具
分享一下在搭建beloved.family时，我用了哪些工具或服务。
域名
域名 beloved.family 本来是从 namecheap 上买的，后来转移到了 cloudflare 上，后者提供的服务更多。
网页服务器
静态资源并没有放在我自己的服务器上，而是放在了GitHub Pages上。通过自定义CNAME指向上面的域名，这样省去了维护自有服务器的精力。
版本控制
既然用了GitHub Pages，版本控制当然是git+GitHub了。如此一来，后续需要引入协作者时，也会方便许多。
内容编辑
因为我不打算用自己的服务器，所以内容编辑也用了网上现成的。
之前写微信公众号时，朋友给我推荐了Markdown Nice，它支持将markdown文件渲染为多个平台支持的富文本格式，省了我不少心。
我在mdnice的基础上，加了自己定义的模板，比如一些有助于seo的元信息:
<div id="meta">
- filename: 我的博客工具
- description: 写博客时，哪些工具帮助了我
- qr: /1984.png
</div>
这些元信息在之后会被我用脚本转换为各种meta标签(主要是方便seo和分享)：
<title>我的博客工具</title>
<link rel="canonical" href="https://beloved.family/wx/我的博客工具" />
<meta name="description" content="写博客时，哪些工具帮助了我"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta property="og:title" content="我的博客工具" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://beloved.family/1984.png" />
<!-- theme: ️红绯HeyRain; code theme: ️atom-one-light -->
内容处理脚本
上面有说我会用脚本对markdown渲染后的html内容进行二次处理，目的是得到在博客中直接可用的html文件。这涉及到我写的一个Alfred Workflow。
该workflow支持将本地的css或js注入到浏览器中并运行。目前用到的脚本有这几个：
blog_template.js: 将博客模板加载到mdnice网站上，方便自己按模板进行编辑 mdnice.js: 转换渲染后的html内容，得到更加seo友好的html文件，并下载到本地 theme-init.js: 选择默认的mdnice主题 wx_content.js: 将微信公众号文章的html结构拷贝出来，以方便返回编译为markdown格式
读者可能对这些js文件的内容比较好奇，其实就是一些常用的DOM操作而已。我提供两个供参考：
wx_content.js
// 复制微信公众号文章的主体内容
// 以便使用sitdown进行格式化
js_content.outerHTML
该段文件由Alfred注入到浏览器中后，会将当前页面的html结构复制到剪切板中。
blog_template.js
((doc) => {
// 给mdnice设置一个默认的写作模板
const template = `
# title
<div id="meta">
- filename:
- description:
- qr: /1984.png
</div>
`.trim();
localStorage.content = template;
location.reload();
})(document);
这段脚本用来初始化博客模板。
浏览统计
使用了流行的 Google Analytics。
评论功能
应该没有比 Disqus 更好用的了吧？不过国内好像加载不出来...
引入广告
申请了几次 Google AdSense 都因为内容不够被打回了，再等等。
Bonus
我有部分文章之前是直接发布到微信公众号上的，并没有保留 markdown 原文。借助于 SitDown工具，可以将上面脚本复制的公众号html结构反编译为markdown格式，再简单编辑后就可以发布到自有博客上去了。
另外，在mdnice上发布的图片是在别人的cdn上的，为防止图片丢失，我还写了一个脚本用来备份文章上的图片到本地，见这里。
另另外，偶尔会有对图片进行二次编辑的需求，我不是设计出身，但发现 photopea 用来在线处理图片非常方便。
好了，以上就是搭建一个博客的全部工作了，你的看法呢？你有更好的推荐吗？
