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 查看項目源碼