使用 GitHub 进行网站部署的全面指南

什么是 GitHub ？

GitHub 是一个基于 Git 的版本控制系统，允许用户进行代码托管和项目管理。用户可以通过 GitHub 提交、分享和协作开发代码。

开源项目 共享
代码版本控制
团队协作 工具

GitHub 的基本概念

在进行网站部署之前，了解一些基本概念是非常重要的。

仓库（Repository）：存放项目代码的地方。
分支（Branch）：用于版本控制，可以并行开发不同的功能。
提交（Commit）：保存项目修改的快照。

什么是网站部署

网站部署是将开发完成的网站代码发布到服务器上，使其可供用户访问的过程。常见的部署方式有：

静态网站：没有后端，通常由 HTML、CSS 和 JavaScript 文件构成。
动态网站：需要服务器支持，通常与数据库交互。

如何使用 GitHub Pages 部署静态网站

GitHub Pages 是 GitHub 提供的一项服务，允许用户直接从 GitHub 仓库中托管静态网站。

1. 创建一个新的 GitHub 仓库

登录 GitHub，点击右上角的 “+” 按钮，选择 “New repository”。
输入仓库名称，例如 mywebsite。
勾选 “Initialize this repository with a README”。

2. 将网站文件上传到仓库

可以直接在网页上上传文件，或者使用 Git 工具上传。
将 HTML、CSS、JavaScript 等文件放入仓库中。

3. 启用 GitHub Pages

在仓库主页上，点击 “Settings”。
向下滚动至 “GitHub Pages” 部分。
在 “Source” 下拉框中选择 main branch。
保存设置，几秒钟后，您的网站将上线！

设置 GitHub Pages

设置 GitHub Pages 非常简单，只需按照以下步骤：

在仓库中确保存在 index.html 文件，作为网站的入口文件。
可以选择自定义域名，或者使用 GitHub 提供的 username.github.io/repositoryname。

优化网站

使用 CSS 框架（如 Bootstrap）提升网站外观。
引入 JS 库（如 jQuery）增加交互性。

如何通过 GitHub Actions 实现持续集成和持续部署（CI/CD）

GitHub Actions 允许用户在每次提交代码时自动构建和部署网站，确保代码的持续集成和持续部署。

1. 创建 GitHub Actions Workflow

在仓库中创建 .github/workflows 目录。
新建文件 deploy.yml，并编写工作流配置。

2. 编写工作流配置

yaml name: Deploy to GitHub Pages

on: push: branches: – main

jobs: deploy: runs-on: ubuntu-latest steps: – name: Checkout code uses: actions/checkout@v2

- name: Setup Node.js
  uses: actions/setup-node@v2
  with:
    node-version: '14'

- name: Install dependencies
  run: npm install

- 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

将工作流文件提交并推送到 GitHub，系统会自动触发工作流。

常见问题解答

Q1: GitHub Pages 支持动态网站吗？

GitHub Pages 主要支持 静态网站，不支持服务器端代码。如果需要动态网站，可以考虑使用其他服务，例如 Heroku、Vercel 等。

Q2: 如何处理自定义域名？

在 GitHub Pages 设置中可以指定自定义域名，同时需要在域名注册商处配置相应的 DNS 记录。

Q3: GitHub Pages 有流量限制吗？

是的，GitHub Pages 有流量限制，每个用户账户每月的流量限制为 100GB。

Q4: 如何对网站进行 SSL 配置？

GitHub Pages 自动为所有的 *.github.io 域名提供 SSL 支持，自定义域名也可以通过 GitHub 提供的证书服务实现。

Q5: 如何排除某些文件不被部署？

在仓库根目录下创建一个 .gitignore 文件，将不需要的文件或文件夹添加到其中。

通过以上的步骤，您可以轻松使用 GitHub 部署您的网站。不论是个人博客还是项目展示，GitHub Pages 都是一个简单且有效的解决方案。通过进一步学习 GitHub Actions，您还可以实现更为自动化的部署流程。希望本文对您有所帮助！