开源免费GitHub搭建资源分享站

开源免费GitHub搭建资源分享站

一个可使用GitHub Pages部署基于 HTML、CSS 和 JavaScript 开发的资源列表展示系统

功能特点

  • 🚀 动态加载数据
  • 📱 响应式设计,支持移动端和桌面端
  • 🔍 实时搜索功能
  • 📋 分类筛选功能
  • 📄 分页显示
  • 🌈 动态背景气泡效果
  • 📊 数据导出功能(CSV表格和链接列表)
  • ⚡ 加载进度提示

示例

项目结构

复制代码
project/
├── index.html // 主页面
├── styles.css // 样式文件
├── scripts.js // JavaScript主文件
├── data/ // 数据文件目录
│ ├── file_list.txt // 数据文件列表
│ └── *.json // JSON数据文件
└── README.md // 说明文档

示例页面

快速部署

方式一:Fork 部署(推荐)

  1. Fork 仓库

    • 访问 原始仓库地址
    • 点击右上角的 "Fork" 按钮复制仓库到自己的账号下
  2. 修改仓库名称

    • 进入你 Fork 后的仓库设置
    • 将仓库名修改为 你的用户名.github.io
    • 例如:如果你的 GitHub 用户名是 example,就将仓库名改为 example.github.io
  3. 添加数据文件

    • data 目录下添加你的 JSON 数据文件
    • 修改 data/file_list.txt,添加你的数据文件名列表
  4. 启用 GitHub Pages

    • 进入仓库的 Settings
    • 找到 Pages 选项
    • Source 选择 main 分支
    • 保存后等待几分钟
    • 访问 https://你的用户名.github.io 查看部署结果

方式二:手动部署

  1. 创建仓库

    • 创建一个新的仓库,名称为 你的用户名.github.io
  2. 上传文件

  3. 启用 GitHub Pages

    • 同上方式一的第 4 步

数据文件配置

  1. 准备数据文件

    • 按照指定格式准备 JSON 数据文件
    • 将文件放入 data 目录
  2. 更新文件列表

    • 编辑 data/file_list.txt

    • 每行写入一个数据文件名

    • 例如:

      复制代码
      1-5k.json
      5k-10k.json

自定义配置

  1. 修改标题和说明

    • 编辑 index.html 文件
    • 修改网站标题和说明文字
  2. 修改样式

    • 编辑 styles.css 文件
    • 自定义颜色、布局等样式
  3. 修改功能

    • 编辑 scripts.js 文件
    • 调整分页数量、搜索行为等

常见问题

  1. 数据文件无法加载

    • 确保文件名在 file_list.txt 中正确列出
    • 检查文件路径是否正确
    • 检查 JSON 格式是否正确
  2. 页面显示 404

    • 确保仓库名称格式正确(必须是 用户名.github.io
    • 确保已正确启用 GitHub Pages
    • 等待几分钟让部署生效
  3. 样式显示异常

    • 清除浏览器缓存
    • 检查 CSS 文件是否正确加载

更新数据

  1. 通过 GitHub 网页更新

    • 直接在 GitHub 网页界面编辑或上传文件
    • 提交更改后会自动重新部署
  2. 通过 Git 更新

    bash 复制代码
    git pull                     # 获取最新代码
    # 修改数据文件
    git add .                    # 添加更改
    git commit -m "更新数据"      # 提交更改
    git push                     # 推送到 GitHub

本地测试

  1. 使用 VS Code 扩展Live Server
    • 安装 Live Server 插件
    • VS Code 打开项目文件夹
    • 右键 index.html 选择 "Open with Live Server"
相关推荐
掘金安东尼8 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
白鲸开源13 小时前
Ubuntu 22 下 DolphinScheduler 3.x 伪集群部署实录
java·ubuntu·开源
算家计算13 小时前
模糊高清修复真王炸!ComfyUI-SeedVR2-Kontext(画质修复+P图)本地部署教程
人工智能·开源·aigc
weiwenhao14 小时前
关于 nature 编程语言
人工智能·后端·开源
逛逛GitHub20 小时前
飞书多维表“独立”了!功能强大的超出想象。
人工智能·github·产品
努力的小雨1 天前
混元开源之力:spring-ai-hunyuan 项目功能升级与实战体验
后端·github
NocoBase1 天前
GitHub 上 Star 数量前 10 的开源项目管理工具
开源·github·资讯
绝无仅有1 天前
面试实战总结:数据结构与算法面试常见问题解析
后端·面试·github
绝无仅有1 天前
Docker 面试常见问题及解答
后端·面试·github
算家计算2 天前
7B参数拿下30个世界第一!Hunyuan-MT-7B本地部署教程:腾讯混元开源业界首个翻译集成模型
人工智能·开源