《高效使用你的VPS》搭建个人导航站点

前言

买了一台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,这样在就不会提示不安全。

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

下载地址






文件名称:WebStackPage.github.io-master.zip

更新日期:2021.10.21

文件大小:10.5 M

提示:如遇问题或者链接失效请联系站长!

点击下载

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇