引言

近几年感觉自己思维越来越混乱，很多东西感觉明白却又捋不清楚，尤其是最近写毕业论文的时候感觉找不到一条清晰的结构线来叙述我毕设做的东西，写的过程十分痛苦。这些年学过的东西很多很杂，但都是一些分散的点，一直没有能把它们连成线连成网。

所以为了督促自己改善这个情况，我决定建立一个自己的个人网站，在上面记录总结和分享我自己学到的、想到的以及做到的东西。自己脑子里的东西通过一篇篇文章有条理有逻辑地表达出来，一方面可以把自己脑子里的东西捋清楚，另一方面通过个人网站的形式分享到互联网（也许）能被有需要的人看见，可以一起进步。

搭建网页流程

搭建网页前期的重要部分就是域名和网站服务器，之后就是制作和设计网页内容，最后将网页部署到网页服务器。

1. 域名

既然是下决心要搭建一个个人网页，那首先肯定是要买一个域名，这样想要打开我的网页直接在浏览器里输指定内容就行，比如我的名字。

当然买域名并不是唯一的办法。比如在通过IP地址加端口号的形式也可以达到类似效果，但是IP地址相对于域名来说比较难以记忆，不利于传播。比如说每次访问网页都要输入123.456.789.123:1234，肯定比只输入abcd.com要麻烦很多。还有一种是使用第三方平台，比如Github Page，但是我想要的是对自己的网页全部可控，并且部署在本地，所以没有采取这个方式。

购买域名（Domain）

有很多大型的互联网域名注册商，比如Godaddy、Namecheap、NameSilo等等。在艰难的对比之后，考虑到安全性，价格等因素，最终选择了NamesSilo。

在网页中搜索自己想要的域名，找到一个合适的没有被注册过的域名，本来想要tanxiaochu.com 的，但是不知道被谁已经注册了，所以退而求其次选择了xiaochutan.com。目前的域名就是买的基本配置，没有加SSL成为https，所以还是http的状态，通过浏览器访问会显示不安全，这个等以后有越来越多人访问了再说。

域名服务器（DNS Server）

虽然已经花钱买了域名，但是现在的域名还只是一个域名，为了能让用户在搜索域名的时候需要域名服务器的帮助，通过解析获得网页服务器的IP地址。

域名服务器可以将域名映射到指定的IP地址。比如我的网页服务器IP是1.1.1.1，用户想访问我

的网页的时候，需要先询问域名服务器，在被域名服务器告知IP地址后，再通过IP地址直接访问网页服务器。在第一次访问成功后会在本地DNS留下记录，之后再访问这个网站之前就不用每次都先询问域名服务器了。

一般的域名注册商都会提供域名服务器，可以直接注册。也可以选择第三方的域名服务器，比如我目前因为租用了阿里云的服务器，所以也是使用的阿里云的域名解析服务。

2. 网页服务器

部署在本地设备上

1. 固定公网IP

如果想要部署网页服务器的设备拥有公网IP的话，过程会很容易，只需要将IP地址绑定到域名服务器上即可。上图中的客户端就是拥有公网IP的设备。

2. 动态IP

由于IPv4地址有限，供应商有时会给用户分配动态IP，这样虽有公网IP，但是是会定期变化的，每次联网后的IP地址可能都不一样。这种情况需要使用DDNS服务，动态域名解析。本地服务器定期向DNS服务器发送消息告知最新的IP地址，这样一来就能及时更新地址，保证域名解析的有效性。DDNS服务也是域名解析服务提供者一般也会提供的功能。一些网站提供免费域名解析服务比如DynuDNS。

3. 没有公网IP

这里还分两种情况，一种是本地服务器没有公网IP，但是有一台其他设备有公网IP，这种情况可以使用内网穿透技术，比如使用frp等开源工具进行反向代理。或者如果路由器有公网IP可以通过路由器进行端口转发。这种方式除了麻烦还有一个缺点，就是访问网站的时候需要在域名的后面加上指定的端口号。如果是默认的80端口可以省略，但是80端口可能会被占用或者没有开放。

另一种情况就是完全没有公网IP，这种情况下是没有办法自己进行部署在本地并且可以在外网进行访问的。但是可以通过第三方提供DDNS+内网穿透服务，比如花生壳。当然，第一种情况也可以使用花生壳。

部署在云端

我原本是想将网页部署在本地的树莓派上，本地部署需要有公网IP，我的网络供应商默认不提供公网IP，加上几个月后合同到期会换一家供应商，所以短期还是将网页部署在云端。

我租用的阿里云的轻量级服务器，并且分配了一个公网IP，显然这个公网IP对于我来说比服务器更重要。既然都已经花钱租了服务器，我把域名也绑定了过来。由于还是打算之后把网页部署在本地，现在部署在云端只是权宜之计，所以我网页的全部资源都是在本地，在此基础上把数据同步一份到云服务器上进行部署。这样一来云服务器到期或者新的ISP分给我公网IP之后我可以很方便的将网页服务器转到本地。

网页服务器Nginx

网页服务器的选择有挺多，比如Apache、Nginx、Tomcat 等等，由于在之前实习的时候接触过Nginx，所以它成了我的首选。

简单的来说就是提供网页服务，在云服务器上安装并运行了Nginx之后，配置好根目录，Nginx会自动把目录下的内容展示成网页。

3. 网页制作Hexo

Hexo是一个快速、简洁且高效的博客框架，可以根据Markdown文件生成HTML静态网页。这样我只需要将这些网页文件同步到云服务器的指定目录，Nginx就会将其做成网页。

常见的Hexo是部署在Github Page，配置好之后每次写完新的文章通过yml文件定义自动部署流水线，内容自动跟新到Github平台，十分方便。但是不符合我的需求，我不想通过Github部署，我觉得Github还是单纯用来进行代码托管比较好，个人网页还是用我自己的服务器，各司其职。

但是在实际的操作中，需要一个可以将本地资源同步到云服务器的方法，所以最后还是利用了Github平台，不过不是Github Page。通过一个bat脚本先把本地文件更新到Github作为网页资源备份，然后ssh链接云服务器执行git pull获取更新。

脚本代码

1
2
3
4
5
6
7
8
9
10
11
12
13

::更新public到GitHub
f:
cd xxx\my_web\git_backup_repo
git add .\
git commit -m "update public"
git push -u origin main

::远程连接云服务器获取更新
plink.exe  -ssh -i "key\file\path" -m "absolute\path\web_server_update.txt" -no-antispoof -l username server-ip

::退出
pause 
exit

几个容易碰到的问题：

1. 使用密钥连接需要管理员身份，所以这个文件需要管理员身份运行，但是每次都需要先选中管理员身份运行比较不方便，所以根据网上的一个迂回战术，先把bat脚本创建快捷方式，然后右键快捷方式文件： 属性->高级->用管理员身份运行。这样每次只需要直接运行快捷方式就行。
2. plink是putty自带的工具，可以通过-m选项在远程登陆后运行本地文件里的shell命令，由于需要用管理员身份运行，所以不能用相对地址，需要用绝对路径，因为管理员的默认路径是C:\WINDOWS\system32>

所以整个网页搭建的结构就是下面这个图展示的这样。

最后

这就是我搭建我的个人网站的整个过程。其中Nginx和Hexo的部分由于我也是上手不久，所以没有详细描述，之后会随着一步一步的学习和使用，在将来的某一天对这两个工具进行总结。

此外，使用云服务器部署网站只是目前的权宜之计，之后都转移到本地，使用的方法估计也就是上面讲到的那些，到时候经过实践在详细记录将网页服务器部署在本地的过程。