侧边栏壁纸
博主头像
Gstory's Blog博主等级

每天进步一点点!

  • 累计撰写 108 篇文章
  • 累计创建 23 个标签
  • 累计收到 11 条评论

目 录CONTENT

文章目录

手把手教你用Flutter搭建属于自己的个人博客

gstory
2021-08-02 / 0 评论 / 1 点赞 / 208 阅读 / 3217 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-10-08,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

Flutter 2.0以来已经稳定支持web的开发,现在来教大家使用Flutter搭建一个个人的博客网站,使用Github提供的Actions、gh-pages服务,毕竟一时白票一时爽,一直白嫖一直爽。

1. 使用AndoridStuido创建一个Flutter项目

Dingtalk_20210512195651.jpg

2. Github注册一个账号,并且创建一个Repository

Dingtalk_20210512195915.jpg

3. 上传创建的Flutter项目到这个Repository的master分支中

4. 获取Github的access token

新建一个access token
Dingtalk_20210512200242.jpg
保存token,等下要用

Dingtalk_20210512200516.jpg

5. 配置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

1
web

评论区