[开源]语雀+Vercel：打造免费个人博客网站

大家好，我是白露。

今天我想和大家分享我的今年的第一个开源项目 —— 基于语雀+Nextjs+Vercel实现免费的博客系统。

简单来说，你在语雀写博客，然后直接一键同步到个人网站上，网站自动部署！

而且，整个过程几乎不需要额外的成本，也不用充值语雀超级会员，hh。这个项目不仅解决了我长期以来的一个痛点，还大大提高了我的内容创作效率。

我相信，这个解决方案也能帮助到许多和我有同样困扰的技术博主们。

1. 开发背景

作为一个热爱技术的程序员，我一直有记录和分享技术内容的习惯。

最近几年，我一直使用语雀作为我的主要写作平台。原因很简单：语雀提供了优秀的编辑体验，特别是对于技术文档来说，它的代码块、表格和图表支持都非常出色。

然而，虽然我在语雀上积累了大量的技术文章，但这些内容似乎被局限在了一个相对封闭的环境中。语雀更像是一个私密的知识库，而非一个能让更多人发现我内容的平台。

意识到这个问题后，我开始思考如何让我的内容触达更多的读者。很自然地，我想到了自建博客网站这个方案。自己的网站，意味着我可以完全控制内容的展示方式，也可以通过各种SEO手段来提高文章的可见性。

但是，自建博客又带来了新的挑战：如何高效地管理内容？我调研了市面上常见的两种方案：

1. 将博客内容以Markdown文件的形式直接存放在GitHub仓库中
2. 将博客内容写入数据库，通过后端API实时读取

第一种方案看似简单，但每次更新内容都需要手动将语雀的文档复制到GitHub，这个过程最主要的问题就是太繁琐，我不想每次都手动同步一遍，虽然现在我之前一段时间就是这么做的。。。

而第二种方案虽然灵活，但会大大增加博客系统的复杂度，对于个人博客来说有点过于重量级了。

正当我为这个问题苦恼时，一个想法突然闪现：有没有可能创造一个系统，让我在语雀写完文档后，只需点击一个按钮，就能自动更新到我的个人网站呢？并且我还可以通过编辑语雀文章，个性化地改变网站。

这个想法让我兴奋不已。如果能实现这样的自动化流程，不仅能解决内容同步的问题，还能让我专注于创作本身，而不是被繁琐的技术细节所困扰。

带着这个想法，我开始了深入的研究和实验。经过不断的尝试和改进，我最终设计出了一个令人满意的解决方案。这个方案不仅满足了我的需求，还具有很强的可扩展性和适应性。

接下来，让我们一起深入了解这个解决方案的细节，看看它是如何彻底改变我的内容创作和发布流程的。

2. 实现思路

我想先概述一下整个系统的核心思路。这个自动化的内容发布流水线主要包含以下几个关键组件：

1. Elog：这是整个系统的核心，负责将语雀文档自动同步到GitHub仓库。它就像是连接语雀和GitHub的一座桥梁。
2. Contentlayer：作为博客网站的主体框架，Contentlayer负责将Markdown文件转换为易于在React应用中使用的结构化数据。
3. Vercel：提供自动部署服务。每当GitHub仓库有更新时，Vercel就会自动触发新的部署，确保网站内容始终保持最新。
4. YAML Front Matter：通过在Markdown文件的开头添加YAML格式的元数据，我们可以为每篇文章定义各种属性，如标题、日期、标签等。这些数据可以被用来控制网页的导航栏和菜单。
5. 自动提交百度索引：为了提高网站的SEO效果，我编写了一个脚本，在每次部署完成后自动将新的或更新的页面提交到百度索引。
6. 自动生成sitemap：同样出于SEO考虑，系统会自动生成网站的sitemap，便于提交给各大搜索引擎。

整个系统的工作流程如下：

1. 我在语雀上创作或更新文章。
2. 通过Elog，将语雀上的内容自动同步到GitHub仓库。
3. GitHub仓库更新触发Vercel的自动部署。
4. Contentlayer在构建过程中处理Markdown文件，转换为React组件可用的数据。
5. 网站更新后，自动提交新页面到百度索引，并更新sitemap。

这个流程的美妙之处在于，除了第一步的内容创作，其他步骤都是自动进行的。

这就意味着，我可以将全部精力集中在写作上，而不需要担心技术细节。这简直太棒了！

这个解决方案有以下几个主要优势：

1. 写作体验优先：继续使用熟悉的语雀平台进行写作，无需改变现有的工作流程。而且，我不觉得有我在自建网站上实现一个博客编辑器，有语雀编辑器更好。
2. 自动化程度高：从内容同步到网站部署，再到SEO优化，全程自动化，大大减少了人工操作的需求。
3. 灵活性强：通过YAML Front Matter，可以轻松控制每篇文章的元数据和展示方式。
4. 性能出色：由于使用了SSG，站点访问速度和SEO都很不错。
5. 成本低：利用GitHub和Vercel的免费服务，几乎没有额外的运营成本。
6. 可扩展性好：这个架构可以轻松适应未来可能的需求变化，如添加新的内容类型或功能。比如，你可以基于个人的爱好，对网页排版和内容等进行自定义改造。

3. 细节介绍

现在，让我们深入每个核心组件的细节，看看它们是如何协同工作的。

3.1 Elog：语雀到GitHub的桥梁

Elog是这个系统中最关键的组件之一。它的主要任务是将语雀上的文档自动同步到GitHub仓库。

Elog的强大之处在于它不仅支持语雀，还支持Notion、飞书等多个写作平台。

Elog的工作原理相对简单：

1. 通过API获取语雀上的文档列表和内容。
2. 将获取到的内容转换为Markdown格式。
3. 将转换后的Markdown文件推送到指定的GitHub仓库。

使用Elog非常简单，主要通过一个配置文件来控制其行为。以下是一个基本的配置示例：

// elog.config.js
module.exports = {write: {platform: 'yuque',yuque: {token: 'your_yuque_token',login: 'your_yuque_login',repo: 'your_yuque_repo',},},