简介曾几何时，你是不是也有建立个人网站的冲动？刚开始写博客的时候就有这个想法，但是直到看到flutter才开始构建。Web支持，我当时就在想，是时候了，必须做，必须做，所以我建了现在的网站ibaozi.cn，代码开源到https://github.com/ibaozi-cn/ibaozi，还有这个啥我这次想做的不是基于这个网站开发。我重新申请了一个新的域名jetpack.net.cn。看了我之前的博客，做了一个AndroidJetpack模板项目的在线生成工具。我申请的这个为了集成AndroidJetpack，提供一个好记的域名，当然我还有另外一个打算，就是打造一个Flutter生态的Jetpack。这个博客是计划的第一步。它对每个人都是完全开源的。看我的博客同学，跟我一起建网站，顺便学学Flutter技术。好吧，让我们看看如何建立这个网站。环境要求Flutter需要切换到beta版本支持web开发环境搭建Node.js入门跳转至：指南环境配置：Node.js安装配置|:Expressgenerator的具体操作步骤见下文创建Flutter工程假设你已经搭建好了环境step1打开终端，切换Flutter分支flutterchannelbetaflutterupgradeflutterconfig--enable-webflutterdevicesChrome?chrome?网络javascript?谷歌浏览器78.0。3904.108逐行执行命令，终于看到Chrome了，恭喜你成功了。步骤2打开AndroidStudio项目名称和描述，简单修改。接下来修改下一步中的包名，然后Finish。你需要等一会儿。项目创建成功。暂时就这些，后面的博客会慢慢介绍每一个开发的细节。Node项目创建我们直接打开Flutter项目的Terminalmkdirnodemkdirservercdnode/server进入server目录，此时你的node环境应该没问题了，开始用Express生成器生成项目npminstallexpress-generator-g//安装要跳过express--view=pugmyapp修改myapp为你自己的项目名。执行完之后会看到下一个cdmyappnpminpmstartbrowser试试http://localhost:3000看到如下就ok了启动项目关联步骤1、在Flutter项目中执行flutterbuildweb来构建web包，最后会在build文件夹下生成web包，网站的相关文件都在web包下。步骤2将web包下的文件复制到node项目的public文件中。我创建了一个public_flutter_web。为了以后区分文件，我也建议大家做同样的操作。Step3改造express，因为默认express是展示views包下的网页。而且默认不是html实现。删除下图中所有文件打开app.js文件，删除删除标记部分，添加添加标记部分步骤4保存修改，重启服务npmstart，然后打开http://localhost:3000看下面：大功告成，这就够了吗，nono，对于一个懒人来说，我们不得不写一些脚本来帮助项目自动构建。step5由于node项目目录太深，在命令行运行也很麻烦。让我们编写一个shell脚本来帮助我完成它。在flutter项目的根目录下创建一个bin文件夹来放置我们的脚本。右键单击新建文件并将其命名为test_start_node.sh。内容如下#!/usr/bin/envbashnodenode/server/bin/www也很简单。这个脚本就是帮我们启动节点服务的。当然我们也会有一些flutter项目搭建的脚本，自动复制文件到指定目录等等，这些以后慢慢完善。最后将代码上传到githubibaozi-cn/flutter-jetpack最后登录到你的云服务器，通过git将项目下载到服务器。这里我们需要工具来辅助我们进行服务部署。我选择的是pm2+nginx来启动我的服务起床pm2：环境设置nginx：环境设置这里就不赘述了，网上海阔天空，需要自己去冲浪。如果您有任何问题，请给我留言，我可以帮助您。最后通过pm2和nginx，项目完美运行jetpack.net.cn。没错，你看到的就是jetpack.ibaozi.cn。哈哈，域名还没下。先用之前的ibaozi.cn，后面迁移到jetpack.net.cn。综上所述，下一期，我们将开发Flutter主页，遇到什么，需要用到什么，怎么写，为什么要这样写。我们会在以后的博客中一步步带你实现一个完整的网站，跟着我一起写。如果你想参与开发，欢迎私聊，合作共赢，加油。
