我是如何搭建个人主页的
我发现单纯的PDF简历在篇幅和形式上有很大限制,早些时候我曾尝试在微信公众号上发布内容,但编辑繁琐并且功能匮乏,所以决定制作这个网站向大家展示和分享我的工作。
这个网站是通过mkdocs-material制作的,并借助GitHub Pages发布到互联网上。此外,我还使用了阿里云和腾讯云的服务设置了域名并加速网站访问(国内访问GitHub服务器较慢)。其中的主要花费是购买域名和CDN加速服务,也就是说,如果你不需要自定义域名或者针对国内访问加速的话,部署个人网站的财务成本是零(但你还是需要花费大约一个下午的时间)。
我的整个部署流程是:配置开发环境制作和发布网页自定义域名CDN加速,我不会详细地介绍每一步如何操作,但我会将我所用到的资料都提供给你,并提醒你可能遇到的“坑”。
配置开发环境
我在这里列出了我所用到的开发工具,你需要对这些工具有一些基本的了解。未来我会写一些相关的介绍,但在此之前你可能要查阅一些相关资料。
网页制作是在python环境下进行的(但不需要编写任何python代码),这里我使用anaconda来安装和管理python环境,使用pycharm,来编写和测试网页。如果你有vscode,那么它可以完全代替pycharm。
Tip
你可以在这个页面申请pycharm的教师/学生认证,从而免费使用pycharm
此外,我们还需要Git工具将网站同步到GitHub上,后续对网页的更新也一直需要用到它。如果你不熟悉Git和GitHub,你可以把GitHub当作一个网盘,每当你对电脑上的代码进行修改后Git可以帮你把变动同步到网盘上。此外,GitHub提供的Pages服务还能帮我们把网页发布到互联网上,让其他人可以访问,因此在开始前你需要注册一个GitHub账号。
制作网页
我制作网页使用的是mkdocs-material,它可以帮助你用简单的markdown语法进行网页设计,而不需要编写html代码,例如下面是这个页面的一部分markdown代码:
## 配置开发环境
我在这里列出了我所用到的开发工具,你需要对这些工具有一些基本的了解。未来我会写一些相关的介绍,但在此之前你可能要查阅一些相关资料。
网页制作是在python环境下进行的(**但不需要编写任何python代码**),这里我使用[anaconda](https://www.anaconda.com/download)来安装和管理python环境,使用[pycharm](https://www.jetbrains.com/pycharm/download/?section=windows),来编写和测试网页。如果你有vscode,那么它可以完全代替pycharm。
!!! tip
你可以在[这个](https://www.jetbrains.com/community/education/#students)页面申请pycharm的教师/学生认证,从而免费使用pycharm
此外,我们还需要[Git](https://git-scm.com/downloads)工具将网站同步到[GitHub](https://github.com/)上,后续对网页的更新也一直需要用到它。
如果你不熟悉Git和GitHub,你可以把GitHub当作一个网盘,每当你对电脑上的代码进行修改后Git可以帮你把变动同步到网盘上。此外,GitHub提供的Pages服务还能帮我们把网页发布到互联网上,让其他人可以访问,因此在开始前你需要注册一个GitHub账号。
...
mkdocs-marterial提供了从制作到发布网页的新手教程,这个视频(如果你能访问YouTube的话)也可以帮助你快速入门。 将制作好的网页发布到GitHub上非常简单,但你可能需要花一些时间来学习如何制作出你想要的网页效果,你可以参考我的源代码。
自定义域名
当你按照教程将网页发布后,页面的链接是这样的:username.github.io/repository,你可能想自定义一个容易记住的域名,就像本站的lester-zhang.com一样。
首先,你需要到域名托管商注册你想要的域名,我选择的是阿里云域名注册,但我更推荐腾讯云域名注册,因为后面的CDN加速服务我们选择腾讯云的,这样就可以在同一个平台上进行。
Tip
在阿里云或腾讯云注册域名都需要进行实名认证,认证过程较为繁琐,并且需要等待审核,你可能需要提前准备。或者你可以选择国外的域名托管服务,例如godaddy
Warning
在注册域名时会碰到域名备案的提示,我们可以忽略该要求。根据规定,国内服务器绑定的域名需要进行备案,但我们的域名是绑定在境外GitHub的服务器上,因此没有强制备案的要求
注册好域名之后就需要将域名解析到你的网页上面,这两篇文章提供了详细的指导:自定义域名教程2和自定义域名教程2。
CDN加速
我们的网页是部署在境外的GitHub服务器上,国内访问速度较慢且不太稳定,可以通过CDN加速来缓解这一问题。这里我选择腾讯云的CDN加速服务,因为其免费的证书有效期为1年,而阿里云只有3个月。这篇教程解释了CDN的原理并详细介绍了相关操作:CDN加速教程1,这篇博客也介绍了相似的内容CDN加速教程2。
在配置CDN加速服务前需要购买流量,否则配置完成后网页无法访问。对于腾讯云,可以在CDN产品页面进行购买,资源包类型应选择流量,适合区域选择亚太1区,资源包规格选择100GB
在跟随教程时,需要注意下面这些问题:
Warning
在添加域名时,需要添加顶级域名和二级域名,例如,我添加了lester-zhang.com和www.lester-zhang.com,并分别配置DNS解析,以保证两个链接都能够正常访问。
Warning
使用CDN加速不需要在GitHub上设置Custom domain,而是需要在docs目录下新建名为CNAME的文件,在文件中写入你的域名。在设置CDN时,回源host需要与CNAME中填写的域名完全一致
Tip
如果你在验证域名环节一直失败,你需要检查你添加的DNS解析记录类型是否与要求的一致。教程中的记录类型为TXT,而有时腾讯云会要求设置记录类型为CNAME
在完成全部配置后,还需要做下列检查工作:
Warning
需要在域名管理中检查HTTPS配置中的HTTPS服务是否打开,处于关闭状态时网页可能无法正常访问。该服务每月提供300万次免费的访问,足够我们的个人网站使用。
Warning
需要在域名管理中检查回源配置中的回源跟随301/302配置是否打开,处于关闭状态可能会影响CDN加速效果。
待CDN服务部署完毕后,如果在概览页面可以看到用量概览出现变动,则说明CDN配置成功,网页已经成功上线。