开头
想必很多小伙伴们都有写博客的习惯，这其中大部分无法自定义博客样式的，使用的或许是类似于hexo上各种各样好看的博客模版吧。
应该也有很多与我一样，不具备前端开发能力的小伙伴，想要从头到脚自定义一个属于自己的个人博客，可到了最后也无从下手。
而不便出门的这些天，无聊的我，躺在床上思考人生的同时，也决定使用flutter web 去完成我这个“蓄谋已久”的计划了。
行动
因为flutter web的不成熟，所以很多第三方库都处于起步甚至缺失的状态。于是我不打算让这个博客有什么花里胡哨的功能，这样会轻松不少。
而在此前，我已经在sketch上完成了博客的初步设计
博客的分类设计也参考了我正在使用的hexo主题
UI确定后，对照UI进行设计即可。
迁移
界面已经用flutter实现了，可是之前的博客系统和现在用flutter写的完全不一样，如何把之前的markdown文件迁移到现在的博客系统中来呢？
在思考方案的同时，我还对flutter web进行了测试，看一看类似于图片的文件能否跟随项目一起打包。
测试后发现，在flutter中对某个文件夹进行声明，比如 assets ，就可以将该文件中的内容一起打包了，这点和在移动平台上是一致的。
同时，'dart:io' 库无法在flutter web中正常使用，这意为着无法在web中进行类似于在移动端上的文件操作。
所以我选择通过本地编写dart文件操作代码，来对markdown文件进行批量处理，同时将生成后的文件存入 assets 目录，这样一同发布即可
部署
flutter web编译后的产物要放到哪里呢？
因为之前我使用的 hexo + github page 来部署的个人博客，所以这次就是 flutter web + github page
具体操作可以参考这篇文章：
Flutter Web — Github Actions-Github Pages
结合目前的 github action ，可以很方便的做到推送即发布 & 更新
坑
使用flutter web完成个人博客的期间，的确是因为flutter web本身的不成熟，遇到过不少的问题。
下面就来一一介绍
无法识别 assets 目录中的中文文件
在使用 rootBundle.loadString() 加载 assets 目录中的 中文markdown文件 时,会出现无法识别中文的问题,具体可以查看这个issue：
cannot load assets file starting with "#" from the rootBundle after install
目前看来在 flutter 1.14.7-pre.58 版本这个问题已经得到了修复。
markdwon的展示效果不够好
目前 flutter_markdown 插件对于web端的显示效果不如在移动端上的协调。后续要看开发者是否会进一步去更新了。
字体文件过大
可以明显的看到，个人博客中是使用到了特殊字体的，不同于英文字体只有26个字母，中文字体的汉字非常多，所以字体文件非常大。这对导致网络不佳的情况下加载速度会慢很多
目前还没有一个比较简便的压缩办法，所以解决办法是加载网页的时候异步加载字体
总结
如果想要把 flutter web 拿去进行生产还为时尚早，因为它的表现还不尽如人意，但是如果做一点简单的东西，还是可以让没有前端开发知识的小伙伴获得极大的满足感。比如像我一样写一个个人博客之类的。
整体感受就是这样吧，下面是博客地址：
然后是github地址，有感兴趣的小伙伴可以多多交流：
