使用 GitHub Pages 快速部署静态网页

文章目录

概要

GitHub Pages 是 GitHub 提供的免费静态网页托管服务,支持直接从 GitHub 仓库中部署 HTML、CSS、JavaScript 等前端文件,适用于个人博客、项目展示页面等。

一、新建仓库

  1. 登录 GitHub,点击右上角 "+" → "New repository"
  2. 仓库名格式:<用户名>.github.io(例如:yourusername.github.io)【必须符合这种格式】
  3. 设为 Public(Private 仓库需要付费才能使用 Pages)
  4. 点击 "Create repository"

二、上传网页文件

注意:

  • yourusername 替换成自己的名称
  • 推送代码到远程仓库:git push <远程仓库名> <本地分支名>:<远程分支名>

方法一

  1. 克隆仓库到本地:

    bash 复制代码
    git clone https://github.com/yourusername/yourusername.github.io.git
    cd yourusername.github.io
  2. 添加你的网页文件(HTML、CSS、JS等)

    • 至少需要一个 index.html 作为首页
  3. 提交更改:

    bash 复制代码
    git add .
    git commit -m "描述信息"
    git push origin main:master

方法二

三、启用 GitHub Pages

一般前面操作对了就可以直接访问 https://yourusername.github.io 查看你的网站。

  1. 在仓库页面,点击 "Settings" → "Pages"
  2. 在 "Source" 部分,选择分支(通常为 mainmaster
  3. 点击 "Save"
  4. 等待几分钟,访问 https://yourusername.github.io 查看你的网站

❤觉得有用的可以留个关注ya❤

相关推荐
阿部多瑞 ABU2 小时前
# AI高精度提示词生成项目——3D-VR 课件—— 最终仓库级 AI 提示词:生成《EduVR Studio》—— 专业级 3D-VR 课件创作平台
gitee·开源·github·aigc·ai编程·1024程序员节
hweiyu004 小时前
Gradle 与 CI/CD 集成:Jenkins/GitHub Actions 自动化构建配置
ci/cd·github·jenkins·gradle
OpenTiny社区4 小时前
我用3 分钟上手 RankProcessChart 排名进度图!
前端·github
十里八乡有名的后俊生4 小时前
从在线文档崩溃说起-我的前端知识管理系统搭建之路
前端·开源·github
HelloGitHub6 小时前
《HelloGitHub》第 115 期
开源·github
一只小bit6 小时前
Git 远程操作:克隆、推送、拉取与冲突解决
数据库·git·github
绝无仅有6 小时前
某银行大厂面试技术问题深度解析(一)
后端·面试·github
绝无仅有6 小时前
面试自述:从单体到微服务的实践之路
后端·面试·github
绝无仅有19 小时前
腾讯面试文章解析:MySQL慢查询,存储引擎,事务,结构算法等总结与实战
后端·面试·github
逛逛GitHub20 小时前
这个 OCR 开源项目天花板,杀疯了。
github