全系列
- Flutter Web网站之主页框架搭建
- Flutter Web网站之Jetpack成型
- Flutter Web网站之ScrollView+GridView优化
- Flutter Web网站之最简方式实现暗黑主题无缝切换
- Flutter Web网站之Markdown展示与博客列表
简述
曾几何时，你有没有一个搭个人网站的冲动，我这个想法在我第一次开始写博客就有了，可就是没有搭起来，直到我看到flutter有了web支持，我就在想，是时候了，必须且一定要做，于是乎我就搭建了现在的网站ibaozi.cn，代码开源至https://github.com/ibaozi-cn/ibaozi，接下来，让我们看看如何搭建这个网站。
环境要求
- Flutter
需要切换beta版本来支持web开发
环境搭建跳至之前博客：Flutter系列之环境搭建 - Node
下载跳至： 下载| Node.js
入门跳至： 指南
环境配置： Node.js 安装配置| 菜鸟教程
脚手架：Express 生成器
具体操作步骤请往下看
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为你自己的项目名。执行完你会看到
接下来
cd myapp npm i npm start
浏览器试下http://localhost:3000看到如下就ok了
开始项目关联
- step 1
在Flutter项目中执行
flutter build web
构建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
ibaozi-cn/flutter-jetpack
最后的最后
登上你的云服务器，通过git 将项目下载到服务器上，这里我们需要工具辅助我们服务部署
我选择pm2+nginx来将我的服务启动起来
pm2：环境搭建
nginx：环境搭建
这里不详细说了，网上有一片大海，需要你去浪。有问题的留言我，我可以协助你。
最终通过pm2 和 nginx ，项目完美运行
jetpack.net.cn，没错你看到的是jetpack.ibaozi.cn，哈哈，域名还没下来，先用了之前的ibaozi.cn,后面我们会迁移到jetpack.net.cn。
总结
下期我们就开发Flutter 主页，遇到什么，需要借助什么，怎么写，为什么这么写，我们将在未来的博客中，带你一步步实现一个完整的网站，随我写下去。如果你想参与开发，请私聊我，合作共赢，加油。
