自己的工具导航网站上线了

**自己的工具导航网站上线了** ## 背景 前段时间电脑从餐椅上滑下来，摔地上了，当时没注意，去公司后就莫明的很卡，最后卡死机了，关机重启后，一直loading，说修复中。后面公司运维看了说，你这个是机械硬盘摔坏了（笔记本是公司租的），问了租聘公司，说修不了，可以换电脑，导致很多代码丢失了。当时有很多资料网址都在Chome 浏览器的书签上，由于没有申请Google的账户，没有实时同步书签，导致存的书签全部丢失。。。 后面就有了一个搭建导航网站的想法，把自己学习，经常用的一些网址链接放上去，岂不是完美！！！ ## 如何搭建（自己开发 OR 开源？） > 技术发展到现在，基本上大部分需求，都能找到现成的，我觉得如何把现有的代码修改并集成到自己的系统中去，也是一种能力。致敬开源作者！ 说到这里，不得不提**Github**，基本上 80% 以上日常开发上需要用到的“车轮”都可以在上面找到，有句话叫什么，**不要重复造轮子**。 搜了一下，一个叫 WebStack 的出现在我眼前  有很多版本，WordPress版的，Java版的，Vue版本的，还有静态页面的，网上很多导航站也都是基于它二开的，有兴趣的可以看看。 每个人的审美不一样，别人的吧，总觉得看不习惯，这玩意就是一个静态页面，搞复杂了也没啥意义。我就找了个静态html 版本的，拿来一通修改，首先是样式，还是喜欢简单的黑白配色，其次是静态页面，别人就一个光静态页面了，每次新增一个标签，还得添加修改html，闲麻烦。 **简单说一下思路：** - 1.把当前页面拆分一下，分为左侧导航栏，右侧标签栏  - 2.设计一个json 树状数据，父节点是导航，子节点就是标签 ```json [ { "title": "常用推荐", "icon": "linecons-star", "hot": false, "childrens": [ { "title": "常用推荐", "hot": false, "items": [ { "name": "Kimi.ai", "url": "https://kimi.moonshot.cn/", "logo": "kimi.moonshot.cn.png", "tooltip": "Moonshot AI 出品的智能助手。", "detail": "Kimi 是由月之暗面(Moonshot AI) 提供的 AI 智能助手，擅长中英文对话，支持约 20 万汉字的上下文输入。" } ] } ] } ] ```  - 3.把整个静态html 当成一个字符串，其中左侧导航标签模块各用一个特殊字符。读取json数据，生成左侧导航模版代码，以及右侧标签模版代码，js字符直接替换成代码，然后生成静态html文件。  - 4. 执行命令 ``` node .\assets\js\index.js ```  ## 部署 > 两种方式: > > 1、上传GitHub，用它的静态页面部署，免费，缺点访问慢。（教程百度） > > 2、自己服务器部署，阿里99云服务器：ContOS7.9（之前有写怎么家里搞台永久的服务器，有兴趣可以看看） 部署比较简单：  **1、把上面所有代码上传到 服务器中** > 我的是 /home/luckday/www 目录，根据自己的情况上传到自己的目录  **2、nginx 配置代理转发** ``` server { listen 80; server_name www.luckday.cn; location / { charset utf-8; root /home/luckday/www; try_files $uri $uri/ /index.html =404; index index.html index.htm; } } ``` **3、域名解析** > 解析比较简单，按照图片配就行了，域名前缀www，A记录，公网ip，填完保存就行了，过一会就生效了，一般保存完后就能访问，最晚10分钟  ## END 最后附上代码地址：[https://git.luckday.cn/Lucky/luckday-nav](https://git.luckday.cn/Lucky/luckday-nav)