Linux系统部署高颜值导航页Dashy+cpolar内网穿透轻松实现公网访问


本文主要介绍如何在Linux系统使用docker部署Dashy并结合cpolar内网工具,实现无需部署到公网服务器,即可实现公网访问本地内网的导航页服务,让好友也能远程使用你制作的高颜值导航工具。

Dashy 是一个开源的自托管的导航页配置服务,具有易于使用的可视化编辑器、状态检查、小工具和主题等功能。你可以将自己常用的一些网站聚合起来放在一起,形成自己的导航页。一款功能超强大,颜值爆表的可定制专属导航页工具

在这里插入图片描述

1. 安装Dashy

在docker拉取Dashy镜像

docker pull lissy93/dashy:latest

镜像下载后我们运行,使用后台方式启动容器,容器内部是80端口,映射到宿主机上的8080端口

docker run -id --name dashy -p 8080:80 lissy93/dashy

启动后我们打开浏览器,输入Linux 局域网ip地址加上8080端口,即可看到我们的Dashy,安装成功了

image-20230619160646933

2. 安装cpolar

上面我们在本地Linux中使用docker安装了dashy,并且本地访问ok,下面我们安装cpolar内网穿透工具,通过cpolar的http公网地址,我们可以很容易实现远程访问Dashy,而无需自己注册域名购买云服务器.下面是安装cpolar步骤

  • 使用一键脚本安装命令
curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash
  • 向系统添加服务
sudo systemctl enable cpolar
  • 启动cpolar服务
sudo systemctl start cpolar

3.配置公网访问地址

成功启动cpolar服务后,我们在浏览器上访问Linux局域网ip地址+9200端口,登录cpolar web UI管理界面。

cpolar官网地址: https://www.cpolar.com/

登录成功后,点击左侧仪表盘的隧道管理——创建隧道:

  • 隧道名称:可自定义,注意不要与已有的隧道名称重复
  • 协议:http
  • 本地地址:8080
  • 域名类型:免费选择随机域名
  • 地区:选择China VIP

点击创建

image-20230619163915855

然后打开在线隧道列表,查看刚刚创建隧道后生成的公网地址,cpolar中默认有两种访问方式,一种是http协议,还有一种是https协议

image-20230619164025847

我们选择上面http协议的公网地址,打开浏览器,访问后即可看到dashy 界面,这样一个远程访问连接就设置好了

image-20230619170844284

4. 固定域名访问

在cpolar中需升级至基础套餐或以上才支持配置固定域名

登录cpolar官网后台,点击左侧仪表盘的预留,找到保留二级子域名,为http隧道保留一个二级子域名。

  • 地区:选择服务器地区
  • 名称:填写您想要保留的二级子域名(可自定义)
  • 描述:即备注,可自定义填写

image-20230619172054931

本例保留一个名称为dashytest的二级子域名。子域名保留成功后,我们将子域名复制下来,接下来需要将其配置绑定到隧道中去。

image-20230619172139639

再次登录cpolar web ui管理界面。点击左侧仪表盘的隧道管理——隧道列表,找到需要配置二级子域名的隧道,点击右侧的编辑

image-20230619172220956

修改隧道信息,将二级子域名配置到隧道中:

  • 域名类型:改为选择二级子域名
  • Sub Domain:填写我们刚刚所保留的二级子域名(本例为dashytest

修改完成后,点击更新

image-20230619172310287

隧道更新成功后,点击左侧仪表盘的状态——在线隧道列表,可以看到dashy隧道的公网地址,已经更新为二级子域名了,将公网地址复制下来。

image-20230619172835045

打开浏览器,我们来测试一下访问配置成功的二级子域名,同样出现了dashy界面,可以正常访问。现在,我们全网唯一的私有二级子域名,就创建好了。

image-20230619173007072

  • 23
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 极简导航页是一种简洁、直观的网页设计风格,以最简单的方式展示主要导航链接和相关信息。在HTML、CSS和JS的结合下,可以快速创建一个功能齐全且易于使用的极简导航页。 在HTML中,可以使用常见的HTML标签如`<div>`、`<ul>`和`<li>`来构建导航页的基本结构。可以使用`<a>`标签来定义导航链接,并通过`href`属性指定链接的目标页面。还可以使用其他HTML标签来添加标题、图标和其他内容。 在CSS中,可以使用选择器来为导航元素和其他页面元素添加样式。可以设置背景颜色、字体大小、边框样式等属性来美化导航页。可以利用CSS的盒模型和布局技巧来控制导航页的结构和排列。 在JS中,可以使用事件处理程序来为导航链接添加交互效果。例如,可以使用鼠标事件来控制导航链接的样式,使其在鼠标悬停或点击时显示不同的效果。还可以使用JS来实现导航页的动态效果,例如轮播图、下拉菜单等功能。 综上所述,通过HTML、CSS和JS的结合,我们可以创建一个简洁、易于使用的极简导航页。这个导航页可以方便用户快速找到所需的链接,同时具有美观的外观和流畅的交互效果。 ### 回答2: 极简导航页是一种简洁而实用的网页设计,通过使用HTML、CSS和JavaScript来实现。 在HTML中,可以创建一个包含导航链接的列表,每个链接代表网站的不同页面或功能。通过HTML标签和属性,可以设置导航链接的样式、大小和位置。 在CSS中,可以对导航链接进行进一步的样式设置。可以定义链接的背景颜色、文字颜色、边框等属性,以使导航链接看起来更加美观和易于识别。 JavaScript可以进一步增强导航页的功能。例如,可以使用JavaScript编写代码来实现导航链接的交互效果,比如在鼠标悬停时改变链接的颜色或添加动画效果。还可以使用JavaScript来实现导航链接的点击事件,以便在用户点击链接时跳转到相应的页面。 极简导航页的设计理念是简洁和易于使用。因此,在开发过程中,需要注意不要过分添加复杂的样式和功能,以免影响用户体验。同时,需要充分考虑不同浏览器和设备的兼容性,使导航页在各种环境下都能正常显示和使用。 总而言之,极简导航页是一种通过HTML、CSS和JavaScript实现的简洁而实用的网页设计。它以简单、美观和易于使用为特点,适用于各种应用场景,并能有效提高用户的浏览体验。 ### 回答3: 极简导航页是一种以简洁、清晰为设计理念的网页导航界面。它通常由HTML、CSS和JavaScript来实现。 首先,HTML负责定义导航页的整体结构。可以利用HTML标签来创建一个超链接列表,每个链接代表一个网站或特定功能。通过使用无序列表(ul)和列表项(li)标签,可以创建一个条目列表,每个条目代表一个导航链接。 其次,使用CSS来实现导航页的样式设计。通过设置背景颜色、字符样式、字体大小和间距等属性,可以美化导航页的外观,并使其更加吸引人。可以使用CSS选择器来选择导航链接,设置其样式属性,例如修改链接的颜色、添加悬停效果等。 最后,使用JavaScript来实现导航页的交互功能。可以通过JavaScript代码监听用户的操作,例如鼠标点击或悬停在导航链接上时触发的事件。通过编写事件处理函数,可以实现点击链接跳转到对应网站、显示特定信息等功能。 极简导航页的特点在于其简洁明了的设计和用户友好的交互体验。通过合理运用HTML、CSS和JavaScript,可以创建一个简洁易用的导航页,使用户能够快速访问所需网站或功能。同时,极简导航页也更容易加载和维护,适用于需要高效导航的网站或应用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值