如何写一个开源的灵感导航站?
五一假期和老罗巴扎嘿规划了一个导航站点, 老罗负责设计,我负责实现。
导航站素材是不缺的,我和老罗都是资源达人,想要做的长远,要考虑未来开发和维护的方便。
起名字
方圆是我和老罗一直做大做强的关键词, 灵感很符合导航站的调性!
网站最终命名为方圆灵感导航
使用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
- 点赞
- 收藏
- 关注作者
评论(0)