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

举报
zhaoolee 发表于 2021/05/08 01:17:56 2021/05/08
【摘要】 五一假期和老罗巴扎嘿规划了一个导航站点, 老罗负责设计,我负责实现。 导航站素材是不缺的,我和老罗都是资源达人,想要做的长远,要考虑未来开发和维护的方便。 方圆灵感导航 v2fy.com/in 起名字 方圆是我和老罗一直做大做强的关键词, 灵感很符合导航站的调性! 网站最终命名为方圆灵感导航 使用React模块化开发 为了避免后期功能繁多,难以维护,我选用业内广受好...

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

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

方圆灵感导航 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

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。