Github

使用 GitHub Pages 建立个人站点

GitHub 不仅能托管代码，还可以通过 GitHub Pages 工具免费建立静态站点，非常适合前端开发人员学习、展示作品。具体步骤如下：

在 Github 站点注册帐号，邮箱验证激活。
创建仓库。在 GitHub 注册登陆后，创建以自己用户名开头的“username.github.io”的公开仓库，其中 username 必须和 GitHub 注册时的用户名一致，否则无法使用 Github page 服务。
克隆仓库。进入到想要存储项目的文件夹，执行如下命令克隆仓库：
Terminal window
```
git clone https://github.com/username/username.github.io.git
```
输入用户名、密码，完成克隆操作后，应该在文件夹生成“username.github.io”的子文件夹，之后个人站点的文件和操作都在该文件夹中完成。
创建首页。进入本地“username.github.io”文件夹，使用编辑器创建 index.html，这个文件将是个人站点的首页。
提交代码到 GitHub。完成页面编辑后，就可以发布代码到 GitHub：
Terminal window
```
git add --all
git commit -m "Initial commit"
git push -u origin master
```
如果是首次运行 git 工具，还要进行全局性用户名和邮箱的声明：
Terminal window
```
git config --global user.email "[email protected]"
git config --global user.name "username"
```
上述操作完成后，本地仓库中的代码将推送到 GitHub 远程仓库。
浏览站点。启动浏览器，访问如下地址，即可浏览站点：
Terminal window
```
http://username.github.io
```

使用 Github Actions 实现自动部署

GitHub Actions 是 GitHub 提供的持续集成/持续部署(CI/CD)服务。它可以自动化软件开发工作流程,包括构建、测试和部署等任务。

主要概念:

Workflow(工作流): 一个可配置的自动化流程
Event(事件): 触发工作流的条件,如 push、pull request 等
Job(作业): 工作流中的一系列步骤
Step(步骤): 作业中的具体任务
Action(动作): 可重用的工作单元

下面是一个简单的 workflow 示例,当代码推送到 main 分支时自动构建并部署:

name: Build and Deploy
on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "18"

      - name: Install Dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages
          folder: dist

这个工作流程会：

在推送到 main 分支时触发
使用 Ubuntu 最新版作为运行环境
检出代码
设置 Node.js 环境
安装项目依赖
构建项目
将构建结果部署到 gh-pages 分支

要使用 GitHub Actions，需要在项目根目录创建 .github/workflows 目录，并在其中创建 YAML 文件（如 deploy.yml）来定义工作流程。

配置完成后，每次推送代码到 main 分支时，GitHub Actions 就会自动执行这个工作流程，完成构建和部署。

你可以在仓库的 Actions 标签页中查看工作流程的执行状态和日志。