Buzzword.engineering技术堆栈

很长时间以来，我一直想建立一个博客。过去，在尝试使用不同的静态站点生成器之前，我已经走了一半，直到对我缺乏前端设计的想法感到沮丧并放弃了。

我休了两个星期。给电池充电几天后，我就可以开始进行一些小型项目了。

我已经尝试了许多静态站点生成器来为各种项目构建文档，并希望更深入地研究盖茨比。

我想看看我是否可以将Obsidian用作技术博客的内容管理系统（CMS），并使用Pipedream自动发布新博客文章。

无论如何，这是Buzzword Engineering的首篇博客文章。如果您喜欢，请在博客存储库上给我一个github star或类似的东西。这是多巴胺的有益补充，助长了我的自我价值。

如果您还没听说过，请停止阅读并继续使用Excalidraw，然后再回来。这是我用来绘制此图的工具。

我会尽量简短。也许将来的博客文章会更详细地讨论黑曜石。现在，我只想说我已经尝试做笔记很长时间了。我上大学永远做不到。我为工作而努力。我一直发现做笔记会失去我吸收当下内容并做出有意义贡献的能力。

黑曜石是第一个真正让我想做笔记的应用程序。通常的想法是，所有笔记都以降价书写。使用CMD + O（在不存在的情况下，还会为您创建页面）来回跳转非常容易。页面之间的链接以建立连接真的很容易，就像使用[[this]]这样的语法一样。黑曜石建立页面之间关系的可视图形（我是图形的傻瓜）。最后，您可以构建模板并将其插入CMD +T。模板极大地简化了捕获谁参加会议，议程，日期等所需的样板。

长话短说，尝试一下。 （或者什么也不要。）我是一个粉丝，认为如果我可以将其用作撰写博客文章的界面，我可能会写一些。

黑曜石有一些第三方的插件，可以做一些漂亮的事情。这些插件之一称为Obsidian Git，它可以自动将您的笔记备份到Git存储库。

我认为这必须是一种从远程github存储库中获取markdown内容并将其用作Gatsby的内容源的方法。有。

博客文章信息是通过markdown前置事项定义的。例如，此博客文章的主要内容：

---标题：buzzword.engineering Tech Stack日期：＆＃34; 12/26/2020＆＃34;发布：真正的模板：＆＃34; post＆＃34; slug：blog -tech -stack description：＆＃34;我终于开始整理一个使用Obsidian，Gatsby的博客，并使用Pipedream自动发推新帖子。 ---

我认为从这里开始我不是前端开发人员很重要。好吧，我们重新表述一下。我正在写一篇包含盖茨比的博客文章。所以说我是一个非常初级的前端开发人员可能更准确。

到目前为止，我对盖茨比（Gatsby）的想法是，它是一个用于构建静态网站生成器的框架。可能会有一对前端纯粹主义者或gatsby爱好者对这个定义有疑问，请让我知道您的评论中是否有更好的定义。

它使用React，对我来说，它比诸如把手或基于Go的html模板等功能强大得多。

Gatsby可通过丰富的插件生态系统进行扩展，这些生态系统有助于共享的GraphQL数据层。开发网站时，您可以查询数据层以获取特定页面/组件的内容。

我喜欢React，我认为Gatsby的可扩展性框架和GraphQL数据层非常出色。

关于盖茨比的另一件事是他们的初学者概念。对于这个博客，我从gatsby-starter-lumen开始了。

我必须自定义的第一件事是内容源。 Lumen入门程序从与博客本身相同的存储库中获取内容。值得庆幸的是，有一个名为gatsby-source-git的Gatsby插件，可让您从远程Git存储库中获取内容。

在开发过程中，我希望能够从Obsidian备份存储库的本地副本中获取内容。通过从名为gatsby-config.js的文件中导出javascript对象来完成Gatsby插件。

在这里，我根据是否设置了GATSBY_PREVIEW环境变量，在使用gatsby-source-git插件和[gatsby-source-filesystem]之间切换。

if（process .env。GATSBY_PREVIEW ==＆＃34; true＆＃34;）{控制台。日志（`使用本地文件路径：$ {siteConfig .obsidian .vaultPath}`）配置.plugins。取消移位（{解析：＆＃39; gatsby-source-filesystem＆＃39;，选项：{路径：siteConfig .obsidian .vaultPath，名称：＆＃39; local_obsidian＆＃39;，忽略：[＆＃34; ** / .git / ** / *＆＃34;，＆＃34; ** /。obsidian / ** / *＆＃34;，＆＃34; ** / Templates / ** / *＆＃34;]} }}}}其他{控制台。日志（＆＃34;从远程仓库获取：＆＃34;，siteConfig .obsidian .repo）配置.plugins。 unshift（{解析：`gatsby-source-git`，选项：{名称：`obsidian`，远程：siteConfig .obsidian .repo，pattern：[＆＃34;！** / Templates / ** / *＆＃34 ;，＆＃34; ** / *＆＃34;]}}）}

通过称为utteranc.es的漂亮工具，可以对博客文章进行评论。它是一个GitHub应用程序，每个博客帖子使用GitHub Issue线程来跟踪评论。

本着过早优化的精神，我想集成一种使用模糊搜索过滤博客帖子的方法。为此，我集成了Fuse.js并在博客中添加了一个新的Filter组件。

如何完成此操作的大多数逻辑可以在索引模板中看到。

我想插入一个正在进行过滤的gif文件。显然，这比使用Gatsby和gatsby-transform-remark来说容易。一旦gif可用，我将更新此帖子。

在网站按照我希望的方式实际工作时，我必须专注于我实际上擅长的方面：数字胶带。目标是更改Obsidian备份存储库中的markdown内容，以触发站点的部署，如果有新博客，则发送一条推文，让大家都知道。

首先，内容存储库需要触发站点的部署。我想到的最简单的方法是在博客帖子存储库上执行一个GitHub Action，它执行构建/部署逻辑。

这意味着我需要一种在一个存储库上调用GitHub Action的方法，作为在另一个存储库上执行Action的一部分。这是repository_dispatch事件派上用场的地方。基本上，这意味着您可以使用GitHub API触发操作​​。

名称：触发构建于：＃在主分支推送更改时触发此操作push：分支：[main]＃允许您从“操作”选项卡中手动运行此工作流程workflow_dispatch：Jobs：触发器：运行于：ubuntu-最新步骤： -名称：触发上游博客操作运行：| curl -XPOST \ -u＆＃34; $ {{secrets.PAT_USERNAME}}：$ {{secrets.PAT_TOKEN}}＆＃34; \ -H＆＃34;接受：application / vnd.github.everest-preview + json＆＃34; \ -H＆＃34; Content-Type：application / json＆＃34; \ https://api.github.com/repos/steven-terrana/steven-terrana.github.io/dispatches \ --data＆＃39; {＆＃34; event_type＆＃34 ;:＆＃34; blog＆＃ 34;}＆＃39;

甜。现在提交到Obsidian备份存储库将触发对博客存储库的操作。

下一步是使用博客库上的GitHub Action自动执行构建和部署步骤。该操作如下所示：

名称：在以下资源上构建和发布：repository_dispatch：workflow_dispatch：jobs：build-deploy-notify：runs-on：ubuntu-最新步骤：＃在$ GITHUB_WORKSPACE下签出您的资源库，以便您的工作可以访问它-name：结帐代码🛎使用：actions / checkout @ v2以及：persistent-credentials：false-名称：Install＆amp;生成🔧运行：| npm ci npm run build echo＆＃34; buzzword.engineering＆＃34; ＆gt; public / CNAME env：PAT_USER：$ {{secrets.PAT_USER}} PAT_TOKEN：$ {{secrets.PAT_TOKEN}}-使用：peaceiris / actions -gh -pages @ v3，其中：github_token：$ {{secrets.GITHUB_TOKEN}} publish_dir ：public force_orphan：是

我将自定义CNAME文件添加到公共目录，以便GitHub Pages知道此博客的自定义域。 （我绝对应该使用onPostBuild Gatsby Node API方法或其他方法将其合并到网站构建的继承部分中）。

因此，在这一点上，我们已经自动将内容更改部署到GitHub Pages。从提交到发布，整个过程大约需要三分钟。

最后一步是自动化，让所有人都知道我要说的任何新的有见地的事情！

之前，我通过定向广告偶然发现了Pipedream，直到被戴维·麦凯（David McKay）在rawkode.live上谈论他有多喜欢它时，才忽略了它。这是流的链接！

我进入了这个冒险之旅，以为我将不得不做各种花哨的逻辑和脚本来使其成为可能。我错了。

设置Pipedream帐户后，开始查看哪些事件源可用于触发工作流。好吧，Lumen gatsby入门程序已经使用gatsby-plugin-feed插件集成了RSS feed。 Pipedream有一个事件源，用于监视RSS提要。做完了

那很容易。接下来是自动发送推文。我认为这意味着要对Twitter Rest API或SDK进行一些研究。

不！ Pipedream还具有自动发送tweet的步骤，甚至使查询触发事件的工作流非常简单，该事件触发了工作流以新的博客文章信息为tweet内容提供模板。这是Pipedream中整个设置的样子：

整个工作流程花费了大约1分钟的时间来确定和配置。 我对它的简单程度感到几乎失望。 最后，这很无聊。 那可能是我可以给Pipedream最好的赞美。