Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

382 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

预览

(上图展示文章编辑)

(上图展示 pc 与 mobile )

前言

「梁同桌 Blog」 是一款追求「极致简约」的产品,用简约的方法展现文字的美感。

「地址: http://www.liangtongzhuo.com

功能

  • 在线实抒写 Markdowm
  • 代码块高亮
  • 自适应布局

技术依赖

  • 原生 JavaScript ,ES6 语法
  • 第三方框架
    • marked 转换 Markdown
    • highlight 代码块高亮

技术原理

静态页面托管到 GitHub 并生成 Pages ,使用本地 JSON 文件存储文章数据,图片存储在本地 files 目录。

从 LeanCloud 迁移到本地文件存储

迁移原因

  • 时代变迁:AI技术发展改变了后端基础设施需求
  • 减少依赖:摆脱第三方服务限制
  • 提高性能:本地存储加快加载速度
  • 开发便捷:本地调试无需网络
  • 数据可控:完全掌握数据所有权

迁移内容

  • 数据存储:从 LeanCloud API 迁移到本地 JSON 文件(data/articles/ 目录)
  • 图片存储:从 LeanCloud _File 迁移到本地文件(data/files/ 目录)
  • 代码简化:移除 av.js 依赖,使用纯前端 fetch API 获取数据
  • 路径修复:确保图片路径正确解析

本地开发

  1. 克隆仓库git clone https://github.com/liangtongzhuo/blog.git && cd blog
  2. 启动服务器
    • Python: python3 -m http.server 8000
    • Node.js: npx http-server -p 8000
  3. 访问http://localhost:8000

写文章

  1. data/articles/ 创建 JSON 文件(如 new-article.json
  2. 基本结构:
    {
      "title": "文章标题",
      "content": "Markdown 内容",
      "createdAt": "2026-03-20T00:00:00.000Z",
      "tag": "标签1,标签2"
    }
  3. 图片放入 data/files/ 目录,使用相对路径引用

部署

  1. 提交代码git add . && git commit -m "Add new article" && git push
  2. 启用 GitHub Pages:仓库 Settings -> Pages -> 选择 main 分支
  3. 访问https://yourusername.github.io/blog

结尾

迁移到本地文件存储后,博客系统更加独立高效,数据完全可控,同时保持了原有功能和界面。

GitHub 地址:https://github.com/liangtongzhuo/blog

About

Web Blog 🍉

Topics

Resources

Stars

18 stars

Watchers

1 watching

Forks

Releases

Packages

Used by

Contributors

Languages