自学内容网 自学内容网

[开源]语雀+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',
    },
  },
  

原文地址:https://blog.csdn.net/ll15982534415/article/details/140532773

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!