Flutter + GitHub Issues + GitHub Pages 实现我的博客站点和客户端

bga_issue_blog

• 当前为 Flutter 版本，一套代码支持 Android、iOS、Web，点击进行预览
• 查看 Vue 版本

使用了该博客系统的我的博客站点列表，若是你的我的博客站点也使用了该博客系统，但愿你能追加你的我的博客站点连接到这里面

项目背景

刚接触 GitHub 的时候就开始在仓库 bingoogolapple.github.io 里建立 Issues 来记录学习笔记，那时候我还不知道有 GitHub Pages，后来了解到了能够经过 GitHub Pages 来搭建 我的博客站点，可是若是涉及到在文章里嵌套图片的话仍是比较麻烦的

经过 Issues 记录学习笔记的优势：

• 在线编辑和预览，随时添加和提交（不用担忧电脑坏了致使笔记丢失）
• 当笔记里到嵌套图片时，支持粘贴屏幕截图和拖拽添加图片
• 带有搜索和排序功能
• 可经过 Label 来对 Issues 进行分类
• 能够把每个 Comment 做为一个小的知识点不停的追加到 Issue 里
• 结合 GitHub Pages 绑定域名来搭建我的博客站点

效果图

Web - PC

Web - Phone	Web - Phone	Web - Phone

Phone	Phone	Phone

使用方法

本地运行

1.安装依赖

flutter pub get
复制代码

2.在浏览器中运行

flutter run -d chrome
复制代码

3.修改我的配置「bga_issue_blog/lib/utils/config.dart」

class Config {
  // 配置我的 GitHub 名称
  static final gitHubUsername = 'bingoogolapple';

  // 根据 GitHub 名称自动组装存放 issues 的仓库
  static final repo = '$gitHubUsername/$gitHubUsername.github.io';

  // 配置我的连接图片映射
  static final personalLinkMap = {
    'images/github.png': 'https://github.com/bingoogolapple',
    'images/git.png': 'https://bingoogolapple.gitbooks.io/bgalearningnotes-git',
  };

  // QQ 配置信息
  static final qqTitle = 'BGA 系列\n';
  static final qqDesc = '开源库 QQ 群';
  static final qqQrImg = 'images/qq-group.png';

  // 网站备案信息
  static final webSiteInfo = '©2014 - ${DateTime.now().year} bingoogolapple\n蜀ICP备17023604号';
}
复制代码

发布到 GitHub Pages

1.打包

dart build_web_preview.dart
复制代码

2.发布

拷贝「bga_issue_blog/docs」目录里的全部文件到「GitHub Pages」的根目录下
并将「GitHub Pages」仓库 PUSH 到 GitHub 上
复制代码

绑定域名到 GitHub Pages

1.在「GitHub Pages」根目录下添加文件名为「CNAME」的文件，文件内容就是你的二级域名，例如个人是

www.bingoogolapple.cn
复制代码

2.登陆你的域名控制台添加域名解析

「记录类型」选择「CNAME」
「主机记录」填「www」
「记录值」填「GitHub用户名.github.io」，例如个人是「bingoogolapple.github.io」
复制代码

点击查看前往 GitHub 查看项目源码