我的网站优化记实

腾讯云1核2G支撑的面试怪圈服务是如何实现的？揭秘Ta的架构设计与黑科技！Nice！

很多程序员有自己的博客网站，拥有一个属于自己的网站是每个程序员的梦想，拥有一个高访问量的网站更是一个程序员的期许，做网站好玩、有趣、有成就感、可以忘我。因此没有理由程序员不拥有一个属于自己的小站，一个管理系统也好，一个博客也好，一个瞬间分享也好，每一次后台的访问数据+1，都有一点点小激动~

Cool,是不是打动你了,那么今天和大家闲聊一下拥有一个1核2GB的腾讯云服务器，我是如何搭建的网站及我的设计思路。

以下是我今天要分享的话题：

• 我的网站的简介与现状呢？（融合百度统计）
• 如何快速搭建一个自己的网站？（腾讯云控制台操作）
• 我的网站的架构设计是什么样？（最小服务器资源的架构设计）
• 网站做了哪些优化呢？（干货多！）

网站的简介与现状

面试怪圈官网是一个程序员资源分享的平台，当然包含前端、后端、大数据、运维甚至还可以有产品的资料。

设计到上线周期为一周，面试怪圈官网的第一版本，在2021.7.2正式上线了，以下是当时发的朋友圈。

最初网站做的很简单，首页是一个卡片分页，展示全部的资源。点击进去查看资源详情，可以下载。

一个月过去了，面试怪圈过得好不好？答案是面试怪圈一直在前进的路上，从未止步！可以看下百度统计的数据。后面我会告诉大家如果将自己的网站的监控集成到百度统计。

• PV统计

• UV统计
• 新老用户数统计

其中跳出指的是用户打开第一个页面后关闭了页面。

如何快速搭建一个自己的网站？

第一步，首先购买一个云服务器。国内的云服务器有腾讯云、阿里云、华为云等，以下是几个云的比对（以下内容来自知乎，仅供参考）：

• 阿里云：

适合人群：中小企业

优点：阿里云依托于阿里巴巴集团，通过对其丰富的网络资源进行整合，拥有自己的数据中心，是国内云服务器的大佬，品牌名气较大。阿里云的国际输出速度快。目前，有北京、青岛、杭州、香港机房可选，多线BGP接入；

缺点：价格相对较贵，硬盘I/O速度较差，硬盘不能直接扩容大小，必须新购买硬盘迁移数据。

• 腾讯云：

适合人群：游戏客户、开发者、APP用户等。

优点：腾讯云跟微信对接有天然优势，目前用户主要以游戏应用为主。腾讯云服务器使用公共平台操作系统，团队完全负责云主机的维护，并提供丰富配置类型虚拟机，用户可以便捷地进行数据缓存、数据库处理与搭建web服务器等工作。腾讯对游戏和移动应用类客户提供了较强的扶持政策，比较适合这类型的客户使用。

缺点：普通中小客户和中网站客户难以通过审批，腾讯提供的配套设备也不适合这部分客户使用。

• 华为云：

适合人群：政府、大中型企业、银行等大客户。

优点：华为企业云贯彻了华为公司"云、管、端"的战略方针，聚焦I层，使能P层，聚合S层，致力于为广大企业、政府和创新创业群体提供安全、中立、可靠的IT基础设施云服务。华为企业云依托业内的基础设施，在全国设置多个云服务区，部署多个云计算中心资源池，主要以安全性为卖点，采用了分层和纵深防御理念。

缺点：会出现不稳定的情况。

我选择的是腾讯云-轻量应用服务器，第一次购买，价格非常美丽也很友好300多大洋3年。

我选择的配置如下，但唯一的缺点是月流量有限制：500GB,因此节流才是王道：

第二步，给自己选择一个匹配的域名，如果能选择名称既贴切，并且6位以内的域名，那就赶紧下手吧。我咨询网站挂了msgq的com域名，转让费16400，每年还是要续费的。 而一手购买的域名价格一般为几十块钱/年。

当然，购买一个域名后，并不能直接使用。还需要走以下几步：

1. 实名认证，也就是让域名要实名到某个人身上。
2. 网站备案，腾讯云小程序即可办理。
3. 网站底部一般备注备案号，同时链接到工信部的网站。比如腾讯云网站下方展示如下：

4. 域名解析，在腾讯云上可完成操作，在记录值填写你的服务器ip，其他默认即可：

当然，第三步肯定要开发一个自己的应用，部署上去。

我的网站的架构设计是什么样？

1核2G我是如何设计呢？性能高、带宽低、统计全，你可能也注意到了我的网站有很多图片，我是如何做到低带宽呢？这里我绘制了一张简单的架构图：

• msgq-server负责门户展示服务，也就是进入面试怪圈官网的页面。
• Cache层保证了低配下能够快速响应，减少存储直接访问。由于网站资源变动频率相对较低，缓存再合适不过了，这里由于服务器资源的限制，并没有使用分布式缓存，而直接使用JVM内存。
  Cache层实现比较简单，使用Springboot的@Cacheable注解。
• msgq-manager是后台管理，负责资源的录入。
• Mysql按照的8的版本，并且使用Docker安装。
• 百度统计将用户的行为数据记录下来，以便更好的分析网站的数据。
• 为什么是免费的图片存储服务？并没有购买对象存储服务，我想到了markdown云编辑器，复制图片后，会生成一个图片链接，经验证，图片不会失效，因此获取了一个免费、无容量限制的图片存储。黑科技，Very Nice！
• 百度网盘比较大，特别适用存储大量资源，我的网盘TB以上的存储。
• 微信公众号服务提供了自动回复功能，提升关注转换率。
• 访腾讯安全或者360的半透明浮窗，近实时展示网站的流量数据，比如pv、uv、。
• 统计网关负责统一的统计出口，包括百度统计提供的pv、uv，微信公众号提供的关注数、网站服务自身的统计数据。但是这个网关需要做服务认证，防止内部数据外泄。

因此，上面的架构设计，通过浏览器浏览图片并没有占用服务器的带宽，而是通过浏览器直接到图片存储服务。我只需要关心文本传输，也就是json数据带来的带宽损耗。

网站做了哪些优化呢？

除了架构上说到的几点：

• 应用服务器无图片存储，节约带宽。防盗链破解 但是，markdown服务器也是做了防盗链的措施。我们只需在我们的页面Head标签中增加如下代码，就可以成功绕过：

<meta name="referrer" content="no-referrer" />

• 缓存提升查询性能
  资源分享类的网站，更新频率较低，可以将数据缓存，减少对Mysql数据库的访问，提升页面的拉取数据的速度。

• seo优化
  搜索引擎会爬取我们的网站，因此我们需要做页面tdk优化，也就是我们网站head下的title、description、keywords。tdk设置的合理会在一定程度上满足爬虫的胃口，提升关键字的权重。但对于小网站来说，过热的词很难得到排行，第一页往往是广告位。
  因此，我们选择的是长尾词，比如java面试资料。如何选择长尾词，可以借助百度的热搜提示，如图：

• 网站首页改造提升留存率 以下是网站访问的热点分布，从左到右，从上到下：

因此，要将网站的精华放置到最上边，菜单栏从左到右排布。同时，丰富首页的内容，更利于延迟访问者的停留时间，降低跳出率。
还有一点，合理的布局及丰富的内容有利于搜索引擎爬虫的深度和广度爬取。 我是这样布局的：

• 下载方式的改变，提升关注度
  原有的设计方式，在资源详情页：有资源的url和关注的二维码。后台统计数据分析，发现点击了链接，没有去扫描二维码关注下载的用户比较多。 客观原因主要有二：

1. 跳转到百度网盘，却找不到提取码
2. 跳转到百度网盘，需要回到原页面找二维码，不方便导致放弃。 改版以后如下图：

• 引入图片预览插件，提升资源预览体验 资源详情页，图片无法放大，或者翻页查看。我们引入Viewer.js提升了对图片的预览体验。该插件强大、简洁，力荐：

• 利用百度统计分析我们的数据 百度统计的接入很简单，可以通过官方快速接入。只需要在页面head标签中嵌入一段代码即可。 百度统计让我们更了解网站的各项指标，比如：
• pv
• uv
• 实时访问监控
• 搜索引擎关键词访问监控
• 外链来源监控
• 来客的地域分布
• 来客年龄分布
• 新客、旧客统计
• 访问页面排行 ... 等等，通过百度统计会发现很多有趣并且有价值的数据。

今天就分享到这里了，我是公众号「面试怪圈」的Yesterday，喜欢技术、喜欢研究，今天的文章如果您感兴趣，可以关注下方公众号，一起交流技术：

下面是面试怪圈交流群，里面有很多一线大厂大佬，可为大家答疑解惑，欢迎加入，如果过期，可关注公众号添加我个人微信，我拉大家入群：