静态个人导航页网站搭建—NAS搭建网站保姆教程1

搭建背景

自从开始玩NAS之后，值友们或多或少会部署一些自己需求或喜欢的应用；当应用比较多的时候，都通过登录NASweb界面去打开应用就显得有点傻了；当然也有小伙伴说可以通过浏览器收藏夹的方式来存储书签，这种方式是可行的，但是都没有自己去做一个个人导航页来得方便，不仅逼格比较高，而且无论是从多台设备访问还是跨平台的访问和浏览都不成问题。

除了这些NAS应用以外，还可以将自己工作和生活中能用到的网站地址和实用小工具都收纳其中。

环境准备

各个不同品牌的NAS都有自己的操作系统和相应的应用环境，我们这边以最为广泛应用的群晖NAS系统DSM为例为写这一篇文章。

群晖系统DSM自带WebStation套件，最简单的实现方式就是直接使用群晖官方的WebStation套件来实现功能。

打开套件中心

打开套件中心后，直接搜索WebStation套件，然后直接下载安装就可以了，安装完成如下图所示：

WebStation

打开WebStation套件，

打开套件

常规设置

在常规设置内启用个人网站，HTTP后端服务器随便选个Apache HTTP Server版本，因为是静态网页页面，所以PHP也可以不做配置的，当然配置了也是无伤大雅的。然后我们在浏览器内直接输入你的群晖内网地址，如192.168.1.10，当浏览器出现了这个页面就说明你的配置已经成功了。

默认页面

下面这个环节最重要了，我们先将FileStation的Web或WWW文件夹下默认的html文件和图片文件夹（web_images）都删除掉（想恢复的话也可以先备份再删除），我们需要把我们准备好的静态网页的页面放到FileStation的Web或WWW文件夹下；保证路径不变，index.html文件在web根目录。静态网页模板我们会放在文章的结尾。

根目录文件

然后我们刷新刚才打开的那个网页，导航页就部署完成了。当然导航页的内容还不是我们想要的，接下来我们用文本编辑器修改几个内容就可以了。

页面

调整内容

页面出现了，整体需要在群晖在配置的内容就已经全部完成了。接下来就是我们需要自己配置导航内容了。

使用文本编辑器打开web目录下的index.html文件（避免修改出错也可以先备份再修改），可以使用文本查看器打开，不过我更喜欢使用Notepad++编辑器，它自带的工具和行号，高亮显示可以更方便修改和调整内容。

1-调整标题

第一部分内容我们可以调整网页标题和头部大标题。我们需要做的就是把其原来的文字内容做个替换就可以了。调整标题主要修改红框内两个标题，上面红框内的标题是导航页在浏览器页签上的标题，也是网站的主标题，第二个红框内的标题是网页页面上显示的大标题，你都可以修改成你喜欢的文字。

标题前的动图你也可以替换成你自己喜欢的LOGO图，注意图片格式，标题以及图片的尺寸像素要和原图一致，否则会造成显示问题，我觉得动态挺好，暂时就先不替换了。

调整标题内容

调整完保存替换以后再刷新页面，就是下面显示的样子了。

页面

2-调整内容

然后就是修改下面的主内容了，我们可以把下面的导航调整成我们需要的内容，我们把编辑器往下拉一拉，就看到了下面内容。如下所示，上面的红框内的内容可以修改替换成我们想要的小标题；第二行前面红框内的内容是需要替换的应用或网站地址，后面的红框是需要替换应用或网站的名称，我这边用常用的Transmission做一个案例；其它的内容都可以用这个思路去替换。

修改内容.

调整完保存替换以后再刷新页面，就是下面显示的样子了。

页面显示

总结

大家可以跟着内容按照自己的需求动起来了。

个人导航页源码我放在下面，大家可以直接下载使用，在此感谢Hosted by @只言片语!

后续再写其它个人网站的搭建的文章，希望大家多支持。

作者声明本文无利益相关，欢迎值友理性交流，和谐讨论～