開頭
想必很多小夥伴們都有寫部落格的習慣，這其中大部分無法自定義部落格樣式的，使用的或許是類似於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地址，有感興趣的小夥伴可以多多交流：