2020年更新:
域名及服务器过期,更新地址
目前效果:https://hongxh.cn/me/
前言
前段时间突然心血来潮想搭建了一个个人网站,就买了个云服务器开始折腾。其实单纯个人网站一个页面比较轻松,主要期间顺便把之前自己整的几个vue、react 的小项目也一起修修改改部署上去,还是忙乎了一会。
网站的页面和功能都比较简单,涉及的技术和技术难度都不大。不过涉及的技术点比较多,虽然网上很多教程,不过由于版本问题等还是遇到很多坑。再加上有四个网站需要一起部署。现在网站整的差不多,就把这段时间的积累整理下,方便自己查看及需要的朋友。
本篇就不像其他文章那样一步一步贴代码上来了,首先是太多了o(╥﹏╥)o,其次走过的这么多坑告诉我,项目中的问题,优先找官方,找文档,手把手的教程虽然好用,但是还是可能有很多问题。
目前实现:
- 前端 nuxt,pc端移动端都能正常访问, docker引用node镜像;
- 后端 spring-boot,swagger查看测试,docker引用自制jdk8镜像;
- gitlab 托管代码,安装 gitlab-runner,编写CI脚本, 实现自动化部署,创建运行对应docker镜像;
- 网站绑定域名,完成网站的备案;
- 安装ssl证书实现全站 https;
- 百度提交链接。
目前效果:在线查看
注:
- 个人网站,本站没有木马,由于
360申诉无果
,如果打开页面存在360误报,点击继续访问
即可 - 由于使用https,站内其他项目链接访问可能弹出
“您的连接不是私密连接”
,依次点击高级
→继续访问
即可,有什么错误或者需要也可以直接联系我 O(∩_∩)O~
PC端:
移动端:
其他:
服务器
首先是服务器,这块也是遇坑最多,最难整的一部分。
乱七八糟的云里,选择了阿里云,配置这里就不细说了,我买的1核2G的。
由于公司采用gitlab托管代码,自动化部署到docker,个人觉得这套非常好,所以项目里就引进来了,首先尝试了自己搭建gitlab-ce服务器,然后由于云服务器配置问题放弃了。刚装上,linux命令都延迟,gitlab一会一个502,虽然能跑起来,但2G内存还是太少,最后选择了gitlab.com代替。
服务器相关资料整理:
-
Linux教程 及 Linux命令学习 (常用命令,Vim,用户管理,Shell基础)
-
Mysql 的 yum 安装 和 使用 (数据库)
-
jdk 的安装 ( yum list java* 查找安装)
-
Maven 的安装 (官方下载解压 ,添加PATH)
-
pm2 的 安装 和 使用 (Node.js应用程序的生产过程管理器)
-
Node环境安装 (下载解压,添加PATH)
其他相关操作:
后端
然后是后端业务处理,需要实现评论新增、新增时邮件提示和评论列表两个接口,由于之前从事过后台开发,加上需求很简单,所以这部分相对轻松一些,如有需要,这部分的操作后续再整理。
- springboot 官方文档
- JPA 文档
- swagger2
其他相关操作:
- https的实现
- 阿里云关闭了发送邮件需要的25端口,需要采用465端口
前端
最后就是前端页面展示了,作为前端,这部分还是要思考下的。
- 方案一:jquery
这是最优解,网上模板很多,加上jq比较熟悉,下下来稍微修修改改,so easy。不过作为一个前端,怎么能这么草率,这样的网站是没有灵魂的。 - 方案二:vue / reactjs
vue 和 reactjs 应该是目前最火的两个框架了 ,不过spa的单页面虽然高效,不过还是有弊端,比如seo,而两者的 ssr 都比较麻烦,毕竟页面比较少,不想手动搭折磨自己。 - 方案三:next / nuxt
之前尝试开发了一个基于vue仿element的组件库,在个人网站里有,有兴趣也可以看看,也是由于对vue的熟练度大于react,所以选择了nuxt,还有,create-nuxt-app 在创建项目的时候就能帮你一次性搞定多个配置。另外,vuetify 还为你提供了很多模板,也就是说,还是简单改改页面,o(╥﹏╥)o,好吧。
前端相关资料整理:
- Nuxt.js 官方文档 — 基于 Vue.js 的通用应用框架
- Vuetify 官方文档 —基于 Vue.js 实现material风格的UI库
- Express 指南 — 基于 Node.js 平台,快速、开放、极简的 Web 开发框架
- Axios 指南 — 基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
其他相关操作:
- Material Design Icons (在vuetify中有相关说明,开箱即用)
- mate优化 (keyword 及 description 还有百度认证需要的 mate)
- 百度网站收录设置自动提交 (我做的处理是粘贴自动提交代码)