【项目推荐】搭建自己的个人主页

你是否想过将自己的简历做成一个单页面的网站？在这个网站上可以自定义你想展示的内容，不只求职信息，求偶信息也可以！试试下面的代码吧。
本文首发于微信公众号 呼哧好大枫，原作者与本文作者系同一人。

项目地址：http://hlt.cab/

代码开源地址：

• 中文：https://gitee.com/kkacdbdk/personal-homepage
• 英文：https://github.com/spcodhu/personal-homepage.git

技术栈：

• Nuxt（https://nuxtjs.org.cn/docs/getting-started/introduction）
• Nuxt UI（https://ui.nuxt.com/）
• TailWind（https://www.tailwindcss.cn/）
• PM2 部署（https://pm2.io/docs/plus/overview/）

页面实际效果

PC 端

手机端

项目背景以及为什么使用 Nuxt

作为一个日常充实、生活丰富的程序员，在 BOSS 等网站上上传的简历只能展示我们的技能和求职信息，生活中还有很多有趣的内容也可以展示在自己的简历上（如读书笔记、旅游日记、游戏段位等），方便其他人进一步地了解我们自己。因此，在我看来，有一个专属于自己的站点，能完全自定义的展示自己的内容，不管是对于我们找工作、还是论坛冲浪，亦或是交友求偶，都是很有帮助的。

综上具体地，需求分析如下：

• 网站需要同时支持 PC 端和移动端，以方便更多人访问；
• 这个网站只有一个页面，只需要展示我们设置好了的信息，提供文字、图片等给用户阅读，除了少数的超链接跳转外没有其它的和用户交互，最好使用纯前端实现；
• 因为只有一个页面的缘故，我希望这个页面在客户端加载得越快越好，最好是不要有首屏加载的时间（很多用 Vue 实现的网站进入首屏时都得加载一会，有的甚至需要先下载近 100KB 的 js 文件）；
• 由于是个人主页网站，网站成本都是自己掏腰包，因此成本不能太高；
• 对于我自己来说，我还希望网站使用的技术栈不能太老，最好借此尝试一下比较新的技术栈。

调研了一圈，网上的个人主页模板在我看来主要有两个缺点：

1. 页面大多充满了动画和背景图片，实际的内容有点空，而且动画和背景也有点花哨。我希望做的页面应该和简历很像，也可以看作电子简历；
2. 技术栈有点老了，很多使用的是 bootstrap 或者原生 HTML，技术不新奇，不够吸引我。

最终选择使用 Nuxt 实现。Nuxt 是一个基于 Vue 的开源 Web 框架，它继承了 Vue 的很多优点，而且由于使用服务端渲染的原因，基于 Nuxt 的网站首屏加载通常很快，相比传统 Vue 的客户端渲染，更符合个人主页的需求。此外，Nuxt 对于搜索引擎 SEO 也很友好，可以帮助我们的页面更快地被搜索引擎收录，从而被更多人访问到。

成本分析：

1. 阿里云 2核2G 服务器 99 元一年（99计划）；
2. 阿里云个人域名 36 元一年；

一年不超过 150 元，约等于两个“Hua西子”，还是很划算的。

开源食用

项目的实现非常简单，笔者从一个不懂 Nuxt 和服务端渲染的小白到实现完成总共花了 3 天。代码也主要是实现样式和布局，其中用 Flex 和 TailWind 做样式比较多，参阅这俩的官方文档很容易很懂。

但是还是建议有一定 Vue 基础的开发者，阅读 Nuxt 的官方文档之后再上手更改。

项目遵循 Apache-2.0 开源协议，且无商用限制。

更详细的内容，请阅读代码仓库中的 REDEME 文档。

项目当前状态

项目并未完全实现完成。 因为我自己还是希望把这个做全一点的，具体来讲，还有几个点尚未完成：

• 需要加一个中英文切换的功能，使页面内容可用中英文展示；
• 页面内容尚未补充完整，比如旅游日记，后续准备加一个地图组件；
• 尝试给页面加上监控，考虑用第三方还是自己做。

欢迎 star，关注后续动态！

---

微信公众号：呼哧好大枫