/ 今日科技快訊 /
據外媒報導，在世界各地嚴格執行「封城」措施，促使遠程工作和學習激增後，全球對個人電腦（PC）的需求在2020年第一季度飆升。但這場危機也導致生產和物流問題嚴重延誤，最終導致全球PC出貨量同比下降8%，蘋果Mac更是狂降21%。
/ 作者簡介 /
本篇文章來自i校長的投稿，分享了他對用Flutter 搭建個人網站的過程，相信會對大家有所幫助！同時也感謝作者貢獻的精彩文章。
https://www.jianshu.com/u/77699cd41b28
/ 簡述 /
曾幾何時，你有沒有一個搭個人網站的衝動，我這個想法在我第一次開始寫博客就有了，可就是沒有搭起來，直到我看到flutter有了web支持，我就在想，是時候了，必須且一定要做，於是乎我就搭建了現在的網站ibaozi.cn，代碼開源至https://github.com/ibaozi-cn/ibaozi
而這次我要做的並不是基於這個網站開發，我再次申請了一個新域名jetpack.net.cn，讀過我之前的博客可能直到，我做了一個Android Jetpack模版項目在線生成工具，我申請這個就是為了將Android Jetpack整合進來，提供一個好記的域名。
當然我還有另一項計劃，就是做一個Flutter 生態的Jetpack，這次博客就是計劃的第一步，完全開源給大家，讓讀我博客的同學們，跟我一起搭建一個網站，順便學習Flutter技術，好了不多說了，接下來，讓我們看看如何搭建這個網站。
/ 環境要求 /
Flutter
需要切換beta版本來支持web開發。環境搭建跳至之前博客：Flutter系列之環境搭建。https://www.jianshu.com/p/ab2bbcdc54d0
Node
https://nodejs.org/zh-cn/download/
https://www.runoob.com/nodejs/nodejs-install-setup.html
https://expressjs.com/zh-cn/starter/generator.html
具體操作步驟請往下看。
/ Flutter 項目創建 /
假裝你已經搭建好環境。
step 1
打開終端，切換Flutter 分支。
flutter channel beta
flutter upgrade
flutter config --enable-web
flutter devices
Chrome • chrome • web-javascript • Google Chrome 78.0.3904.108
一行一行執行命令，最後看到Chrome，祝賀你成功了。
step 2
打開Android Studio。
項目名字、描述簡單修改一下，next下一步。
修改一下包名，然後Finish，需要等待一會兒。
項目創建成功了。這裡就到這，後期博客慢慢介紹每次開發的細節。
/ Node 項目創建 /
我們直接打開Flutter項目的Terminal。
mkdir node
mkdir server
cd node/server
進入server目錄，現在你的node環境應該也可以了吧，好開始用Express 生成器生成項目。
npm install express-generator -g //安裝好了略過
express --view=pug myapp
修改myapp為你自己的項目名。執行完你會看到。
接下來：
瀏覽器試下http://localhost:3000看到如下就ok了。
/ 開始項目關聯 /
step 1
在Flutter項目中執行。
構建web包，最終會在build文件夾下生成web包，web包下就是網站的相關文件。
step 2
copy web包下的文件到node項目的public文件下。
我創建了一個public_flutter_web，為了是以後文件區分，也建議你做一樣的操作。
step 3
改造express，因為默認express是展示 views包下的網頁的，而且默認不是html實現。將下圖中文件全部刪除即可。
打開 app.js文件，刪除delete標記部分，添加add標記部分：
step 4
保存修改，重新將服務npm start，再打開http://localhost:3000。看到如下：
大功告成，這樣就行了嗎，nono，對於一個懶惰的人來說，我們要寫一些腳本，輔助項目自動構建。
step 5
由於node項目目錄太深，在命令行運行也很麻煩，我們寫個shell腳本，來幫我搞定。在flutter項目根目錄創建bin文件夾，用來放置我們的腳本。
右鍵New File 命名為 test_start_node.sh，內容如下：
#!/usr/bin/env bash
node node/server/bin/www
也很簡單。這個腳本就是輔助我們開啟node服務。當然我們還會有flutter項目構建的一些腳本，自動copy文件到指定目錄等等，這些之後慢慢補全哦。
/ 最後 /
將代碼上傳至github：
https://github.com/ibaozi-cn/flutter-jetpack
/ 最後的最後 /
登上你的雲伺服器，通過git 將項目下載到伺服器上，這裡我們需要工具輔助我們服務部署。我選擇pm2+nginx來將我的服務啟動起來。
這裡不詳細說了，網上有一片大海，需要你去浪。有問題的留言我，我可以協助你。最終通過pm2 和 nginx ，項目完美運行。沒錯你看到的是jetpack.ibaozi.cn，哈哈，域名還沒下來，先用了之前的ibaozi.cn，後面我們會遷移到jetpack.net.cn。
推薦閱讀：
這本《第三行代碼》，讓大家久等了！
Android 10適配要點，作用域存儲
會用Retrofit了？你也能自己動手寫一個！
歡迎關注我的公眾號
學習技術或投稿
長按上圖，識別圖中二維碼即可關注