GitPedia

VBlog

使用GitHub API 搭建一个可动态发布文章的博客

From GitHub-Laziji·Updated June 22, 2026·View on GitHub·

博客可搭建在 GitHub Pages 上, 文章数据储存于gist 中, 通过Github API 与数据进行交互, 实现无后台、可动态发布文章的博客系统 The project is written primarily in Vue, distributed under the Mozilla Public License 2.0 license, first published in 2018. It has gained significant community traction with 1,477 stars and 337 forks on GitHub. Key topics include: element, github-api, github-page, vant, vblog.

VBlog


English Documents

简介

博客可搭建在 GitHub Pages 上,
文章数据储存于gist 中, 通过Github API 与数据进行交互, 实现无后台、可动态发布文章的博客系统

使用的组件

  • Element (电脑端)
  • Vant (移动端)

项目截图

博客截图
博客截图
博客截图
博客截图

快速使用

搭建博客只需2步

  • 点击github头像旁边的 "+" 号 选择 Import repository 克隆地址填 https://github.com/GitHub-Laziji/GitHub-Laziji.github.io 项目名填 你的用户名.github.io
  • 克隆完成后 修改文件 /static/configuration.json 中的 githubUsername 为自己的github用户名

类似演示地址其中 GitHub-Laziji 为我的用户名

现在 https://你的用户名.github.io 就是你的个人博客

开发

安装 运行 构建

npm install

npm run dev

npm run build

获取Token

github > settings > Developer settings > Personal access tokens 勾选gistrepo权限 获取Token

开发注意事项

  • 配置文件读取的总是与 index.html 同级的 ./static/configuration.json, 所以本地 npm run dev 的时候会出现修改配置无效的情况, 如果需要修改的话修改本地的配置文件就行, 发布到 github 之后不影响, 因为修改配置的时候是通过 github-api 修改 你的用户名.github.io 下的 /static/configuration.json

License

Code licensed under the Mozilla.


作者 Laziji

Contributors

Showing top 1 contributor by commit count.

View all contributors on GitHub →

This article is auto-generated from GitHub-Laziji/VBlog via the GitHub API.Last fetched: 6/29/2026