如何写一个开源的灵感导航站？

五一假期和老罗巴扎嘿规划了一个导航站点, 老罗负责设计，我负责实现。

导航站素材是不缺的，我和老罗都是资源达人，想要做的长远，要考虑未来开发和维护的方便。

方圆灵感导航 v2fy.com/in

起名字

方圆是我和老罗一直做大做强的关键词, 灵感很符合导航站的调性!

网站最终命名为方圆灵感导航

使用React模块化开发

为了避免后期功能繁多，难以维护，我选用业内广受好评的React进行资源导航站开发。

有React的支持，网站内部复杂的状态流转也变得简单。

使用Next.js做页面静态化,提升SEO

Next.js 是目前最好用的React静态化框架, 输出的页面,可以获得极好的SEO, 并直接托管到github pages

资源导航站代码Github开源

想要让导航网站为更多人服务, 开源是一个好的选择, Google对Github的SEO权重很高, Github的资源老哥很多, 集众人之力才能创建受人欢迎的项目.

想学React直出静态SEO网页的小伙伴， 也可以来看看这个项目: github.com/zhaoolee/in

创建一键发布脚本

虽然Next.js内置了构建程序，稍加改动, 即可一键发布到Github Pages， 但Github Pages在国内但速度很慢， 于是我基于rsync命令， 做了一个发布脚本，运行脚本后，可以自动启用Next.js, 构建整个网站，并将构建出的静态文件同步到v2fy.com/in 和 fangyuanxiaozhan.com/in ,并向Github提交代码, 由于静态文件在工程目录中的docs文件夹中, 所以与Github Pages绑定的域名路径zhaoolee.com/in也实现了同步

fangyuanxiaozhan.com/in

zhaoolee.com/in

v2fy.com/in

一行命令, 同步更新到三个站点,一举三得!

添加Github Actions构建支持

github pages作为程序员老哥们最喜爱的白嫖服务, 一定要用上!

我把导航站的核心数据导出为单独的数据文件, 每次更新数据文件,自动触发Github Actions的构建服务, 如果有人贡献新内容, 直接在网页端更新仓库内的数据文件,挂在三个域名下的方圆灵感内容, 立即更新!

导航站获得了新的内容, 贡献者获得了开源项目维护荣誉, 维护者获得的白嫖Github Actions的快感!

多赢方案就此诞生!

方圆灵感导航

文章来源: www.jianshu.com，作者：zhaoolee，版权归原作者所有，如需转载，请联系作者。

原文链接：www.jianshu.com/p/e67d570873be