本文最后更新于 362 天前，其中的信息可能已经有所发展或是发生改变,如有失效可到评论区留言。

Contents

前言

其实，做这个导航页有以下2方面的考虑：

1、应对备案定期检查

我是在腾讯云备案的，腾讯云会定期检查我的备案域名的www主机对应站点的内容，一是检查站点是否在线，二是检查站点名称是否和备案时候填写的一致，三是检查备案号是否正常填写。第二点和第三点都让我比较蛋痛。因为备案时候站点名称是随便填写的一个能够通过备案初审的名字（被打回来好几次，因为不准我取有博客字样的名字），这个名字还不准我改，导致我的博客名字不伦不类（我以前是直接把www也指向我的博客），而博客最下方挂个备案号也让我博客的逼格降低了很多。。。所以我想要不干脆搞一个静态页面关联在www主机下，在这个静态页面上挂上备案的站点名称以及备案号，把我的博客解放出来。。

2、应用分类导航

我的应用种类的确也是太多了，也确实需要一个导航页面，当有人访问我www主机的时候，就能直观通过这个导航页面看到我主要的应用，这样也会清晰很多。而网上那些个人导航页（参见我的文章：docker系列使用docker基于Heimdall搭建自己的专属导航页）其实都只是适合自己一个人用，不适合作为公共访问的导航页，所以经过一番搜索，找到了这个类似icloud风格的导航页：

是不是还比较有感觉？所以本文就简要介绍一下这个静态页面搭建。

github项目地址如下：https://github.com/asundust/NAS-Nav-iCloud

首先下载源码文件，如果github无法访问，也可以访问以下链接下载：无敌的文件共享，访问密码为：”blog.tangwudi.com”，下载其中的”NAS-Nav-iCloud-master.zip”文件即可。

另：其实这个页面本来是用来给NAS做导航页的，所以自带内外网链接切换的功能，但是我是用来做www的页面，所以需要做一些修改。

使用宝塔linux面板进行部署

安装nginx

在”软件商店”右侧的应用搜索框中输入”nginx”后回车，然后在下方选择Nginx，然后点击右方红框中的”安装”：

保持默认的极速安装选项即可，编译安装也行，但是会占用更多的安装时间，然后点击右下红框中的”提交”进行安装：

安装php

在”软件商店”右侧选择”运行环境”，在搜索框中输入”PHP”后回车，然后在下方选择一个php版本安装，例如我选了PHP-7.4，然后点击右方红框中的”安装”：

编辑安装和极速安装都可，默认极速安装，点击下方红框中的”提交”进行安装。

准备好访问域名

这个域名没什么要求，如果主要供国内访问，则最好是备过案的，这样就可以通过国内众多CDN提供商达到一个较好的访问体验。如果对访问体验没有太高要求，不备案也无所谓，通过cloudflare建站也不是完全不能访问，还是基本能够打开的，就是慢点～。

假设示范域名为:www.example.com。

新建站点

登录宝塔linux面板，如红框所示，在”网站”界面点击右方的”添加站点”：

下图红框中的域名部分填写正确的域名，最终的访问请求达到nginx的时候，nginx会根据http请求的host字段包含的域名与自己站点配置的域名进行比对，匹配得上才会进行处理。PHP版本处选择一个自己已经安装的版本，最后点击右下方红框中的”提交”即可完成站点的新建：

(可选)配置SSL证书

有公网IP的朋友，虽然是可选，但是还是建议作为必选项，毕竟https现在基本已经成为标配了。一般有手动导入证书和使用Let’s Encrypt自动申请两种方式。

手动导入证书：
手动导入证书的话，需要首先有证书，像腾讯云和阿里云都可以白嫖（如果刚好域名是在腾讯云或者阿里云购买的），一般直接下载nginx格式的证书，.key扩展名的文件内容对应的就是密钥，.crt扩展名的文件内容对应的就是证书，分别粘贴到对应的红框里，然后点击最下方红框中的”保存并启用证书”按钮即可。

自动申请证书：
一般建议直接使用Let’s Encrypt直接申请证书，前提是域名解析已经正确配置，因为Let’s Encrypt在申请证书的时候会先查询这个域名是否能够正确解析：

DNS接口是选择你的域名供应商，有如下选择：

如果域名供应商刚好是在这4个中，就可以直接使用（需要正确设置id和API key），否则就只能选择手动解析了。

另：如果没有公网IP地址又想对外使用https的访问方式，最简单的就是用cloudflare的tunnel方式建站，详细步骤见我另一篇文章：奇技淫巧系列利用国内云主机或者家用设备白嫖cloudflare实现快速建站，这种方式最大的好处就是你只需要提供内网http的访问方式，cloudflare会自动对外转成https的方式。

部署源码

将前面下载的源代码(NAS-Nav-iCloud-master.zip)通过宝塔面板的”文件”界面上传到”/www/wwwroot/www.example.com”这个目录中：

将刚上传的zip文件上直接点右键，然后选择”解压”：

进入解压出来的”/www/wwwroot/www.example.com/NAS-Nav-iCloud-master/web”目录，将里面的内容都剪切到站点目录”/www/wwwroot/www.example.com”中：

删掉多余的文件，最终结果如下：

讲道理，如果网络访问策略设置正常，域名解析也正常，则已经可以通过https://www.example.com地址访问默认界面了，效果如下：

接下来我们需要对这个默认界面的每个图标以及点击图标以后跳转的链接进行修改以满足我们的真实需求。

修改图标和实际链接

还是在文件功能菜单里，在右侧直接双击打开”index.html”文件，当然也可以直接下载到电脑本地用其他文本编辑器编辑，这个看大家习惯：

打开”index.html”其实可以直接看到很详细的注释：

具体图标和链接的定义在从187行开始：

上图中每一个红框都代表了一个图标以及点击这个图标以后对应的链接。
以第一个红框”我的博客”为例示范如何进行修改：

第一个红框中的”#”改为真实的链接，比如我的博客域名为:https://blog.tangwudi.com，这里就填写这个。
第二个红框中的class="disabled-link"直接删掉，有这个就表示禁用这个图标。
第三个红框中的img/png/AppStore.png是指定该图标对应的图片，默认的图标图片有如下这些：

如果对这些默认的图标图片不满意，可以自己用图片工具生成128×128的png图片，我基本都是自己生成的，这一步反而是最花时间的。生成的图片依旧上传到img/png这个文件夹下，然后用img/png/xxx.png方式来调用。
第四个红框就是这个图标对应的文字，比如”我的博客”，最终结果如下：

依次处理每一个图标和链接，就是最终效果，大家可以看我的实际效果：无敌的示例页面

修改切换按钮

前面我们提到过，这个页面本来是一个供NAS使用的导航页，所以右上角会有个OFFICE以及HOME的切换按钮，本意是，从外网访问对应office页面，这个页面的链接都是外网链接，点击一下以后切换到home页面，这里面对应着内网地址的链接

但是这里我并不需要，因为我本来就是用来放到公网上作为导航页来快速访问的。所以我需要对这2个按钮的文字进行修改，分别改为”下一页”和”前一页”。这个修改的地方仍旧在”index.html”的182行：

修改以后刷新页面，就是如下效果：

应对备案检查

此隐藏内容仅限VIP查看升级VIP

docker方式通过nginx搭建

其实，之所以用宝塔linux面板的方式搭建，是因为对于源码部署的方式来说，这是最容易理解，也是对新手人群而言最方便的方式。而对于熟练的人群而言，使用docker的方式反而是最高效的方式，但是，用docker的方式就要面对一个问题，就是nginx和php 2个容器配合的方式，因为涉及到fastcgi，所以初期部署会花时间（参见我的另一篇文章：docker系列单容器nginx、单容器php(一个版本)之多站点共用）。不过如果如果已经搭建完成，就只需要将解压缩以后的web文件夹往对应的目录一扔，并且拷贝一下已有的.conf文件，然后修改下server_name参数即可。大家有兴趣可以尝试一下，我另一个专门对国外的域名的www页面就是这么做的。

前言