1. 树叶云首页
  2. 服务器相关

github 搭建网站，GitHub如何免费搭建个人网站？

运维••服务器相关

使用 GitHub 搭建网站是许多开发者和个人用户的首选方式，尤其适合静态网站的部署，这种方法不仅免费、便捷，还能利用 GitHub 的版本控制功能实现网站的快速更新和回滚，以下将详细介绍从零开始使用 GitHub 搭建网站的完整流程，包括准备工作、本地开发、远程部署、自定义域名配置及优化技巧等内容。

github 搭建网站
（图片来源网络，侵删）

准备工作：注册 GitHub 账号并创建仓库

需要一个 GitHub 账号，如果没有，访问 GitHub 官网 注册即可，注册过程免费且简单，账号创建完成后，登录 GitHub，点击右上角的“+”号，选择“New repository”创建新仓库。

  • 仓库名称：建议使用 用户名.github.io 的格式（如果用户名是 john-doe，仓库名则设为 john-doe.github.io），这是 GitHub Pages 的默认域名规则。
  • 仓库可见性：选择“Public”（公开），因为 GitHub Pages 仅支持公开仓库的免费部署。
  • 初始化选项：勾选“Add a README file”，方便后续管理。
    创建完成后，仓库地址会显示为 https://github.com/用户名/用户名.github.io，后续部署时需要用到这个地址。

本地开发：创建网站文件

静态网站的核心是 HTML、CSS 和 JavaScript 文件，可以使用任何代码编辑器（如 VS Code、Sublime Text）创建本地项目文件夹，并编写网站文件，以下是一个简单的示例结构： 

my-website/
├── index.html      # 首页
├── css/
│   └── style.css   # 样式文件
└── js/
    └── script.js   # 交互脚本

编写基础 HTML 文件

打开 index.html，输入以下内容（可根据需求修改）： 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的 GitHub 网站</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>欢迎来到我的网站</h1>
    </header>
    <main>
        <p>这是使用 GitHub Pages 搭建的静态网站示例。</p>
    </main>
    <script src="js/script.js"></script>
</body>
</html>

添加样式和脚本

在 css/style.css 中编写简单样式：

github 搭建网站
（图片来源网络，侵删）
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}
header {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem;
}
main {
    background: #fff;
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

在 js/script.js 中添加交互功能（例如点击按钮弹出提示）： 

document.addEventListener('DOMContentLoaded', function() {
    const button = document.createElement('button');
    button.textContent = '点击我';
    button.style.padding = '10px 20px';
    button.style.marginTop = '10px';
    button.addEventListener('click', function() {
        alert('Hello, GitHub Pages!');
    });
    document.querySelector('main').appendChild(button);
});

部署到 GitHub：上传网站文件

将本地文件上传到 GitHub 仓库，可通过以下两种方式实现：

使用 GitHub Desktop 客户端（适合新手）

  1. 下载并安装 GitHub Desktop，登录 GitHub 账号。
  2. 在 GitHub Desktop 中点击 “File” → “Add Local Repository”，选择本地 my-website 文件夹。
  3. 填写仓库摘要（如“Initial commit”），点击 “Commit to main”。
  4. 点击右上角的 “Push origin” 按钮，将文件推送到 GitHub 仓库。

使用 Git 命令行（适合熟悉 Git 的用户）

  1. 打开终端,进入本地项目文件夹，初始化 Git 仓库： 
    git init
  2. 添加远程仓库（替换 用户名 为你的 GitHub 用户名）： 
    git remote add origin https://github.com/用户名/用户名.github.io.git
  3. 添加所有文件并提交： 
    git add .
git commit -m "Initial commit"
  4. 推送到 GitHub： 
    git push -u origin main

推送完成后,等待 1-2 分钟，访问 https://用户名.github.io 即可看到网站内容，如果未显示，检查仓库的 “Settings” → “Pages” 中 “Source” 是否选择为 “Deploy from a branch”，且分支为 “main”。

自定义域名：绑定个人域名

如果希望使用个人域名（如 www.example.com）访问网站，可按以下步骤配置：

github 搭建网站
（图片来源网络，侵删）
  1. 购买域名：在域名注册商（如阿里云、GoDaddy）购买域名。
  2. 配置 DNS 解析：在域名管理后台添加 CNAME 记录，将域名指向 GitHub Pages 地址：
    | 记录类型 | 主机记录 | 记录值 |
    |———-|———-|————————-|
    | CNAME | www | 用户名.github.io |
    （注：如果需要直接用根域名访问，可添加 A 记录，指向 GitHub 的 IP 地址 199.108.153、199.109.153、199.110.153、199.111.153）
  3. 在 GitHub 仓库中设置域名：
    • 进入仓库 “Settings” → “Pages”。
    • 在 “Custom domain” 输入框中填写你的域名（如 www.example.com）。
    • 勾选 “Enforce HTTPS”（启用 HTTPS，需等待 GitHub 证书签发）。
      配置完成后，等待 10-30 分钟，通过个人域名即可访问网站。

优化与维护：提升网站体验

启用 HTTPS

GitHub Pages 默认支持 HTTPS，在 “Settings” → “Pages” 中开启后，可确保网站数据传输安全，避免浏览器“不安全”警告。

使用 Jekyll 或静态站点生成器

如果希望更高效地管理网站内容,可结合 Jekyll（GitHub Pages 内置支持）或 Hexo、Hugo 等工具，使用 Markdown 编写文章，通过工具自动生成 HTML 文件，再部署到 GitHub。

定期更新与回滚

  • ：修改本地文件后，通过 git add .、git commit -m "更新说明"、git push 推送到 GitHub，网站会自动更新。
  • 回滚版本：如果更新后出现问题，可在仓库 “Commits” 页面找到历史版本，点击右侧的 “…” → “Revert this commit”，恢复到之前的版本。

添加网站统计

使用 Google Analytics 或百度统计，在 HTML 文件的 <head> 标签中插入对应的跟踪代码，即可访问网站流量数据。

相关问答 FAQs

问题 1：GitHub Pages 是否支持动态网站（如 PHP、数据库）？
解答：GitHub Pages 仅支持静态网站，无法直接运行 PHP、Python 等服务器端语言或连接数据库，如果需要动态功能，可结合第三方服务（如 Firebase、Netlify）或使用 GitHub Actions 部署到其他云平台。

问题 2：如何为 GitHub Pages 网站配置 404 错误页面？
解答：在仓库根目录下创建 html 文件，编写自定义 404 页面内容（需包含 <meta name="robots" content="noindex"> 避免被搜索引擎收录），访问不存在的页面时，GitHub 会自动显示该文件。 

<!DOCTYPE html>
<html>
<head>页面未找到</title>
    <meta name="robots" content="noindex">
</head>
<body>
    <h1>404 - 页面不存在</h1>
    <p>抱歉，您访问的页面不存在。</p>
    <a href="https://用户名.github.io">返回首页</a>
</body>
</html>

提交后,即可通过访问任意不存在的路径测试 404 页面。

原文来源：https://www.dangtu.net.cn/article/9014.html

文章来源网络，作者：运维，如若转载，请注明出处：https://shuyeidc.com/wp/320228.html<

赞 (0)
运维的头像运维
00
上一篇2025-08-31 15:18
下一篇 2025-08-31 15:27

相关推荐

  • 如何免费新建网站技术资讯

    如何免费新建网站？有哪些靠谱途径？

    如何免费新建网站是许多个人博主、小型企业主或创业者在初期资源有限时的常见需求，通过合理利用免费工具和平台，完全可以搭建一个功能完善、视觉美观的网站，以下是详细的步骤和注意事项，帮助你零成本实现网站上线，第一步：明确网站定位与需求在动手之前,先理清网站的核心目标，是个人博客、作品集展示、企业官网还是电商店铺？不同……

    运维的头像运维
    2025-11-14
    0
  • 如何建手机邮箱地址技术资讯

    手机邮箱地址怎么建？

    在数字化时代,手机邮箱地址已成为个人通信、工作协作、账号注册等场景的重要工具，它不仅方便随时收发邮件，还能作为多种服务的身份验证依据，要成功建立手机邮箱地址，需从准备工作、选择服务商、注册流程、安全设置、日常管理等多个环节入手，以下是详细步骤和注意事项：建立手机邮箱地址的准备工作在注册邮箱前,需完成基础准备工作……

    运维的头像运维
    2025-11-13
    0
  • 阿里云如何建多个网站技术资讯

    阿里云如何同时建多个网站？

    在阿里云上搭建多个网站是许多企业和开发者的常见需求，通过合理利用阿里云的服务，可以高效、安全地实现多网站部署，以下是详细的操作步骤和注意事项,帮助用户顺利完成多网站搭建，用户需要准备一个符合要求的阿里云服务器（ECS），建议选择配置较高的实例，尤其是当多个网站预计会有一定流量时，CPU、内存和带宽资源需要充足……

    运维的头像运维
    2025-11-10
    0
  • 如何免费建设公司网站技术资讯

    如何免费建公司网站？有哪些靠谱方法？

    免费建设公司网站已成为许多初创企业和中小型企业的理想选择，既能降低成本，又能快速建立线上形象，以下是详细的步骤和工具指南,帮助您从零开始搭建专业网站，明确网站定位与需求在动手前，需先明确网站的核心目标，是展示公司产品/服务、提供客户联系方式，还是实现在线销售？根据目标确定网站类型（企业官网、电商网站、博客型网站……

    运维的头像运维
    2025-11-06
    0
  • 三级域名如何弄技术资讯

    三级域名如何正确配置与解析？

    要实现三级域名的搭建,需要理解域名系统的层级结构，并通过技术手段完成解析配置，以下是详细步骤和注意事项，帮助您顺利完成三级域名的设置，理解三级域名的概念与结构域名系统采用层级结构,从右到左依次为顶级域名（TLD）、二级域名、三级域名，依此类推，在 example.com 中，.com 是顶级域名，example……

    运维的头像运维
    2025-11-03
    0

发表回复

您的邮箱地址不会被公开。必填项已用 * 标注