手把手教你用Flutter搭建屬於自己的個人部落格

gstory發表於2021-05-12
Flutter

Flutter 2.0以來已經穩定支援web的開發，現在來教大家使用Flutter搭建一個個人的部落格網站，使用Github提供的Actions、gh-pages服務，畢竟一時白票一時爽，一直白嫖一直爽。

  1. 使用AndoridStuido建立一個Flutter專案

Dingtalk_20210512195651.jpg

  1. Github註冊一個賬號，並且建立一個Repository

Dingtalk_20210512195915.jpg

  1. 上傳建立的Flutte專案到這個Repository的master分支中

  2. 獲取Github的access token

新建一個access token Dingtalk_20210512200242.jpg 儲存token，等下要用

Dingtalk_20210512200516.jpg

  1. 配置Actions secrets，name隨便填寫，value填入剛剛獲取的token

Dingtalk_20210512200640.jpg

6.配置Actions

Dingtalk_20210512200843.jpg

Dingtalk_20210512201013.jpg

需要填寫的規則

name: Flutter Web
on:
  push:
    branches:
      - master
jobs:
  build:
    name: Build Web
    env:
      my_secret: ${{secrets.commit_secret}}
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: subosito/flutter-action@v1
        with:
          channel: 'dev'
      - run: flutter pub get
      - run: flutter build web --release
      - run: |
          cd build/web
          git init
          git config --global user.email aaa
          git config --global user.name bbb
          git status
          git remote add origin https://${{secrets.commit_secret}}@github.com/xxx/yyy.git
          git checkout -b gh-pages
          git add --all
          git commit -m "update"
          git push origin gh-pages -f
複製程式碼

aaa-你的郵箱 bbb替-你的名稱 xxx-你的git名字 yyy為-Repository名字

然後我們每次提交修改到master上時，Actions都會自動幫我們打包web到gh-pages分支上，完成Actions後，我們可以檢視flutter構建的部落格網站，一般網址為https://你的git名字.github.io/Repository名字/。

這裡記得注意的是需要修改web目錄下index.html中

<base href="/">
修改為Repository的名字
<base href="/flutter_blog/">
複製程式碼

不然在開啟網頁的時候會找不到資源。

這裡分享一個自己的寫的簡易的開源blog網站， flutter_blog

相關文章