微话搭建优质 Web 应用
伴随前端计划的快速更新，搭建个人网站，已然变得极其容易，方式也越发多样；加上 Progressive Web Apps（PWA）不断普及，极大的提升了 Web 页面表现，改善了用户体验，让 Web 应用成为了现实。前几年，在公司内部，有根据自己的一些实践，做了关于「搭建优质 Web 应用」的分享，现同步于此，希望能给更多想搭建 Web 应用的朋友一些参考。
备注：声享，是一个非常出色的、在线制作 PPT 网站；早在 2017 年就基于声享而做此分享内容；可惜，这两年声享已不再能够访问，早年的分享资料，也就此遗失；可见数据备份的重要性，尤其是存储在互联网上的内容。今偶在个人 Mac 访问之，或许是缓存之缘故，竟又得其内容，便梳理出来，整理于此，以享看官。
故事
为何要搭建一款 Web 应用(独自)？😄
- 服务自己 & 大众；
- 增长相关技艺；
- 搭建个人品牌；
- 开拓收入来源；
- 额外收益（面试、交朋友等）；
- Influence is money；
整一款什么样子的 Web 应用？😉
Awesome List? 工具站？社区？博客？... ...
- 有趣！
- 有范儿！
- 有价值！
策划
**这是其中极为重要的一环！**✍️
- 功能主旨；
- 全局规划；
- 交互哲学；
- 视觉设计；
编码
如若想好了，那接下来就是一个字：“干”（四声调😂）！
- 前端：Vue ｜React | Angular ... ...
- 后端：Node(Koa2) + MongoDb + Redis / ...
- 编辑器：VsCode｜ SublimeText3 ｜ Atom；
- 代码规范：Prettier、Eslint、Airbnb ...
- 代码提交：husky、lint-staged、pre-commit、Gitmoji；
部署
这一步对于我前端选手来讲，需要学习的有点多 😊
- 域名 ：最好是语义话很强的名字 👐🏻
- 服务器 ：DigitalOcean, 阿里云 ... ...
- Https ： 这个不仅得有，且必须得有。
- 备案 ：备案难，难过上蜀道 & 青天 😂。
- 运维 ：Nginx／ Pm2 ／ Zsh... ...
- CI/CD : Docker ( ! So Nice.) K8S ...
优化
优秀的产品必经不断的锤炼和优化♻️
- Webpack 打包优化之体积篇；
- Webpack 打包优化之速度篇；
- PWA Progressive Web App；
- 开箱即用的 Vue Webpack 脚手架模版
- 如何写一手漂亮的 Vue；
- 功能 / 视觉 / SEO / 工作流 / 测试...
运营
做了一款优秀产品，没更多人知道，谁之过耶？🙃
- 社区分享：
知乎，简书，倾城之链、V2ex, HacPai ... - 社交平台：朋友圈，微博，FB，Twitter ...
- 个人影响：前面是不是有提到"个人品牌"呢？
- 自传播：SEO | 依靠用户自发安利？
示例
没有实践，没有发言权，SO：得有示例 😊。
- 项目名称：倾城之链；
- 项目意义：作为一个开放平台，旨在云集全球优秀网站，探索互联网中更广阔的世界； 在这里，你可以轻松发现、学习、分享更多有用或有趣的事物；
- Github 代码（前端）： nicelinks-vue-client，后端代码，因为些原因，已放在个人仓库。
模板
经一番折腾，对搭建一款 Web 应用，在技术上有了些积累，便将可公用的代码，抽离了出来，开源于 Github 仓库：Docker Vue Node Nginx Mongodb Redis（🐉 An awesome boilerplate, Integration Docker, Vue, Node, Nginx, Mongodb and Redis in one, Designed to build & develop your web applications more efficient and elegant），以便对于有此爱好的朋友，可以有所参考。除此外，在这期间，因为用到的技术较多，也就开始维护一份与时俱进版前端资源教程。