小伙伴们好,我就是怪物。
相信大家日常的工作学习生活中,常常要用到导航网站。假如你使用过360导航栏或者网址之家导航栏,那么你肯定知道在没有组装拦截广告的扩展程序的情形下,那广告宣传简直就是热热闹闹,鞭炮齐鸣,红旗招展,人潮人海;另外就是这种导航网站还要照顾大部分网友的要求(我肯定不用说是竞价推广),也会增加许多日常生活当中你用了不了的导航栏;总结一下这种导航栏的缺点是:
1、广告多
2、无关网站多
今日怪物就给大家分享零成本打造出归属于一个自己的好用且洁净的导航网站。
实际效果演试
即日启程,先图中一览为敬。
- 日间方式
- 护眼模式
上边的怪物导航栏是怪物自己构建的,能够看见这一导航网站有以下几个优势:
1、能够自定每一个导航地址
2、适用日间和晚间双模式
4、漂亮、整洁、没有广告且好用
5、适用网站公示作用
6、适用别人递交好用站点作用
7、不用独立租用服务器,纯静态数据导航网站凭借Github Pages完成零成本布署
说了那么多,那么我们下面进行构建属于自己整洁且好用的导航网站吧!
怪物导航地址:codermonster.top/
复制新项目
前提条件专业技能:
1、当地电子计算机需要安装Git专用工具,而且会简单应用Git,要学习请见:gitee.com/all-about-g…
2、会CV(拷贝)秘笈,会简单改动HTML网页页面,要学习HTML请见:www.runoob.com/html/html-t…
怪物导航栏的源代码代管在Github上,因此从你用到Git以后,只需复制此项目到当地就能,在终端实行先后实行如下所示指令:
#复制新项目到当地
git clone git@github.com:oucystong/oucystong.github.io.git
#转换到项目目录中
cd oucystong.github.io/
#查询每一个工程项目的所有文件夹
ls-alh
到此,大家可以看到工程项目的全部源代码和静态资源如下所示:
在工程项目的全部源代码和静态资源下载到当地以后,下面我们就先将项目部署到Github Pages上,让我们在外网地址都能够浏览你导航地址。
部署项目
最先需要做的就是先往Github官网上申请一个账号,在完成注册以后,必须要先创建一个库房,具体步骤如图所示:
在创建库房的时候会有好多个配置项需要填写,相关要求见下图:
别的配置项默认设置就可以,点击新创建库房就行了。
下面我们就返回当地工程中,看一下新项目关联的远程控制详细地址,运行命令如下所示:
#运行命令
git remote-v
#执行结果
origin git@github.com:oucystong/oucystong.github.io.git(fetch)
origin git@github.com:oucystong/oucystong.github.io.git(push)
能够看见新项目关联的远程控制地点是怪物的,并不是你刚建立的仓库远程控制详细地址,如今我们应该把这个地址设成你刚刚建立仓库详细地址,返回你仓库里,再按照下面的图拷贝远程控制详细地址:
实行如下所示指令,设定当地工程项目的远程控制详细地址:
#设定远程仓库详细地址
git remote set-url origin<你仓库地址>
#查询远程仓库详细地址
git remote-v
下面我们必须把自己的代码提交到远程仓库,运行命令如下所示:
#提交代码顺滑三连技
git add.
git commit-m"update"
git push-u origin main
最后一步是我们必须在Github上开启Github Pages网页页面,配备有关特性就能实现外网地址访问了,具体步骤如图所示:
在布署完毕之后,大家直接访问就行了,以我的库房为例子,其访问地址为:
https://oucystong.github.io
你访问地址与其相近,只不过是详细地址后边跟随的人是你新项目仓库名字,需注意里边的导航地址的标志全部都是图片种子,并且数量也许多,所以一开始加载速度很有可能稍慢一些,等着你根据电脑浏览器多浏览几回,等候当地有缓存文件以后,其速率便会快很多了。
绑定域名
如果感到Github Pages的网站域名不太好记忆力,或者你拥有自己网站域名,随后想关联到Github Pages上,再通过浏览自定网站域名完成浏览导航网站,实际上也是能够实现的,下面我们开始做。
最先你需要在阿里服务器或是腾讯云服务买一个域名,这一自然就是根据自己的需求选购就可以,并且也也不用太价格昂贵,例如怪物个人的codermonster.top
一年费用才会有九块钱。
次之我们应该在本地新项目途径下改动CNAME文本文档,文件信息:
#文件信息就是你办理的域名地址 | 应注意:此条注解不用写
codermonster.top
随后我们应该在腾讯云或是腾讯云服务上配备域名的DNS分析服务项目,使之能通过该域名指向道Github Pages的IP地址,进而实现对导航栏的浏览,Github Pages的IP地址如下所示:
#Github Pages的IP地址
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
以阿里云的网站域名DNS服务配置为例子,其配置项如图所示:
最终我们应该在Github Pages的设置页面配备一下你办理的网站域名:
进行以上所有的流程以后,等候10分钟,大家就可以用自定的网站域名完成本人导航网站的访问了。
文中汇总
1、整洁又方便的导航网站根据怪物导航栏源代码完成,其源代码代管在Github上,复制并改动源代码就可以实现自定义导航。
2、根据Github Pages完成免网络服务器零成本部署项目。
3、根据阿里服务器或是腾讯云服务申请办理人性化网站域名完成于Github Pages域位的关联,最后可达到浏览自定网站域名就可以浏览导航网站效果。
4、如果不想自己建,可向怪物导航栏递交出色网站,我能不断更新到怪物导航栏。
自定改动导航栏里的网站:
1、只需改动index.html文件或给予网站标志到assets/images/logos/。
2、改动完成后将编码传送到远程仓库,Github Pages就会自动进行更新布署。
3、大量自定具体内容能通过打开网页的开发者模式完成改动。