开源免费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"
相关推荐
说私域1 小时前
人工智能赋能美妆零售数字化转型:基于开源AI大模型的S2B2C商城系统构建
人工智能·小程序·开源·零售
说私域2 小时前
数智化时代下开源AI大模型驱动的新型商业生态构建——基于AI智能名片与S2B2C商城小程序的融合创新研究
人工智能·小程序·开源
Android技术之家2 小时前
谷歌决定终止开源Android以及对开发者的影响
android·开源
雨声不在2 小时前
用mkdocs写文档#自动更新github-page
github
曹天骄3 小时前
DaemonSet 与 Deployment 的主要区别
github
大专哥6 小时前
基于vite官方开源脚手架预设,实现一个 npm create template-vue3-ts-preset(2):分析入口文件
webpack·开源·源码
遇到困难睡大觉哈哈6 小时前
hexo+GitHub Pages搭建个人博客完整教程
github
uhakadotcom7 小时前
快速构建交互式数据应用:Streamlit入门指南
后端·面试·github
lida20037 小时前
Ardupilot开源无人机之Geek SDK进展2025Q2
开源·无人机·穿越机·jetson-fpv
OpenTiny社区8 小时前
强烈推荐|新手从搭建到二开TinyEngine低代码引擎
前端·低代码·开源