Lazy loaded image
🗒️使用GitHub Pages发布静态网页
字数 722阅读时长 2 分钟
2024-11-11
2025-9-30

使用GitHub Pages发布静态网页


 
💡
文字版教程
 

步骤 1: 创建 GitHub 账户(如果还没有的话)

如果你还没有 GitHub 账户,请访问 GitHub 官网
notion image
并注册一个新账户,点击“Sign up”即可注册。
notion image
注册过程很简单,只需按照网站上的指示操作即可。

步骤 2: 创建新的 GitHub 仓库

  1. 登录你的 GitHub 账户。
    1. 点击“Sign in”按钮
      1. notion image
    2. 输入账号密码进行登录
      1. notion image
  1. 在右上角,点击加号图标(+),选择 "New repository"。
    1. notion image
  1. 在 "Repository name" 中输入你的项目名称,例如 my-website
    1. notion image
  1. 可以选择使仓库公开或私有。对于公开的仓库,任何人都可以看到你的代码;私有仓库则只有你和你邀请的人可以查看。
    1. notion image
  1. 勾选 "Initialize this repository with a README",这将自动为你的仓库添加一个 README.md 文件。
  1. 点击 "Create repository" 按钮完成创建。
    1. notion image

步骤 3: 准备你的网页文件

在本地计算机上准备你的网页文件,包括但不限于:
  • index.html:主页文件。
  • style.css:样式表文件。
  • script.js:JavaScript 文件。
  • 图片和其他资源文件。
确保所有文件都组织得当,比如将图片放在 images 文件夹中,脚本文件放在 scripts 文件夹中等,并打包。

步骤 4: 将文件上传到 GitHub 仓库

  1. 进入你刚刚创建的 GitHub 仓库页面。
  1. 点击 "Add file" > "Upload files"。
    1. notion image
  1. 你可以拖放文件到浏览器窗口,或者点击 "Choose your files" 来选择要上传的文件。
    1. notion image
  1. 选择完文件后,向下滚动并填写提交信息,如 "Add website files"。
  1. 点击 "Commit changes" 完成上传。
    1. notion image

步骤 5: 启用 GitHub Pages

  1. 在你的仓库页面,点击 "Settings(设置)" 选项卡。
    1. notion image
  1. 向下滚动到 "Pages" 部分。
    1. notion image
  1. 在 "Source" 下拉菜单中,选择 main 分支作为源分支。如果你使用的是其他分支,可以选择相应的分支。
  1. 点击 "Save" 按钮保存设置。GitHub 将会处理你的请求,并在几秒钟到几分钟内生成你的网站。
    1. notion image
  1. 一旦网站准备好,你会看到一个链接,指向你的新网站,格式通常是 https://<username>.github.io/<repository-name>/
    1. notion image
  1. 恭喜你,成功发布你的第一个网站!!!
    1. notion image
 
温馨提示:每次你对仓库中的文件进行更改并推送这些更改后,GitHub Pages 会自动更新你的网站。
 

步骤 6:警告

警告:请不要滥用公共服务,请不要发布违反当地法律和违反道德的信息,后果自负!!!

 
上一篇
CSS display 属性速查
下一篇
CSS 伪类选择器速查表

评论
Loading...