最近AI好火啊，各种AI工具导航网站也层出不穷，思路就是建站然后流量做大赚广告费。
于是，我仔细研究下了所谓的导航网站，不仅AI领域，其他诸如编程啊，产品经理啊，跨境电商啊等等行业都有导航站，的确极大的增加了工作效率，做到了工具和资源的整合。
从技术的角度讲，各大导航网站无一例外都是使用了Wordpress来进行快速建站，当然wordpress的竞争对手还有ghost,joomla等等。这种建站工具对于没有编程基础的人来讲，确实极大降低了门槛，不过也存在体积臃肿，可定制化弱等缺点，有些模板还需要付费购买。
好了，进入正题，放弃Wordpress，用NextJS + TailwindCSS + StrAPI 手撸一个导航站需要几步？
首先是技术选型，导航站最重要的就是轻量级可定制化前端+后端CMS，能做到静态站的静态文件生成和部署，有利于SEO（百度&谷歌）。前端选择NextJS + TailwindCSS
1、TailwindCSS （学习上手时间1小时）
TailwindCSS比较简单，说白了就是写代码的时候用简化的语义好理解的CSS编程，再通过webpack等工具自动打包成真正的css。
举个例子：
<div class="mt-2">这是个div</div>
webpack翻译过来 mt就是margin-top，mt-2就是
margin-top: 0.5rem
官网如下：https://tailwindcss.com/
这些当然也不用自己逐行编写，知道简单的CSS语法，然后抄&改现成的模板就行了。
免费的模板：https://preline.co/index.html 付费的官方模板https://tailwindui.com/
2、NextJS （学习上手时间2小时）
Next.js 是一个轻量级的 React 服务端渲染应用框架。会简单的React语法&html就可以很快上手。
官网链接如下：https://nextjs.org/
npx create-next-app@latest
执行上面的npm命令就可以快速搭起来个架子。然后就是理解目录结构
src/pages/about.jsx 对应网页 你的域名.com/about 这个地址 about.jsx长这个样子
这里面就是正常的html和tailwindcss，上手很容易。
接下来就是数据怎么获取，静态站的的话，用的最多的就是
getStaticProps
根据骨架NextJS的代码，随便改改就行了，很好理解。简单来说就是在jsx文件中，用
getStaticProps方法请求StrAPI的API获取结构化数据。3、StrAPI （学习上手时间1小时）
strapi是个开源的无头cms系统，说白了就是自己用strapi的开源代码，搭个cms的服务，不过只有后台编辑内容的可视化界面，数据都存在strapi的mysql之类的数据库中。然后用strapi规定的api格式调用api即可获取你输入编辑的内容数据。 strapi 官网：https://strapi.io/ 部署strapi的服务也很简单：npx create-strapi-app@latest my-project
命令执行过程中会让你设置数据库的地址和用户名密码等，完全不需要人工操作。然后会有个后台地址，这里面新建你需要的数据结构，再用api调用就行了。
后台大概长这个样子：
调用API的方法：https://docs.strapi.io/dev-docs/api/rest#get-an-entry
好了，大功告成～
自己手撸的网站定制化程度极高，想怎么改前端就怎么改，想怎么设置后端数据结构怎么设置。当然对毫无编程基础的又想建站的小伙伴有很高的门槛。不过对于稍微懂些npm,react,css基础知识的小伙伴在几个小时内就可以上手。作为前端练习项目还是不错的。
最后附上demo网站地址：https://www.51aiyz.com/
欢迎交流讨论～～
标签：纯手,https,com,strapi,WordPress,TailwindCSS,NextJS,导航 From： https://www.cnblogs.com/51aiyz/p/51aiyz.html