前言

买了一台vps做科学上网，却仅仅只做了科学上网！这不符合我们勤俭节约的理念，所以《高效使用你的VPS》将会教大家如何高效地榨干vps，以获得最大的收益。《高效使用你的VPS》未来可能持续更新（我得自己先体验过才会看情况值不值得更新）。

上期我们介绍了如何利用vps搭建个人博客，不知道有没有同学搭建完了呢，本次我们继续折腾，让手里的vps发光发热！这次选择的是搭建一个属于自己的导航站点，把我们常用的站点编辑进去，浏览器默认打开我们的导航站点，可以很大程度提高我们的使用体验。

准备

  • vps一台
  • 域名一个
  • Webstack（html+css+js）

本地个性化设置

本期继续使用开源高效的宝塔面板作为服务器管理软件，在搭建好博客之后继续来搭建我们的导航站点，宝塔面板不会安装的同学可以看看我的上一期《高效使用你的vps》

《高效使用你的VPS》快速搭建个人博客 新手基础篇

界面预览

个性化站点

我们所使用的导航站点为开源的webstack，它不只有静态的，但为了尽可能减小服务器的负载，我们还是选择静态的，它是没有后台的，想配合后台来使用的同学可以看下webstack的GitHub页面，这里就不做过多演示。

https://github.com/WebStackPage/WebStackPage.github.io

既然没有后台，修改导航站点内容就可能会有点麻烦，但是没关系，修改起来并不困难，还能学到一些简单的H5基础知识，下面我来为大家做个演示

webstack 目录文件

使用单一语言

webstack 目录文件并不多，index.html是首页的引导，默认为中文页面，但也有英文页面，所以，就修改来说，我们需要分别修改中英文页面，页面分别位于cn，en两个文件夹之中

cn/en文件夹目录

如果我们只需要中午/英文一个界面，只需要将根目录下的index.html删掉，将对应cn/en文件夹中的index.html和about.html移到根目录再对页面稍作修改。

将cn/en中的内容移到首页后，我们双击index.html打开发现页面已经乱了，这是因为页面所调用的css文件，图片等相对页面的位置已经发生了改变

这时候我们可以使用记事本或者其他文本编辑器打开index.html，Ctrl+H进行内容替换，查询目标为两个英文点..替换为一个英文点.

完事之后保存，刷新页面可以发现页面已经变回正常，

接下来把语言选择给删掉，297行到313行内容全部删掉，就简简单单搞定了

修改首页内容

如果不使用单一语言可以直接进到cn/en文件夹里对index.html就行修改，修改页面里的内容为自己常用的网站，我们可以用Ctrl+F搜索页面中现有的站点，将对应的内容就行修改，图片复制到assets/images/logos文件夹就行。

下面是修改例子以及保存后刷新的效果，可以看到站点已经完成了修改。

添加首页内容

修改关于内容

同样因为相对位置的原因，如果只用单一语言的话还是需要向上面一样，用一个点替换掉原来的两个点，页面上显示的文字也是可以随意修改的，按照个人想法来就好！

搭建到VPS

我们上文修改都是在本地进行的，修改完之后打开办他面板，新建一个站点，纯静态就好，不需要MySQL数据库，点击站点的目录，将修改好的网页打包上传到网站根目录再解压，vps绑定相应的域名，域名需要解析到vps，同学们也可以申请个免费的ssl，这样在就不会提示不安全。

有什么不懂的评论区提问！

下载地址

城通网盘
密码：3190