今日科技快訊

據(jù)外媒報(bào)道，在世界各地嚴(yán)格執(zhí)行“封城”措施，促使遠(yuǎn)程工作和學(xué)習(xí)激增后，全球?qū)€(gè)人電腦（PC）的需求在2020年第一季度飆升。但這場危機(jī)也導(dǎo)致生產(chǎn)和物流問題嚴(yán)重延誤，最終導(dǎo)致全球PC出貨量同比下降8%，蘋果Mac更是狂降21%。

作者簡介

本篇文章來自i校長的投稿，分享了他對(duì)用Flutter 搭建個(gè)人網(wǎng)站的過程，相信會(huì)對(duì)大家有所幫助！同時(shí)也感謝作者貢獻(xiàn)的精彩文章。

i校長的博客地址：

https://xintu.jianshu.com/u/77699cd41b28

簡述

曾幾何時(shí)，你有沒有一個(gè)搭個(gè)人網(wǎng)站的沖動(dòng)，我這個(gè)想法在我第一次開始寫博客就有了，可就是沒有搭起來，直到我看到flutter有了web支持，我就在想，是時(shí)候了，必須且一定要做，于是乎我就搭建了現(xiàn)在的網(wǎng)站ibaozi.cn，代碼開源至

https://github.com/ibaozi-cn/ibaozi

而這次我要做的并不是基于這個(gè)網(wǎng)站開發(fā)，我再次申請(qǐng)了一個(gè)新域名jetpack.net.cn，讀過我之前的博客可能直到，我做了一個(gè)Android Jetpack模版項(xiàng)目在線生成工具，我申請(qǐng)這個(gè)就是為了將Android Jetpack整合進(jìn)來，提供一個(gè)好記的域名。

當(dāng)然我還有另一項(xiàng)計(jì)劃，就是做一個(gè)Flutter 生態(tài)的Jetpack，這次博客就是計(jì)劃的第一步，完全開源給大家，讓讀我博客的同學(xué)們，跟我一起搭建一個(gè)網(wǎng)站，順便學(xué)習(xí)Flutter技術(shù)，好了不多說了，接下來，讓我們看看如何搭建這個(gè)網(wǎng)站。

環(huán)境要求

Flutter

需要切換beta版本來支持web開發(fā)。環(huán)境搭建跳至之前博客：Flutter系列之環(huán)境搭建。

https://xintu.jianshu.com/p/ab2bbcdc54d0

Node

下載跳至：下載| Node.js。

https://nodejs.org/zh-cn/download/

環(huán)境配置：Node.js 安裝配置。

https://xintu.runoob.com/nodejs/nodejs-install-setup.html

腳手架：Express 生成器。

https://expressjs.com/zh-cn/starter/generator.html

具體操作步驟請(qǐng)往下看。

Flutter 項(xiàng)目創(chuàng)建

假裝你已經(jīng)搭建好環(huán)境。

step 1

打開終端，切換Flutter 分支。

flutter channel betaflutter upgradeflutter config --enable-webflutter devicesChrome     ? chrome     ? web-javascript ? Google Chrome 78.0.3904.108

一行一行執(zhí)行命令，最后看到Chrome，祝賀你成功了。

step 2

打開Android Studio。

項(xiàng)目名字、描述簡單修改一下，next下一步。

修改一下包名，然后Finish，需要等待一會(huì)兒。

項(xiàng)目創(chuàng)建成功了。這里就到這，后期博客慢慢介紹每次開發(fā)的細(xì)節(jié)。

Node 項(xiàng)目創(chuàng)建

我們直接打開Flutter項(xiàng)目的Terminal。

mkdir nodemkdir servercd node/server

進(jìn)入server目錄，現(xiàn)在你的node環(huán)境應(yīng)該也可以了吧，好開始用Express 生成器生成項(xiàng)目。

npm install express-generator -g //安裝好了略過express --view=pug myapp

修改myapp為你自己的項(xiàng)目名。執(zhí)行完你會(huì)看到。

接下來：

cd myappnpm inpm start

瀏覽器試下http://localhost:3000看到如下就ok了。

開始項(xiàng)目關(guān)聯(lián)

step 1

在Flutter項(xiàng)目中執(zhí)行。

flutter build web

構(gòu)建web包，最終會(huì)在build文件夾下生成web包，web包下就是網(wǎng)站的相關(guān)文件。

step 2

copy web包下的文件到node項(xiàng)目的public文件下。

我創(chuàng)建了一個(gè)public_flutter_web，為了是以后文件區(qū)分，也建議你做一樣的操作。

step 3

改造express，因?yàn)槟J(rèn)express是展示 views包下的網(wǎng)頁的，而且默認(rèn)不是html實(shí)現(xiàn)。將下圖中文件全部刪除即可。

打開 app.js文件，刪除delete標(biāo)記部分，添加add標(biāo)記部分：

step 4

保存修改，重新將服務(wù)npm start，再打開http://localhost:3000?？吹饺缦拢?/p>

大功告成，這樣就行了嗎，nono，對(duì)于一個(gè)懶惰的人來說，我們要寫一些腳本，輔助項(xiàng)目自動(dòng)構(gòu)建。

step 5

由于node項(xiàng)目目錄太深，在命令行運(yùn)行也很麻煩，我們寫個(gè)shell腳本，來幫我搞定。在flutter項(xiàng)目根目錄創(chuàng)建bin文件夾，用來放置我們的腳本。

右鍵New File 命名為 test_start_node.sh，內(nèi)容如下：

#!/usr/bin/env bashnode node/server/bin/xintu

也很簡單。這個(gè)腳本就是輔助我們開啟node服務(wù)。當(dāng)然我們還會(huì)有flutter項(xiàng)

目構(gòu)建的一些腳本，自動(dòng)copy文件到指定目錄等等，這些之后慢慢補(bǔ)全哦。

最后

資料我已經(jīng)整理好了，需要的私信我【Flutter】我分享給你！

Flutter精選面試題

Flutter大型項(xiàng)目實(shí)戰(zhàn)

Flutter核心學(xué)習(xí)資料大全

將代碼上傳至github：

https://github.com/ibaozi-cn/flutter-jetpack

最后的最后

登上你的云服務(wù)器，通過git 將項(xiàng)目下載到服務(wù)器上，這里我們需要工具輔助我們服務(wù)部署。我選擇pm2+nginx來將我的服務(wù)啟動(dòng)起來。

這里不詳細(xì)說了，網(wǎng)上有一片大海，需要你去浪。有問題的留言我，我可以協(xié)助你。最終通過pm2 和 nginx ，項(xiàng)目完美運(yùn)行。沒錯(cuò)你看到的是jetpack.ibaozi.cn，哈哈，域名還沒下來，先用了之前的ibaozi.cn，后面我們會(huì)遷移到j(luò)etpack.net.cn。