开通VIP，畅享免费电子书等14项超值服
首页
好书
留言交流
下载APP
联系客服
2022.04.27
原创iMyShare神秘的热心网友2022-04-1721:00
不过既然兄弟们有需要，今天就索性斥巨资来做这一篇新的教程，帮助大家快速搭建一个完全属于自己的导航网站。
今天的教程搭建的导航网站效果如下图，可以访问www.igeek.fun进行体验。
网站具备响应式布局，无论是电脑还是手机都可以正常访问，且界面完美显示。
所谓的域名就是访问网站时，大家在浏览器中输入的链接，比如：imyshare.com。
服务器相当于是用来存放导航网站的源码，并24小时不断电断网的运行导航网站的一台电脑。
使用下面的链接购买还可以享受额外的折扣优惠：
大家购买的时候记得操作系统选择Ubuntu，因为本次教程也是用的Ubuntu。其他的选项按照默认的就行。
然后海外服务器一般会比较贵，访问会比国内慢一点点，而且容易被墙。所以如果大家打算长期做的话，还是推荐大家购买国内服务器，并进行备案。
比如：相同活动折扣下，国内服务器一年最低只需要￥50，海外就需要￥375
本次教程主要演示的还是纯静态页面导航网站的部署。
然而这个导航网站经过很多热心网友的贡献，实际上已经演进了很多版本了，比如带管理后台的版本，不带管理后台的静态页版本。本次教程反响还可以的话，我后面再演示其他版本吧。
如果购买的时候选择的操作系统不是Ubuntu，可以重装服务器的系统，只需要在控制台中找到刚刚购买的服务器，然后选择重装系统，重装的过程中选择最新的Ubuntu版本即可。
这里大家先下载两款软件：
两款软件的连接方法都是一样的：
第一步：都是打开软件，点击左上角的
第二步：在连接选项中输入名称和主机IP。主机IP就是刚购买的服务器IP，在控制台的服务器选项中可以看到，复制过来粘贴即可（记得是公网IP哈）。
第三步：切换到用户身份验证，用户名填：root，密码填购买服务器时设置的密码。然后点击连接就可以连接上服务器了。
使用Xftp连接服务器，然后在路径栏输入/访问根目录，并在根目录新建www文件夹。
然后将前面下载的导航网站源码拖拽上传至www目录下。
nginx是一个高性能的HTTP和反向代理web服务，简单来讲就是有人访问你的网站时，这玩意可以将导航网站的内容返回给浏览器进行展示。
使用Xshell连接服务器，然后输入apt-getupdate，并按回车键运行。
等待执行完成后，再输入apt-getinstallnginx
中途如果遇到提示Doyouwanttocontinue[Y/n]，输入y然后按回车键继续。
安装完成nginx后，在浏览器中输入服务器的公网IP地址，就可以看到下面的页面了。
这里，基础版配置文件我已经写好了，大家点击下载即可。
下载完成后，记得使用编辑器打开，然后将里面的域名换成自己的，然后CTRL+S保存一下。
然后使用Xftp将配置文件上传至服务器的/etc/nginx/sites-available目录下。
再使用Xshell分别输入下面两条命令，按回车键。
回到腾讯云的控制台，找到刚刚购买的域名，并点击解析。
然后点添加记录，记录值记得填自己的服务器公网IP。
在自己的本地电脑上打开导航网站的源码的文件夹：
如果想换Logo，只需要将新的Logo以相同的文件名替换进去即可。
如果想改导航页面的内容，需要使用Sublime编辑器打开cn文件夹和en文件夹中的index.html，然后编辑里面的内容。
比如修改左侧菜单栏，只需要按照源码一样，复制一份一模一样的结构的，粘贴进入，然后修改里面的中文即可。
比如：修改导航内容，也是按照源码的结构修改即可。
如果需要修改图片，有两种方式：
第一种：手动将图片添加至本地的assets/images中，然后图片的链接用这种形式的即可../assets/images/logos/behance.png。
打开图床网站，直接将需要上传的图片拖拽进去，上传完成后就可以得到图片链接了。
然后就可以在导航网站中使用此图片链接了。
上传之前，记得双击index.html打开预览一下网页是否显示正常！
显示正常的话，就可以再次使用Xftp将WebStackPage整个文件夹上传至服务器的/www下面了。
备注：上传的时候遇到重复文件，记得选择覆盖源文件哦！
等待上传完成，再次通过域名访问就可以看到最新修改的内容啦~
本次教程就到此结束啦，如果疑问，欢迎兄弟们在群里交流哦~
喜欢的兄弟们多的话，我会持续更新导航网站更多的高级配置，比如管理后台等。以及持续更新更多的快速利用开源项目的内容，让兄弟们享受到开源项目的便利！