记录个人主页的上线过程 · blog.hudome.vip

忽略 Github pages，这也许是我的第一个 Personal page

前端使用 Vue-cli2.x webpack2.x 搭架子，上线了 Linode 的服务器，代码托管在 Github，本地运行容器化的 Jenkins 持续集成

下一步，创建后台资源管理系统，省去频繁替换主页展示内容的代码工作量，继续完善主页的内容以及添加各个二级页面，加油！

主页地址：gary’s homepage

前端框架

前端框架选择上没有什么纠结的，个人主页定位在轻量、灵活、图片动画展示，所以重型机械 Angular 以及自由战士 React 就被 Pass 了，Vue 在这个方向上太合适了，并且个人想深度了解一下 Vue 在组件化上的实现，连学代练。

因为之前已经有过 Vue 粗糙的开发经验了，所以这次直接使用官方脚手架，快速上手搭个好架子。

1
2
3

$ npm install -g vue-cli

$ vue init webpack my-vue

一路选项下来，hot reload、ESlint、test，一个工程所需要搭建的基础都有了。

我觉得像这种个人项目就别给自己找不自在了，ESlint 见仁见智，保持良好的代码规范即可，没必要搞太多的条条框框，疯狂报错影响心情，Test 以后有机会可以搞一下，这个阶段就先不上了

热加载，Vue 单文件组件开发，配合 node-sass、autoprefixer 写CSS，而且又不想兼容低版本 IE，本地开发舒服美滋滋！

玩了这么久 VPS，到现在仍然只开一个的原因不言而喻，穷。

服务器中部署应用，计划采用容器化的应用部署，这样做屏蔽了复杂多变的环境影响，不仅稳定性提高，而且管理上也更加方便。

本站的定位是轻量级应用，所以 Docker的基础镜像选择体积较小，必要功能ok的即可，关键词：alpine-nginx-nodejs，配置容器内部的环境就不多赘述了。

前端代码 git clone 进容器，打包压缩哈希完成之后，顺手把下载下来的源代码清除，只留下静态文件，最小化镜像体积。代码集成到容器内部，不使用外挂卷，这样做的好处在于，一个容器就是一个应用，同外面的唯一联系就是端口，清楚明了。

Docker 容器内需要配置 nginx 指定 root 地址到前端静态文件根目录。然后设置服务器的 nginx 端口，监听 80 server_name，指向 Docker 容器绑定的端口。

我们每次更新代码都需要重新配置服务器的应用容器，是对劳动力的极大浪费，所以下一步，持续部署！

没有写测试，你好意思叫持续集成吗？

持续部署常用的轮子如下：

本次项目选择用 Jenkins 来做持续部署，具体的安装配置过程不多说，主要记录一下项目的部署回滚过程。

Jenkins 暂时运行在本地机器上，安装一些必要的插件 SSH、git 等等。