前端：搭建自己的个人网站

作为一名h5开发者，我常常不会满足于仅仅写页面业务逻辑和对接后端接口。

（当然，如果是想当摸鱼王，我还是会满足的，哪怕只写一个静态页面，我也满足了。）

我不甘心只看到界面上的这一点区域，我渴望，了解更广阔的世界。

于是乎，就有了搭建自己的个人网站的想法。

使用的工具和技术包括：墨刀-vue-node.js-mysql-navicate-宝塔面板

以下步骤不用严格按照先后顺序，比如网站备案可能要花很久，可以作为第一步。

又比如，我一边开发，一边有点新想法，我又可以回来修改原型。

毕竟在这里，我是产品经理，是ui设计，是前端，也是后端。即，我可以，为所欲为。

1. 原型

搭建网站首先需要有需求和原型图。

我的网站有哪些内容，我想表达些什么，我想分享些什么，这个难度不低于写作文。

后期这还需要个人不断地思考和延伸，对网站版面进行更新升级。

推荐使用墨刀在线工具，进行原型设计。

2. 设计

有了原型图，就需要进行UI设计，进一步美化页面。推荐使用ps。

不过今天的重点是搭建网站，这里我先偷懒，直接下一步。

3. 开发

开发过程需要三个项目：前端项目，接口项目，后台项目。

前端开发不多说，使用vue全家桶即可。

后端开发这边，要对照原型，先设计数据库，使用navicate建库建表建字段。

然后创建node.js接口项目，使用express框架进行开发。

接口一般标配增删改查，我的习惯是增加用post，删除用delete，修改用put，查询用get。

4. 服务器

项目写完了，本地都可以跑了，下一步肯定是要想办法把它们部署到服务器上了。等等，我还没买服务器呢！

4.1 购买服务器

我买的是腾讯云的云服务器，先买最便宜的就行，我买的1核2GB的，选的是centOS系统，搞活动时买的，好像一年不到100块。

4.2 购买域名

顺便把域名也买了，用.top的就行，价格只需几块钱，比如我买的是hahaha.top。

不过后面域名备案会麻烦点，需要根据邮件和接到的电话，不断调整备案材料内容。

4.3 连接服务器

下载一个服务器连接工具，如finalShell（下载地址：https://www.jb51.net/softs/717120.html） 输入服务器的ip地址和密码，即可连接成功。

5. 宝塔面板

5.1 安装宝塔面板

输入y 就安装，安装完会显示登陆链接，以后就可以在线操作服务器了。

理论上来说，毕竟是linux系统，通过finalShell命令行，可以进行服务器的大部分操作。

但用惯了windows的我，还是更喜欢可视化的界面。所以就要安装宝塔面板。

宝塔面板常用的功能有添加站点、网站、ftp等。

需要先在软件商店里安装apache，pm2管理器，mysql，node环境等。

5.2 添加站点

进入宝塔面板，添加网站。比如我可以添加一个demo.hahaha.top，www.hahaha.top，m.hahaha.top。

添加完成后，进入网站目录，可上传静态文件，如简单的测试html或vue项目打包生成的文件。

注：网站需要dns解析，使得网站域名和ip地址挂钩。需要进入腾讯云，添加解析记录。将刚才添加的demo、m这些都添加到解析记录中。

5.3 添加数据库

在宝塔面板上添加数据库，可以先把本地数据库导出为sql文件，然后上传到线上的这个数据库。

然后在node项目中将连接mysql的账号密码改为线上的。

6.部署

6.1 前端项目

网站项目和管理后台项目，将通过npm run build打包之后生成的文件，上传到指定的网站目录就行了。

6.2 后端项目

先将除了node_modules文件夹之外的node项目文件，上传到某个目录，如/wwwroot/website-api/

使用finalShell进入该文件夹，使用npm install安装依赖。

使用node app.js测试是否启动

当退出该命令后，项目会停止，为了让项目一直启动，可以使用以下命令：

以上命令仍然需要持续连接服务器，如需关闭连接，仍可运行，可采用pm2

这样node项目就好持续运行了，和本地一直开着node app.js一个效果。

注：比如接口项目用的是3000端口，这个端口需要先在云服务器中添加到安全组规则

到这里，基本就完成了，网站可以打开访问，可以请求接口，后台可以修改数据。