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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/47781.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿里云 申请免费ssl 证书

1控制台--数字证书管理服务 2 创建所需域名证书

PyTorch张量索引

文章目录 1、简介1.1、基本概念1.2、索引类型1.3、数据准备1.4、技术摘要⭐ 2、简单行、列索引3、列表索引4、范围索引5、布尔索引6、多维索引 🍃作者介绍:双非本科大三网络工程专业在读,阿里云专家博主,专注于Java领域学习&#…

Java基础编程500题——数组

💥 该系列属于【Java基础编程500题】专栏,如您需查看Java基础的其他相关题目,请您点击左边的连接 目录 1. 创建一个整型数组,包含5个元素,然后输出数组中的最大值。 2. 创建一个整型数组,包含10个元素&am…

tensorflow1基础函数学习

学习准备: 所需的库: tensorflow 1.12.0 numpy 1.19.5基本初始化函数 1.1 理解张量 tensor: 多维数组(列表), 阶:张量的维数 维数名字栗子0标量s 1, 2, 31向量v [1, 2, 3]2矩阵m [[1, …

Vue3 + uni-app 微信小程序:仿知乎日报详情页设计及实现

引言 在移动互联网时代,信息的获取变得越来越便捷,而知乎日报作为一款高质量内容聚合平台,深受广大用户喜爱。本文将详细介绍如何利用Vue 3框架结合微信小程序的特性,设计并实现一个功能完备、界面美观的知乎日报详情页。我们将从…

1. 个人谈心 ——【如何学习编程及合理安排休息时间】

📖 声明 ! ! ! 此文章仅仅属于个人思想,如有不满或者意见不相同,可以在评论区讨论留言,非常感谢支持!!! 💕个人主页:三亿老奶奶心中的梦 📘收录专栏&#xff…

github上的工程如何下载子模块.gitmodules如何下载指定的模块download submodules开源项目子模块下载externals

github上的工程如何下载子模块.gitmodules如何下载指定的模块download submodules 说明(废话)解决方案无法执行下载子模块无法下载子项目 说明(废话) 今天在编译一个开源库时,该开源库依赖其他项目,并且项目还挺多的,所以有此解决方案 在编…

Redis 延迟队列

Redis 延迟队列 1. 什么是延迟队列 延迟队列是一种特殊的队列,允许元素在特定的延迟时间之后才被消费。在一些场景中,如任务调度、订单超时处理、消息重试等,延迟队列是非常有用的。 2. Redis 实现延迟队列的原理 Redis 提供了一些数据结…

使用el-tree 处理权限树父节点半选和子节点选中获取,及回显父节点不覆盖所以子节点处理

1 获取 父子节点 key 当前 key id 设置el-tree <el-treev-if"isShowTree"ref"treeRef2"style"max-width: 260px":data"assistantListTree"show-checkbox:default-expand-all"isExpandAll"node-key"id":chec…

收银系统源码-商城下单,门店接单

随着新零售时代的不断进步&#xff0c;线下线上一体化的收银系统&#xff0c;被很多门店越来越重视。用户在线上商城下单后&#xff0c;门店如何接单呢&#xff0c;如何处理订单呢&#xff1f; 1.收银系统开发语言 核心开发语言: PHP、HTML5、Dart后台接口: PHP7.3后合管理网…

STM32全栈嵌入式人脸识别考勤系统:融合OpenCV、Qt和SQLite的解决方案

1. 项目概述 本项目旨在设计并实现一个基于STM32的全栈人脸识别考勤系统。该系统结合了嵌入式开发、计算机视觉和数据库技术&#xff0c;实现了自动人脸检测、识别和考勤记录功能。 主要特点: 使用STM32F4系列微控制器作为主控制器采用OpenCV进行人脸检测和识别Qt开发跨平台…

c# excel转pdf

前提条件&#xff1a; 电脑安装了&#xff1a;Microsoft.Office。如没有安装&#xff0c;则不可以调用此方法。 public string ExceltoPdfs(string excelpath, string pdfpath){try{Microsoft.Office.Interop.Excel.Application app new Microsoft.Office.Interop.Excel.App…

LVS+Nginx高可用集群---keepalived原理与实战

1.高可用集群架构keepalived双机主备原理 高可用&#xff1a;(HA) 部署nginx存在两台nginx。当主节点的nginx宕机停止服务的时候&#xff0c;nginx备用机起到跟nginx(主) keepalived的概念&#xff1a;解决单点故障&#xff1b;组件免费&#xff1b;可以实现高可用HA机制&…

封装poi操作excel超实用的工具类

适用poi版本&#xff1a;5.2.2 1.行索引获取Row对象 可能sheet页对象没有创建这一行&#xff0c;可能为空&#xff0c;为空时先创建Row再返回 public static Row safeRow(Sheet sheet,int i){Row row sheet.getRow(i);if(row null){row sheet.createRow(i);}return row;} …

【音视频 | HTTP协议】HTTP协议详细介绍(HTTP方法、报文格式、报文头部字段、状态码)

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

git实现多人协作开发同一个项目

Git 是一个非常流行的分布式版本控制系统&#xff0c;用于管理代码版本。在多人协作开发同一个项目时&#xff0c;Git 提供了一系列功能和工作流来帮助团队有效地协同工作。 1. 初始化 Git 仓库 首先&#xff0c;确保你的项目目录已经初始化为一个 Git 仓库。如果没有&#x…

推出全新的ZL3079x、ZL3069x、ZL3066x同步器,优化用于5G运输和无线基础设施设备

一、单通道、双通道和三通道IEEE1588/SyncE网络同步器 ZL3079x提供1个、2个和三个独立的组合硬件和软件平台定时通道&#xff0c;包括IEEE 1588-2008精确时间协议栈和同步算法。该设备使用miTimePLL定时技术&#xff0c;为5G传输和无线基础设施设备提供新的改进功能。该器件非…

正则表达式在Python中的高级应用:从HTML中提取数据

正则表达式在Python中的高级应用&#xff1a;从HTML中提取数据 作为一名资深的Python程序员&#xff0c;我深知正则表达式在文本处理中的重要性。尤其是在处理HTML文档时&#xff0c;正则表达式可以成为我们提取数据的强大工具。在本文中&#xff0c;我将通过一个实际的例子&a…

低代码前端框架Amis全面教程

什么是Amis&#xff1f; 1.1 Amis的基本概念 Amis是一个基于JSON配置的前端低代码框架&#xff0c;由百度开源。它允许开发者通过简单的JSON配置文件来生成复杂的后台管理页面&#xff0c;从而大大减少了前端开发的工作量。Amis的核心理念是通过配置而非编码来实现页面的构建…

阿里云ACP云计算高级攻城狮通用知识

&#x1f525;概述 阿里云云计算高级工程师ACP认证是面向使用阿里云云计算产品的架构、开发、运维类人员的专业技术认证&#xff0c;主要考核考生利用阿里云云计算技术服务体系设计稳定、安全、高性能、易扩展、低成本的企业云计算架构的能力。 前提&#xff1a;在写适用人群…