阅读 1162

Flutter 零成本搭建个人小博客

一直会喊我郭师傅的同学进了百度。为她感到高兴的同时心里也有一丝苦涩。 一样的职业,我还在小公司徘徊挣扎,人家已经脱离了苦海。 基础薄弱!静不下心!技术浅尝辄止!五年多的经验却还如新手一般只会搬砖!!!

既然写博客能沉淀自己的知识体系,成为面试的加分项。 那还不快去做!!

给自己搭一个零成本的博客网页,加油郭师傅!!

亲手打造 谷果之家

一 · 怎么下手?

身为开发者,我们都知道,搭建博客,至少需要一个服务器来存储博客网页,一个域名对外访问。在这个友好又和善的世界里,有没有慈善家给我们免费提供这种玩意呢?

我就找到了下面这几个备选方案

  • github page (移动用户需要翻墙,处于半墙状态,所以放弃了)
  • Coding page (最后的选择)
  • gitee page
  • leancloud 免费开发版
  • 阿里云oss 存图片 (基本不用钱,使用空间小的时候不用钱)

试试用上面的东西来搞一下。

二. 尝试可行性

  1. github 新建仓库,开启github pages 参考这个博客
  2. flutter构建简单的app demo
  3. 编译出web产物push到github(或者gitee 或者coding)

热泪盈眶,经过一番操作后,成功在在网页上打开了我的demo网页

不过搞东西难免踩坑,在此记录下我遇到的几个小坑

  • Flutter web 页面展示的时候中文先显示{口口},一会儿后再正确展示

原因是flutter web 在运行的时候 如果渲染模式使用的是 canvaskit时就会有该bug,可以强制指定渲染模式为html

在编译的时候添加参数:flutter build web --web-renderer html

  • 编译产物push到github 之后,打开网址展示的是一片空白???

stack overflow 大神给出了答案,在flutter web html入口处删掉 <base href="/">。 再次push,一切变为正常。

  • 阿里云解析解析域名不可用,最后还是使用新网解析
  • Github pages 的页面有些网络无法访问,需要翻墙且服务满,最后切换到了coding的网站托管

三.搭建leancloud 后端云服务

在leancloud 中创建账号,新建app。使用开发版云存储,一天免费三万次请求~哈哈哈 完全够用了

最好有个已经备案的域名~ 如果没有已经备案的域名,leancloud只能使用国际版服务器,速度很慢~

云存储建表

Leacloud 自带几个表,我再开发中用到了自带的_Role 和 _User表,顾名思义就是角色和用户表

在我的场景中用法十分简单。Role 规定了三种角色

  1. 管理员 (admin) —————我自己
  2. 普通用户(normal) ------普通用户 暂时用不上
  3. 游客(tourist)———游客 有人访问博客时候默认登录的账号

然后就是用户表和 文章表了。不再赘述

后端交互

因为leancloud 暂时没有flutter web的sdk,所以web前端与后端交互的方式是restfulapi的方式

ps:云存储有面向flutter 客户端的sdk,因为做的是web所以用不到

使用方式参考官方文档

主要开发流程

  • 首页 游客登录+获取文章列表
  • 管理员通过隐藏入口登录,可以上传文章删除文章
  • end

四.产出结果并部署

经过三四天时间的摸爬滚打加王者荣耀划水(成功打上了王者),终于将勉强可用的版本部署到了coding的托管网站上。

页面简简单单,寥寥几张图直接可以展示。

guuguo.top

五.结尾

我总是追不上别人,在别人后面踉踉跄跄。看着别人的生活幸福,工资高企,默默羡慕

人总是要从自己的舒适区走出去,碰点壁再回头也比永远缩着要好

一旦迈出第一步,人总会硬着头皮继续走下去

文章分类
前端
文章标签