lmm333's Clip 介绍

背景

lmm333's Clip

互联网的核心精神是分享，但近期有报告指出，近些年全球链接失效的速度都变快了，比如我有篇收集 别人2014年终总结的博文 ，里面大部分链接都已经失效了，包括不限于个人网站的链接，著名社交网站的链接，传统博客网站的链接等。

为了保存链接里的内容，必须得剪藏网页。

我也有剪藏网页的习惯，这些年用过印象笔记，飞书，Omnivore，Instapaper 以及 selfhost 过 群晖Note 和 wallabag，但是这些工具都有一个共性的问题，就是收藏的内容是私有的，收藏之后再也不会拿出来看了。

为了解决这个问题，我一直想有个地方，可以把我收藏的内容自动公开分享出来，这样不仅可以让我自己看到，也可以让别人看到，提高内容的生命周期。

受限于内容管控机制和审查环境，国服是不可能有这样的产品了，外服也没遇到合适的，直到我看到了DemoChen's Clip，并找到了这个项目。

目录

changelog

以下是我的大致创建流程，详细步骤见下面原始文档，很详细

2024-06-26

  • 安装
    • 用 clip 作为项目名，fork 了 clip-template
    • git clone 项目到本机的 ~/Downloads 目录 (放下载目录是为了方便 Markdownload 扩展保存网页到本地)
    • make install 安装依赖（这一步没有成功，特别慢，成功后可以本地预览，没成功也不要紧）
  • 修改配置
    • 修改封面图 cover.jpg 和 templates/cover.jpg 和 templates/archive/cover.jpg，封面图使用 (O'RLY 封面)[https://orly.nanmu.me/ ] 创建
    • 修改 book.toml 配置文件，修改了网站名称，网址，作者以及 Git Repo 相关配置等等
    • 修改 README.md 文件，作为网站的首页，添加了封面图，修改了标题
  • 安装插件
    • Chrome 里安装了 Markdownload 扩展，其他浏览器参考源码 并导入 theowenyoung 的 配置文件, 我没有使用 theowenyoung 修改过的插件，似乎也没问题
    • 此时可以使用 Markdownload 插件保存文章，点击 Download 按钮，文件会自动按照日期保存到 ~/Downloads/clip/content/2024/06/26/{slug}/index.md，如果有图片，图片也会保存到该目录下，直接 git commit 并推送到远程仓库即可
  • vercle 部署
    • 在 vercel 新建项目，选择从 Github 中导入项目，不需要做额外配置，首次部署完成后，可以看到预览的网址
    • 在 Vercel 的后台，默认域名处，可以添加自定义域名，我添加了 CNAME clip.lmm333.com , 这一步需要在自己域名的管理后台操作，需要等待域名解析变更，我等了约1小时吧
  • rss feed
  • 更多功能
    • 自动生成目录 参考 https://github.com/helloChenLei/clip 项目，更新 cli.ts 文件，添加 <!-- Table of Content-->
    • 增加 GA: 官方的 book.toml 里的 GA 配置不支持 GA4, 建议在 head.hbs 里自定义， theme 目录一开始不生效，换了 cli.ts 文件后，放到 static 里生效
  • 参考文档

以下是原始项目的 readme.md

这是 https://clip.owenyoung.com/ 网站的模版，里面收集了我觉得值得收藏的文章全文。本来是个人在使用，但是有朋友也想复制这个流程，所以我就抽出了这个干净的模板，让想用这套流程的朋友方便一点～

大概流程

  1. 浏览网页，比如 https://www.owenyoung.com/inspires/
  2. (可选)如果是英文文章，我会使用 Immersive Translate 浏览器扩展将网页翻译为双语文章
  3. 用markdownload 浏览器扩展，把双语文章保存下来。
  4. 使用 Git 把本地文件同步到远程仓库
  5. Vercel会自动部署并发布。

Online Demo: https://clip-template.vercel.app/

如何初始化

注意：当前我只测试了 macOS 和 Linux，我没有 windows 机器，所以没有写 Windows 的脚本，但是欢迎贡献～

  1. 点此Fork 本项目到你的自己的 Github 账户, 名称修改为clip (如果是其他的名字，后面的步骤中安装的插件的配置需要同步修改下)

  2. 把你 fork 后的项目克隆到本地，记得要克隆到本地的~/Downloads目录 (浏览器默认下载目录），

    如果你自定义了其他目录作为浏览器的下载目录，那就克隆到你自定义的下载目录下。

    这么做是因为浏览器只允许浏览器扩展将文件下载到Downloads目录，所以我们收藏的文章默认会保存到下载目录下的某个目录。

    记得把下面的地址换成你 fork 后的 repo 地址：

    cd ~/Downloads
git clone git@github.com:theowenyoung/clip.git

  3. 本地安装依赖，依赖的二进制完美都会安装在当前项目目录下的bin目录内，这样不会污染别的地方，这个命令会安装mdbook,deno到本地目录：

    cd ~/Downloads/clip
make install

  4. 本地启动运行

    make serve

    此时，打开 http://localhost:8000 应该就能看到文章。

    文章会保存在content/2022/11/14/{slug}/index.md，如果有图片，图片也会保存在该目录下。我使用我修改的一个Markdownload 扩展，它负责把文章保存到本地目录下。

  5. 安装插件，请在https://github.com/theowenyoung/markdownload/releases 下载最新版插件，firefox 浏览器可以打开about:addons页面，选择从文件安装。 chrome 浏览器手动安装步骤请参考这里

  6. 安装后，可以从浏览器的扩展管理页面，进入该扩展的配置页面，拉到最后面，导入我的配置文件，之后，可以按照你自己的需求修改配置。

    现在可以打开一篇文章,比如：

    https://www.owenyoung.com/inspires/

    试试使用插件保存文章,保存后，本地运行：

    make serve

    就可以在浏览器中打开http://localhost:8000 看到预览页面。

  7. 发布到 Vercel，直接在 https://vercel.com/dashboard 新建一个项目，然后选择从 Github 中导入项目，不需要做额外配置，你可以在首次部署完成后，在 Vercel 的后台设置自定义域名。

初始化之后的常规操作

  1. 看到想收藏的文章，点击扩展图标保存到本地
  2. 使用 Git 同步到远程仓库即可，Vercel 会自动部署最新的项目。

如何保持与这个库的同步

git remote add upstream https://github.com/theowenyoung/clip-template.git
git pull upstream main

这样即可合并上游main分支的代码

RSS 地址

Mdbook 本身的目标是制作电子书，所以并不支持 RSS，但为了方便，我添加了输出 RSS 的功能，地址是根目录下的feed.xml，比如该 demo 的 RSS 地址：

https://clip-template.vercel.app/feed.xml

配置

网站的标题之类的配置都在book.toml下，照猫画虎修改即可。 查看所有可配置的东西，请参阅这里

主要是修改你的网站名称，网址，作者以及 Git Repo 相关配置等等。

如果你有静态文件需要提交放在网站根目录到话，可以放在template/archive 下，现在有一个 robots.txt, 默认只允许搜索引擎收录首页，其他页面一律不允许，因为考虑到 clip 的文章大都是收藏别人的文章，所以不让搜索引擎收录是一个合理的默认选择，你可以根据自己的需要修改。

项目根目录下的README.md 文件被用于作为网站的首页。如果你不想用这个README.md,也可以在添加template/archive/README.md文件。

插件配置

我默认的 Markdown Frontmatter 遵循的是 zola 的格式：

---
title: "{pageTitleWithoutSiteName}"
date: {date:YYYY-MM-DDTHH:mm:ss}+08:00
updated: {date:YYYY-MM-DDTHH:mm:ss}+08:00
taxonomies:
  tags: {tags}
extra:
  source: {baseURI}
  hostname: {hostname}
  author: {byline}
  original_title: "{title}"
  original_lang: {lang}
---

如果你需要别的 tags 的格式，可以改为：

---
title: "{pageTitleWithoutSiteName}"
date: {date:YYYY-MM-DDTHH:mm:ss}+08:00
updated: {date:YYYY-MM-DDTHH:mm:ss}+08:00
tags: {tags}
extra:
  source: {baseURI}
  hostname: {hostname}
  author: {byline}
  original_title: "{title}"
  original_lang: {lang}
---

Epub 相关配置(可选，默认不启用)

我在这个项目里会使用 Github Actions，把当日的文章汇总成一个 epub 文件，然后发送 email 到我的 kindle 邮箱里，这样就能在 kindle 阅读这些保存下来的文章。

如果你不修改相关配置的话，默认是不开启的。

如果你想启用的话，需要把.github/workflows/build-daily.yml里面的注释去掉

发送 email 需要用到 https://www.mailjet.com/的 API，免费额度每日 200 封，足够个人使用。 你需要注册一个账户，然后拿到 API ID 和 Secret

我使用https://orly.nanmu.me/生成 epub 的封面图，你可以生成一个，然后替换 templates/archive/cover.jpg 以及 templates/cover.jpg

本地测试生成 epub 文件可以运行如下命令：

make today

make yesterday

make day day=2022-11-21

具体配置可以参考我的 clip 配置，等有人需要，我再完善这部分文档吧，或者欢迎你贡献呀！