从零开始搭建你的个人博客:使用 GitHub Pages 免费部署静态网站

🌐 从零开始搭建你的个人博客:使用 GitHub Pages 免费部署静态网站

在互联网时代,拥有一个属于自己的网站不仅是一种展示方式,更是一种技术能力的体现。今天我们将一步步学习如何通过 GitHub Pages 搭建一个免费的个人博客或简历网站。零基础也完全没问题!


✨ 为什么选择 GitHub Pages?

  • 免费! 不花一分钱就可以部署你的个人网站。
  • 稳定! GitHub 背靠微软,服务可靠。
  • 速度尚可:虽然是国外网站,但国内访问速度也不错。
  • 随时迁移:即使未来 GitHub 无法访问,迁移到 Gitee(码云)等国内平台也轻而易举。

🛠 准备工作:注册 GitHub 账号

  1. 打开 GitHub 官网,点击右上角的 Sign up 注册新账号。
  2. 填写以下信息:
    • 用户名(建议个性化些,因为它会出现在你的网站地址中)
    • 邮箱
    • 密码
  3. 邮箱验证:GitHub 会给你的邮箱发送一封验证邮件,请点击确认链接完成激活。

📌 注意:注册过程中 GitHub 可能会问你一些使用习惯的问题,随意选择即可,不影响后续使用。


📦 创建你的第一个代码仓库(Repository)

这个仓库将作为你网站的"家"。

  1. 登录 GitHub,点击右上角头像 -> Your repositories -> New 创建新仓库。

  2. 仓库命名格式必须为:你的用户名.github.io

    • 例如你的用户名是 leo,那么仓库名就填 leo.github.io
  3. 可选择勾选"Add a README file",方便初始化仓库。

  4. 点击 "Create repository" 完成创建。


✍️ 创建主页文件:index.html

  1. 进入你刚刚创建的仓库。

  2. 点击 "Add file" -> "Create new file"。

  3. 文件名必须是 index.html ,因为浏览器默认访问的是这个页面。

  4. 在编辑框里输入你的网站内容,例如:

    html 复制代码
    <html>
      <head>
        <title>我的个人主页</title>
      </head>
      <body>
        <h1>你好,欢迎来到我的GitHub主页!</h1>
        <p>这是我第一个静态网站~</p>
      </body>
    </html>
  5. 填写提交说明,点击 "Commit new file"。


🚀 部署网站到 GitHub Pages

接下来,我们就要把这个网站"发布"到互联网上了!

  1. 打开仓库主页,点击上方的 Settings
  2. 在左侧菜单中找到 "Pages"
  3. "Build and Deployment" 部分:
    • Source:选择 Deploy from a branch
    • Branch:选择 mainmaster(视你创建仓库时选择的分支而定)
  4. 保存设置。

🌐 查看你的网站

几分钟后,你就可以通过浏览器访问你的网站啦!

✅ 访问规则说明:

  1. 如果你的用户名和仓库名一致(即你创建的是用户主页)
    • 仓库名必须是:你的用户名.github.io

    • 访问地址是:

      复制代码
      https://你的用户名.github.io
    • 例如,如果你的用户名是 leo,访问地址就是:

      复制代码
      https://leo.github.io
  1. 如果你创建的是其他仓库(项目站点)
    • 仓库名不是 用户名.github.io,而是其他名字,比如 blogresume 等;

    • 那么访问地址是:

      复制代码
      https://你的用户名.github.io/仓库名
    • 例如你的用户名是 leo,仓库名是 blog,那么访问地址是:

      复制代码
      https://leo.github.io/blog

📌 说明:用户主页(User Page)项目主页(Project Page) 是 GitHub Pages 的两种不同的部署模式。只有当仓库名严格等于"你的用户名.github.io"时,才会被识别为用户主页。


🔁 如果以后 GitHub 被墙了怎么办?

不用担心!你已经掌握了部署静态网站的核心方法:

  • 你可以选择将代码迁移到国内的代码托管平台,比如 Gitee(码云)
  • 这些平台同样支持静态页面托管,只需稍作调整。
相关推荐
Natsume171011 分钟前
嵌入式开发:GPIO、UART、SPI、I2C 驱动开发详解与实战案例
c语言·驱动开发·stm32·嵌入式硬件·mcu·架构·github
荔枝吻1 小时前
【AI总结】Git vs GitHub vs GitLab:深度解析三者联系与核心区别
人工智能·git·github
幻凡ss1 小时前
github pages使用免费CDN加速-netlify
github·github pages·github cdn·github pages加速·netlify加速github·hexo博客免费cdn加速·个人博客免费cdn加速
我是哪吒4 小时前
分布式微服务系统架构第155集:JavaPlus技术文档平台日更-Java线程池实现原理
后端·面试·github
DeepSeek-大模型系统教程12 小时前
推荐 7 个本周 yyds 的 GitHub 项目。
人工智能·ai·语言模型·大模型·github·ai大模型·大模型学习
ai小鬼头15 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
扣脚大汉在网络19 小时前
github如何创建一个自己的仓库保姆级教程
github
不午睡的探索者1 天前
告别性能瓶颈!Python 量化工程师,进击 C++ 高性能量化交易的“必修课”!
c++·github
光溯星河1 天前
【实践手记】Git重写已提交代码历史信息
后端·github
独立开阀者_FwtCoder1 天前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github