让自己的 Note 变为网站

Collected Notes 简明教程

让自己的 Note 变为网站

这篇文章上周我就写好了，一直没发，这几天我又有了一些新的想法，后续再更新吧，不过 Collected Notes 非常适合个人记录以及展示，相当于你的五个笔记本。这次放出来把原来的标题「做一个自己的网站 1.0」改为了「让自己的 Note 变为网站」更合适。

文中的这个域名不会长久使用，如果你很久以后看到这篇文章，不能访问请忽略，可以试试 d.littlefat.cn，可能会保留。

写在前面的话

发现 Collected Notes 这个软件，促使了我写这样一篇文章，我个人很喜欢它的理念。Collected Notes 我没记错是 Swift 写的，目前只支持 Mac 以及 iOS，也就是苹果的系统，如果你用的 Windows，文章里提及的其它工具你可以使用，这篇文章只针对 Collected Notes 这个软件。

本来想引用之前写的文章的，发现我在重启我的公众号的时候的文章叫做「记录」，我从周六发现这软件，到周日部署好 littlefat.store，我又写了个文章还是叫做「记录」，不过这两篇还是有点不一样，第一篇想说的是我认为我个人思考是有价值的，在目前的互联网还是很稀缺的，所以我不懒了，要开始记录，没有任何目的性；第二篇想说的是我们人人都可以去记录，不要想着创作什么，就是平时的记录就好，这非常有价值。

很多人可能看了教程还是不知道怎么做，缺少太多的前置知识了，比如需要魔法上网、Markdown写作、注册 GitHub、注册域名等等流程，这个我是没有办法解决的，这就是手把手教你了，而不是探讨了，你也可以通过搜索引擎花点时间自我学习解决。

我的文字是应该免费的，如果你缺少太多的前置知识或者不想花时间，需要我的指导那么这个服务是应该收费的，关于这一点我没想好，就不展开说了。很多时候很多人问我问题实在是太初级了，由于加的人多，就不太想回答，这可能是咱们会发现某些人变了的原因，但是请相信我，我真的很愿意帮助你，但是我实在不想花时间一点一点教。

以 littefat.store 为例，说下搭建的成本，其中 Collected Notes 的成本为 50 美金每年（经过我的测试可以搭建五个网站，可以十四天试用）；如果你没有魔法上网，那么我推荐的服务在 385 人民币每年；我购买这个域名的费用为 199 十年，加起来全部换算成人民币不包含我的指导费用是 910 块钱，当然域名你也可以买一年，那么很多只要十几块钱，也可以不买域名（下面会写，用别人的二级域名），Collected Notes 软件白嫖，魔法上网已经有了，那么其实也不需要啥钱就能弄（我没有测试没有魔法上网的环境是不是可行，但是我们需要使用 GitHub 等）。

这篇文章围绕着 Collected Notes 软件搭建个人网站展开，从而过渡到同一篇文章如何最快速度发到微信平台。只会涉及这两个部分，因为对于大部分人来说就足够了。如果你想发布到更多的平台，搭建更复杂的网站，不在讨论范围内，需要你更多的学习和琢磨我觉得是没有必要的。

我的标题起了 1.0，也就是我认为流程有迭代的空间的时候我会再次更新此文档。

为什么是 Collected Notes

这里参考文章「2020 年，如何才能拥有一个个人网站？」罗列下一些个人建站的工具：Squarespace、Weebly、Wix、Typlog、Cargo、Ghost、Wordpress、Gridea、Typecho、HUGO、Blot……

像我比葫芦画瓢做的我们在运营的公众号「禅与宇宙维修艺术」的网站 「cosmosrepair.com」就是用的 HUGO 做的，除了域名外不需要任何费用，但是麻烦，并且我当时花时间看了 Lydna 的视频「Learning Static Site Building with Hugo」，折腾了比较久时间才弄好的，这是建立在我有使用软件的思维，能看懂部分简单的不能再简单的代码，很多问题我还请教了朋友的基础上，不过这种方式比较一劳永逸，对于仅仅想写文字的你并不适合。

到现在如果我要再做的话，我需要从头学起了，已经全忘了，所以不如用现成的方案。之所以没有推荐我的「littlefat.cn」 使用的「Typlog」是因为我觉得虽然可定制化的多，价格也不贵，每年 40 美金，但是按钮各个方面太多了，不够专注简单，对于什么都不懂的用户上手来说还是挺难的。另外我的存档网站「liujingli.com」使用的是「Bitcron」的服务，作者还有「FarBox 2.0 alpha」和「FarBox」这两个项目，基本差不多，这个配置也比较简单，但是对于新人也不友好，并且感觉作者转入到了维护状态，不过我用的 Bitcron 超级便宜，一年只用 60 元。

说了这么多可能你也没看懂，简而言之就是我觉得 Collected Notes 最适合普通用户，还有最重要的一点是它集合了图床的功能，也就是你可以直接上传图片。

Collected Notes 严格来说不是一个 Blog 这种单纯的建站平台，因为有了「Note」一词，软件的一句话介绍是：Publish your notes on the Internet. Instantly.

对于我们个人来说其实发的就是 Note，而不是别的，写作压力大大减少，无论是自己保存或者是展示都非常好，而不是仅仅放在笔记本里，并且这软件支持了目前最火的双向链接。没有 Notion、Roam Research 等等这些软件上手复杂，非常适合记录和展示。

说到这里还想说下我目前在用的另外一款软件「Tot」，具体的介绍可以看这一篇「单纯想捕捉想法，轻量级 Tot 也许合宜」，我想说的是，你就把这软件当作一个快速启动，可以随时记录想法的工具，七种颜色代表七个文档，你可以有自己的用法，随意发挥，就这么简单。我会拿来记录一些东西，然后再去别的软件里面加工，iOS 的备忘录每次打开，看着长长的列表难受，更适合存一些固定的东西，「Drafts」 这样的软件太复杂了，面对普通用户不友好。此软件 Mac 端可以免费使用，iOS 端是收费的，你可以试试。

虽然目前的功能有点少，页面简陋，但是看作者的「开发路线图」还是值得期待的，像一些模版啊，还有展示你的 Twitter 这些别的未来都会有的。

对于个人来说写东西展示足够了。要说我现在最不满意的就是写完后需要按下去保存，而不是随时关掉随时写这种，另外就是左右两边的所见即所得不是同步滚动的。

接下来就说下如何使用 Collected Notes 在三十三分钟内建立一个个人的网站。

三十三分钟建立个人网站

因为个人比较喜欢数字 3，所以这么说。实际我自己折腾过程中，由于官方文档的问题，我折腾了比较久，但是目前来说你按照我的方式也的确只需要这么久时间，如果你有相关基础的话。

  • 购买域名，这个在这里就此掠过；

  • 注册并开通 Collected Notes ⚡️ Premium，如果仅仅是尝试记得 14 天内取消；

  • 在右上角 Edit Site 里面填入相应的内容，我这里用的是二级域名；

  • 这里的 PROJECT NAME 是指的在 Vercel 这个网站的名称；把前一个步骤的三个 environmental variables 添加过来，一行一行的添加，这里要注意的是，经过我的测试 Collected Notes 可以创建五个网站，但是那个页面只会显示一个 PATH 的 environmental variables，当你创建第二第三个网站的时候一定要用你在 Edit Site 里面填写的 PATH，然后点击 Deploy；
  • 稍等片刻就是恭喜你了，这个时候点击 Open Dashboard 进行最后一步域名的设置基本就大功告成了；
  • 点击右上角的 View Domains
  • 这里你可以用你自己的域名，你也可以用 serendipity.vercel.app 这个域名，但是要注意的是这个地方要和你前面在 Edit Site 里面的域名保持一致，我想用自己的域名，输入后点击 Add；
  • 系统提示我没有解析，由于我的域名用的是 Cloudflare 的解析，所以我到 Cloudflare 按照要求设置好就可以了；
  • 大功告成。

Collected Notes 更进一步的说明

我们进入下一个公众号发布前说下这个问题，我上面的教程没有涉及到 Collected Notes 更具体的一些使用，文章发布啥的，但是非常简单，你如果有使用软件的思维，那么三分钟就上手了，多点按感受下，同时学会看官方的说明：https://collectednotes.com/blog，目前我发现的只有 front matter 这个部分有问题。

说到思维这个词就多说几句，我们读书的时候老说语感，医生看病多了也有一种感觉，看过为数不多的书的我想到了 Malcolm Gladwell 的 Blink: The Power of Thinking Without Thinking 讲的大概就是这个，这种思维没法教，就像我很难教会我的父母使用手机一样，我们大部分人使用这些电子设备特别像洗衣机这种程序化产品，但是这些电子产品使用比那些要复杂得多，你一旦跨过来了就很简单，不过对于大部分人很难，这也不符合软件的发展发向。

我目前使用中发现的问题是在浏览器端对多网站的支持不够好，添加新的 Note 的时候只能跳到你设置的第一个网站，并且不好切换，如果切换需要手动进入 https://collectednotes.com/serendipity 这样的路径，否则它都会跳转到我的第一个网站 https://collectednotes.com/littlefat，如果你打算用多网站系统的话，部署好以后建议在 iOS 端或者 Mac 端使用，不要使用 web 端，其实也没必要。

发布到微信公众号

由于你使用 Collected Notes 的时候，使用的是 Markdown 的格式，那么你可以使用现成的服务一键转换发布到微信公众号，这里面目前发现的问题是 Collected Notes 的图片并不能被微信公众号识别，如果你的文章插入了过多的图片，这点比较麻烦，就是图片需要在公众号重新上传。

当然你依然可以选择图床，不过我会选择重新传一遍，毕竟不会太多图片，配置图床对于很多人又是麻烦事。我在「我的写作工作流」有写，我使用的转换是 Markdown Nice，我现在打算用这个了 https://mdhere.netlify.app/，简洁好看。

最近发现了很多 Markdown 转微信公众号的工具，我就罗列下，你可以看看自己喜欢哪个：可能吧公众号排版器、Markdown-Weixin、OpenWrite、WeChat Format、Md2All……

为什么要发布到微信公众号呢，这个是最方便你发朋友圈的方式了，也是最容易传播的方式，但是微信公众号也有问题，就是你的文章不能修改，再就是文章多了阅读不方便。

之前我和朋友讨论一种服务的可能性，比如有个服务可以把他人的微信公众号得到作者授权的前提下自动生成美观的网站（不知是否违法微信协议），目的是为了方便阅读，毕竟当你发现一个有趣的人，在微信公众号阅读历史文章太难受了。其实也诞生了「今天看啥」、Vread、WeRss这种服务，但体验不够好。

说来说去还是离不开微信生态。

最后

Collected Notes 还有很多不完美，比如我现在这篇文章在这里写的就有点卡，可能比较长吧。或许还有人说我还有 XXX 方法，可能我真的有局限性，目前这个流程我觉得是非常简单的方式，按照我的教程和流程，很快就能开始写作了，如果你有更好的选择，欢迎留言探讨。

也期望 Collected Notes 能够越来越完美，最细希望看到这篇文章是你的 Serendipity，如果你做好网站，欢迎留言你的网址。