白嫖 GitHub 搭建个人开源项目网站

Get started

先给大家看看我这一分钱没花的白嫖成果(点这里查看

大家应该在网上也看过不老少这类的文档网站

很多开源项目都会有一个类似的网站,比如像MyBatisPlus

然后我寻思着我这不争气的开源项目也陆陆续续有了100来个Star

就考虑搞上这么一个玩意儿怎么都比直接看GitHub Wiki

GitHub Pages

我之前就大概知道有个github.io这么个东西

至于从哪儿知道的就记不太清了(反正记不记得清也不耽误事儿)

尝试着根据印象搜了搜就有了

首先就是需要有一个GitHub的账号

说没有账号的,emmmmmm,要不咱考虑考虑别的行业呢

按照教程,我们需要新建一个Repository

然后把这个Repository的名字设置成<username>.github.io,点Create repository创建就行了

这里我因为已经创建过了,所以会提示已经存在

再创建一个index.html随便写点什么作为首页

教程到这里就结束了,说是直接输入<username>.github.io就能访问了

但是,当我输入了linyuzai.github.io之后

怎么和说好的不一样?

不过还好这页面上有提示,让我看看是什么问题

直接跳转到了 docs.github.com/zh/pages

那就跟着文档看看到底缺了啥吧

看了看文档发现需要额外配置一些东西

找到我们新建的Repository<username>.github.io选择Setting

这里我用的另一个库,因为linyuzai.github.io这个库我已经设置过了,里面的内容有点不一样

如果展示不下会在那三个点...里面

接着点左边侧边栏的Pages

然后我们需要指定我们的发布方式

是基于某个分支还是使用GitHub Actions

我这里是选择的GitHub Actions因为看起来更高级一点哈哈哈

选择用Jekyll还是直接静态的页面

Jekyll也是用于搭建博客之类网站的,不过我没用过

我就只是展示一些静态的文档就选了静态网页,点Configure

之后会自动生成一个文件,直接提交就行,什么都不用改

现在我们刷新<username>.github.io就能够看到index.html的内容了(可能需要等待几秒钟发布,多刷几次)

Docsify

现在,我们白嫖的网站已经能访问了

接下来就要想想怎么加文档内容了

虽说前端的页面真要写也是能写的

但是我认为应该不用那么麻烦(来自一个程序员的职业敏感)

不知道大家看到这些网站的文档会不会有一种感觉

那就是布局排版样式不能说十分类似只能说一模一样

所以我确定一定有某些技术可以非常方便的实现这些功能

于是在我高超的搜索技艺之下,果然被我找到了Docsify这个工具 docsify.js.org/#/zh-cn/

甚至Docsify自己的文档网站也是用Docsify来实现的

我们只需要在index.html中进行唯一的代码配置即可

html 复制代码
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
</head>
<body>
<div id="app">El Psy Congroo</div>
<script>
    window.$docsify = {
        name: 'Concept',
        nameLink: '/',
        repo: 'https://github.com/Linyuzai/concept/',
        search: 'auto',
        loadNavbar: true,
        loadSidebar: true,
        auto2top: true
    }
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
</body>
</html>

然后在index.html同目录下创建一个文件_sidebar.md,使用markdown配置侧边栏

markdown 复制代码
- [集群服务长连接解决方案](connection-loadbalance/README.md)
- [注解下载](download/README.md)
- [动态加载外部 Class](plugin/README.md)
- [动态路由 Spring Cloud Gateway 和 Feign](router/README.md)
- [动态配置 RabbitMQ 和 Kafka](event/README.md)
- [外部回调阻塞返回](sync-waiting/README.md)
- [全局请求响应拦截](cloud-web/README.md)
- [支持元素更新的队列](mapqueue/README.md)
- [模块化项目生成插件](cloud-plugin-intellij/README.md)
- [属性继承插件(JDK8)](inherit/README.md)

(其他有很多配置大家可以上Docsify自行查看)

最后,提交并刷新网页,成了!完全不需要自己实现布局和样式(当然里面的文档内容是我从GitHub Wiki上贴下来的)

结束

文档网站搭建耗时:一个下午

还不快赶紧白嫖一个个人网站!开源文档,技术博客,学习资料,还买什么服务器?

相关推荐
qianmoQ10 分钟前
GitHub 趋势日报 (2025年07月08日)
github
小和尚同志10 小时前
全网影视一网打尽!8.2K Star 的 LibreTV 让你甩开追剧烦恼
开源·github
说私域10 小时前
开源链动2+1模式与AI智能名片融合下的S2B2C商城小程序源码:重构大零售时代新生态
人工智能·重构·开源
国服第二切图仔11 小时前
基于文心开源大模型ERNIE-4.5-0.3B-Paddle私有化部署并构建一个企业智能客服系统
百度·开源·智能客服·知识库·文心大模型·paddle·gitcode
ai小鬼头12 小时前
AIStarter 3.2.0更新!一键离线导入+高速下载,熊哥教你轻松玩转AI工具
人工智能·程序员·github
码字的字节13 小时前
阿里开源WebSailor:超越闭源模型的网络智能体新星
开源·阿里·websailor·网络智能体
CCF ODC13 小时前
第三届CCF夜莺开源创新论坛成功举办,夜莺V8正式发布
开源
算家计算14 小时前
6 亿参数玩转 20 + 语言!OuteTTS-1.0-0.6B本地部署教程,轻量模型也能 hold 住跨语言合成
人工智能·开源
Codebee16 小时前
OneCode 组件服务通用协议栈:构建企业级低代码平台的技术基石
前端·前端框架·开源
y东施效颦17 小时前
uni-app uni-push 2.0推送图标不展示问题
uni-app·github