[开源]语雀+Vercel:打造免费个人博客网站
大家好,我是白露。
今天我想和大家分享我的今年的第一个开源项目 —— 基于语雀+Nextjs+Vercel实现免费的博客系统。
简单来说,你在语雀写博客,然后直接一键同步到个人网站上,网站自动部署!
而且,整个过程几乎不需要额外的成本,也不用充值语雀超级会员,hh。这个项目不仅解决了我长期以来的一个痛点,还大大提高了我的内容创作效率。
我相信,这个解决方案也能帮助到许多和我有同样困扰的技术博主们。
1. 开发背景
作为一个热爱技术的程序员,我一直有记录和分享技术内容的习惯。
最近几年,我一直使用语雀作为我的主要写作平台。原因很简单:语雀提供了优秀的编辑体验,特别是对于技术文档来说,它的代码块、表格和图表支持都非常出色。
然而,虽然我在语雀上积累了大量的技术文章,但这些内容似乎被局限在了一个相对封闭的环境中。语雀更像是一个私密的知识库,而非一个能让更多人发现我内容的平台。
意识到这个问题后,我开始思考如何让我的内容触达更多的读者。很自然地,我想到了自建博客网站这个方案。自己的网站,意味着我可以完全控制内容的展示方式,也可以通过各种SEO手段来提高文章的可见性。
但是,自建博客又带来了新的挑战:如何高效地管理内容?我调研了市面上常见的两种方案:
- 将博客内容以Markdown文件的形式直接存放在GitHub仓库中
- 将博客内容写入数据库,通过后端API实时读取
第一种方案看似简单,但每次更新内容都需要手动将语雀的文档复制到GitHub,这个过程最主要的问题就是太繁琐,我不想每次都手动同步一遍,虽然现在我之前一段时间就是这么做的。。。
而第二种方案虽然灵活,但会大大增加博客系统的复杂度,对于个人博客来说有点过于重量级了。
正当我为这个问题苦恼时,一个想法突然闪现:有没有可能创造一个系统,让我在语雀写完文档后,只需点击一个按钮,就能自动更新到我的个人网站呢?并且我还可以通过编辑语雀文章,个性化地改变网站。
这个想法让我兴奋不已。如果能实现这样的自动化流程,不仅能解决内容同步的问题,还能让我专注于创作本身,而不是被繁琐的技术细节所困扰。
带着这个想法,我开始了深入的研究和实验。经过不断的尝试和改进,我最终设计出了一个令人满意的解决方案。这个方案不仅满足了我的需求,还具有很强的可扩展性和适应性。
接下来,让我们一起深入了解这个解决方案的细节,看看它是如何彻底改变我的内容创作和发布流程的。
2. 实现思路
我想先概述一下整个系统的核心思路。这个自动化的内容发布流水线主要包含以下几个关键组件:
- Elog:这是整个系统的核心,负责将语雀文档自动同步到GitHub仓库。它就像是连接语雀和GitHub的一座桥梁。
- Contentlayer:作为博客网站的主体框架,Contentlayer负责将Markdown文件转换为易于在React应用中使用的结构化数据。
- Vercel:提供自动部署服务。每当GitHub仓库有更新时,Vercel就会自动触发新的部署,确保网站内容始终保持最新。
- YAML Front Matter:通过在Markdown文件的开头添加YAML格式的元数据,我们可以为每篇文章定义各种属性,如标题、日期、标签等。这些数据可以被用来控制网页的导航栏和菜单。
- 自动提交百度索引:为了提高网站的SEO效果,我编写了一个脚本,在每次部署完成后自动将新的或更新的页面提交到百度索引。
- 自动生成sitemap:同样出于SEO考虑,系统会自动生成网站的sitemap,便于提交给各大搜索引擎。
整个系统的工作流程如下:
- 我在语雀上创作或更新文章。
- 通过Elog,将语雀上的内容自动同步到GitHub仓库。
- GitHub仓库更新触发Vercel的自动部署。
- Contentlayer在构建过程中处理Markdown文件,转换为React组件可用的数据。
- 网站更新后,自动提交新页面到百度索引,并更新sitemap。
这个流程的美妙之处在于,除了第一步的内容创作,其他步骤都是自动进行的。
这就意味着,我可以将全部精力集中在写作上,而不需要担心技术细节。这简直太棒了!
这个解决方案有以下几个主要优势:
- 写作体验优先:继续使用熟悉的语雀平台进行写作,无需改变现有的工作流程。而且,我不觉得有我在自建网站上实现一个博客编辑器,有语雀编辑器更好。
- 自动化程度高:从内容同步到网站部署,再到SEO优化,全程自动化,大大减少了人工操作的需求。
- 灵活性强:通过YAML Front Matter,可以轻松控制每篇文章的元数据和展示方式。
- 性能出色:由于使用了SSG,站点访问速度和SEO都很不错。
- 成本低:利用GitHub和Vercel的免费服务,几乎没有额外的运营成本。
- 可扩展性好:这个架构可以轻松适应未来可能的需求变化,如添加新的内容类型或功能。比如,你可以基于个人的爱好,对网页排版和内容等进行自定义改造。
3. 细节介绍
现在,让我们深入每个核心组件的细节,看看它们是如何协同工作的。
3.1 Elog:语雀到GitHub的桥梁
Elog是这个系统中最关键的组件之一。它的主要任务是将语雀上的文档自动同步到GitHub仓库。
Elog的强大之处在于它不仅支持语雀,还支持Notion、飞书等多个写作平台。
Elog的工作原理相对简单:
- 通过API获取语雀上的文档列表和内容。
- 将获取到的内容转换为Markdown格式。
- 将转换后的Markdown文件推送到指定的GitHub仓库。
使用Elog非常简单,主要通过一个配置文件来控制其行为。以下是一个基本的配置示例:
// elog.config.js
module.exports = {write: {platform: 'yuque',yuque: {token: 'your_yuque_token',login: 'your_yuque_login',repo: 'your_yuque_repo',},},
相关文章:

[开源]语雀+Vercel:打造免费个人博客网站
大家好,我是白露。 今天我想和大家分享我的今年的第一个开源项目 —— 基于语雀+Nextjs+Vercel实现免费的博客系统。 简单来说,你在语雀写博客,然后直接一键同步到个人网站上,网站自动部署! 而且,整个过程几乎不需要额外的成本,也不用充值语雀超级会员,hh。这个项目…...
使用ElementUI和element-china-area-data库实现省市区三级联动组件封装
在前端开发中,省市区三级联动是一个常见的需求。今天我们将使用Vue.js和ElementUI组件库,结合element-china-area-data库,来实现一个省市区三级联动的组件。这个组件不仅可以提高用户体验,还能大大简化我们的代码。接下来…...

0718,TCP协议,三次握手,四次挥手
目录 上课喵: TCP(Transmission Control Protocol,传输控制协议)的状态迁移图 TCP连接的状态迁移图 状态迁移说明: 注意: big_htonl.c 字节序转换 addr.c IP地址的转换 作业喵: …...

如何安装Visual Studio Code
Visual Studio Code(简称 VS Code) Visual Studio Code 是一款由微软开发的免费、开源的现代化轻量级代码编辑器。 主要特点包括: 跨平台:支持 Windows、Mac 和 Linux 等主流操作系统,方便开发者在不同平台上保持一…...

vi 编辑器快捷生成 main 函数和基本框架
step1: 执行 sudo vi /etc/vim/vimrc (修改vimrc需要管理员权限:sudo) step2:输入用户密码,回车, 编辑vimrc文件 step3:在尾行输入以下代码(可复制) map mf i#include<stdio.h><ESC>o#includ…...
npm相关指令
切换镜像 腾讯镜像 npm config set registry https://mirrors.cloud.tencent.com/npm/ 淘宝镜像(新版) npm config set registry https://registry.npmmirror.com 淘宝镜像(旧版,已弃用) npm config set regist…...

为什么不要碰自媒体
要是失业了,搞自媒体,可行吗?毫无希望! 如今的自媒体早卷得不成样子了,很难再有机会,根本原因在于几乎没有增量用户的同时,存量用户也不再有剩余时间,全量用户的时间早已被几个自媒…...

酷炫末世意境背景404单页HTML源码
源码介绍 酷炫末世意境背景404单页HTML源码,背景充满着破坏一切的意境,彷佛末世的到来,可以做网站错误页或者丢失页面,将下面的代码放到空白的HTML里面,然后上传到服务器里面,设置好重定向即可 效果预览 …...
PHP 调用 1688 详情 API 接口的实战攻略
在电商领域,获取准确和详细的商品信息对于业务的发展至关重要。1688 作为国内知名的批发采购平台,其详情 API 接口为开发者提供了丰富的数据资源。本文将为您详细介绍如何使用 PHP 调用 1688 详情 API 接口。 一、前期准备 注册 1688 开放平台账号&#…...

SAP ABAP性能优化
1.前言 ABAP作为SAP的专用的开发语言,衡量其性能的指标主要有以下两个方面: 响应时间:对于某项特定的业务请求,系统在收到请求后需要多久返回结果 吞吐量:在给定的时间能,系统能够处理的数据量 2. ABAP语…...
【鸿蒙学习笔记】构建布局・选项卡 (Tabs)
官方文档:选项卡 (Tabs) 目录标题 底部导航顶部导航侧边导航限制导航栏的滑动切换固定导航栏・可滚动导航栏自定义导航栏切换至指定页签 底部导航 Entry Component struct Bujv_tabs {build() {Column() {Tabs({ barPosition: BarPosition.End }) {TabContent() {T…...

独立游戏《星尘异变》UE5 C++程序开发日志5——实现物流系统
目录 一、进出口清单 二、路径计算 三、包裹 1.包裹的数据结构 2.包裹在场景中的运动 四、道路 1.道路的数据结构 2.道路的建造 3.道路的销毁 4.某个有道路连接的建筑被删除 作为一个工厂类模拟经营游戏,各个工厂之间的运输必不可少,本游戏采用的…...

Web开发:<br>标签的作用
br作用 介绍基本用法常见用途注意事项使用CSS替代 介绍 在Web开发中,<br> 标签是一个用于插入换行符的HTML标签。它是“break”的缩写,常用于需要在文本中强制换行的地方。<br> 标签是一个空标签,这意味着它没有结束标签。 基本…...
DVC+Minio
由于参数文件比较大,因此onnx、engine等大文件弃用LFS管理,改用dvc管理: minio就是存储用的 启动miniosudo netstat -ntpl#查看端口号 sudo kill -9 $(sudo lsof -i:5061 -t) 关闭端口对应进程 ./minio server --console-address ":6570…...

C++内存管理(区别C语言)深度对比
欢迎来到我的Blog,点击关注哦💕 前言 前面已经介绍了类和对象,对C面向对象编程已经有了全面认识,接下来要学习对语言学习比较重要的是对内存的管理。 一、内存的分区 代码区:存放程序的机器指令,通常是可…...

手把手带你写一个精简版 HashMap 的 put 方法
👆🏻👆🏻👆🏻关注博主,让你的代码变得更加优雅。 前言 HashMap 大家工作中遇到的太多了,已经成了必须使用的类了, 在面试的时候 HashMap 基本是必问题,但是…...

【面试题】数据结构:堆排序的排序思想?
堆排序的排序思想? 堆排序是一种高效的排序算法,其基本思想是利用堆这种数据结构来实现排序。堆是一种特殊的完全二叉树,通常用数组来表示。堆排序的基本步骤如下: 1. 构建初始堆: 将待排序的数组转换成一个最大堆&a…...

PyTorch 深度学习实践-循环神经网络基础篇
视频指路 参考博客笔记 参考笔记二 文章目录 上课笔记基于RNNCell实现总代码 基于RNN实现总代码 含嵌入层的RNN网络嵌入层的作用含嵌入层的RNN网络架构总代码 其他RNN扩展基本注意力机制自注意力机制(Self-Attention)自注意力计算多头注意力机制…...
vue实现可拖拽dialog封装
一、实现modal弹窗组件 <template><divv-if"visible"class"customer-dialog"id"customer-dialog":style"dialogStyles"v-dialogDrag:[dialogDrag]><div class"dialog-container"><divclass"dial…...

本地多模态看图说话-llava
其中图片为bast64转码,方便json序列化。 其中模型llava为本地ollama运行的模型,如:ollama run llava 还有其它的模型如:llava-phi3,通过phi3微调过的版本。 实际测试下来,发现本地多模型的性能不佳&…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成:MAC头部frame bodyFCS,其中MAC是固定格式的,frame body是可变长度。 MAC头部有frame control,duration,address1,address2,addre…...

【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引,可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度(创建索引的主要原因)。3. 可以加速表和表之间的连接,实现数据的参考完整性。4. 可以在查询过程中,…...

ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store: 我们在使用异步的时候理应是要使用中间件的,但是configureStore 已经自动集成了 redux-thunk,注意action里面要返回函数 import { configureS…...
快刀集(1): 一刀斩断视频片头广告
一刀流:用一个简单脚本,秒杀视频片头广告,还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农,平时写代码之余看看电影、补补片,是再正常不过的事。 电影嘛,要沉浸,…...
uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)
UniApp 集成腾讯云 IM 富媒体消息全攻略(地理位置/文件) 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型,核心实现方式: 标准消息类型:直接使用 SDK 内置类型(文件、图片等)自…...

Android写一个捕获全局异常的工具类
项目开发和实际运行过程中难免会遇到异常发生,系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler,它是Thread的子类(就是package java.lang;里线程的Thread)。本文将利用它将设备信息、报错信息以及错误的发生时间都…...

OpenHarmony标准系统-HDF框架之I2C驱动开发
文章目录 引言I2C基础知识概念和特性协议,四种信号组合 I2C调试手段硬件软件 HDF框架下的I2C设备驱动案例描述驱动Dispatch驱动读写 总结 引言 I2C基础知识 概念和特性 集成电路总线,由串网12C(1C、12C、Inter-Integrated Circuit BUS)行数据线SDA和串…...

React、Git、计网、发展趋势等内容——前端面试宝典(字节、小红书和美团)
React React Hook实现架构、.Hook不能在循环嵌套语句中使用 , 为什么,Fiber架构,面试向面试官介绍,详细解释 用户: React Hook实现架构、.Hook不能在循环嵌套语句中使用 , 为什么,Fiber架构,面试向面试官介绍&#x…...