返回

从零开始：用 Github 部署静态界面，轻松实现域名绑定

开发工具

[精选]

对于想在网上展示自己的作品或项目的开发者和设计师来说，将静态界面部署到 Github Pages 并绑定域名是一个非常棒的选择。Github Pages 提供了免费的静态网站托管服务，而绑定域名则可以让你使用自己的域名来访问你的网站。

接下来，我们将详细介绍如何使用 Github 部署静态界面，并绑定域名。

1. 创建静态项目仓库

首先，你需要创建一个新的 Github 仓库来存储你的静态网站项目。你可以使用命令行工具或直接在 Github 网站上创建仓库。

# 使用命令行工具创建仓库
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPOSITORY.git
git push -u origin master

# 在 Github 网站上创建仓库
1. 登录 Github 账号
2. 点击右上角的 "+" 按钮
3. 选择 "New repository"
4. 输入仓库名称和
5. 选择 "Public" 或 "Private"
6. 点击 "Create repository" 按钮

2. 配置 Github Pages

创建好仓库后，你需要配置 Github Pages 来托管你的静态网站。

# 在仓库的根目录下创建 "CNAME" 文件
# 在 "CNAME" 文件中输入你的域名（例如 "example.com"）

# 在仓库的根目录下创建 ".github/workflows/" 目录
# 在该目录下创建 "main.yml" 文件
# 在 "main.yml" 文件中输入以下内容：

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Build
        run: npm run build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

3. 配置阿里云域名

接下来，你需要配置阿里云域名来绑定你的 Github Pages 网站。

# 登录阿里云账号
# 进入 "域名管理" 页面
# 选择你的域名
# 点击 "解析" 按钮
# 点击 "添加解析" 按钮
# 输入以下信息：
#   记录类型：CNAME
#   主机记录：@
#   记录值：你的 Github Pages 网站地址（例如 "example.com.github.io"）
#   TTL：10 分钟

4. 部署你的网站

现在，你可以将你的网站部署到 Github Pages 了。

# 在命令行工具中输入以下命令：
git push origin main

# 等待部署完成（通常需要几分钟）

# 访问你的网站：
# https://你的域名

5. 常见问题

  • 如果你的网站无法访问，请检查你的域名是否正确配置，以及你的 Github Pages 网站是否正确部署。
  • 如果你的网站加载缓慢，请检查你的网站是否使用了大量的资源（例如大型图像或视频）。
  • 如果你的网站遇到其他问题，请查看 Github Pages 的文档或寻求帮助。

结论

通过遵循本指南，你已经成功地将你的静态界面部署到了 Github Pages，并绑定了域名。现在，你的网站已经可以在线访问了。尽情发挥你的创造力，让你的网站脱颖而出吧！