# \[译] 如何使用CircleCI for GitHub Pages持续部署

今天我将介绍如何在 GitHub 页面上使用 [CircleCI](https://circleci.com/) 进行持续部署。

CircleCI 是一个很像 [Travis CI](https://travis-ci.org/) 的 CI 工具。 但他们的配置有很多不同之处。 你可能会发现, 首先使用它很麻烦。

如果你太忙，不能阅读[官方文档](https://circleci.com/docs/2.0/)。 本教程对您作为快速备忘，非常有帮助。

### 1. 注册 CircleCI

打开 [CircleCI](https://circleci.com/) 官方网站，使用您的 GitHub 帐户登录。

### 2. 启动存储库

检查要在 CircleCI 上管理的存储库的开关按钮。

### 3. 编写 config.yml

在项目根目录或 .circleci 目录中为 CircleCI 创建名为 config.yml 的配置文件 首先，您需要设置构建环境，这取决于您的项目语言和依赖项：

```javascript
version: 2
jobs:
  build:
    docker:
      - image: circleci/node:latest
```

如果要指定触发 ci 任务的某个分支，可以使用过滤器：

```javascript
filters: branches: only: master
```

然后，您可以配置要在虚拟机上运行的命令，命令可以按步骤划分：

```javascript
steps:
  - run:
    name: Install some stuff
    command: <do-some-stuff>
  - run:
    name: Deploy if tests pass and branch is Master
    command: <my-deploy-commands>
```

我正在使用 [Gatsby](https://link.juejin.im/?target=https%3A%2F%2Fwww.gatsbyjs.org%2F) 来构建我的 doc 站点。这是一个完整的模板：

```javascript
version: 2
jobs:
  build:
    docker:
      - image: circleci/node:latest
    filters:
      branches:
        only: master
    steps:
      - add_ssh_keys:
          fingerprints:
            - "xx:xx:xx:xx:11:22:33:44:55:66:77:88:99:xx:xx:xx"
      - checkout
      - restore_cache:
          keys:
          - dependencies-
          # fallback to using the latest cache if no exact match is found
          - dependencies-
      - run:
          name: Install
          command: yarn install
      - save_cache:
          paths:
            - node_modules
          key: dependencies-
      - run:
          name: Gatsby build site
          command: yarn build
      - run:
          name: Prepare shell commands
          command: cp .scripts/gatsby-deploy.sh ../ && chmod +x ../gatsby-deploy.sh
      - run:
          name: Run deploy scripts
          command: ../gatsby-deploy.sh
```

### 4. 写入 CircleCI 的权限

对我来说，我必须授权 CircleCI 自动更新 gh 页面 。在获得读取权限之前生成的默认 ssh 密钥。所以我们必须手动添加读/写部署密钥。

#### 生成一个新的 ssh 密钥

```javascript
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
```

按照命令行交互，您将获得两个 ssh 密钥文件 id\_rsa 和 id\_rsa.pub（记得更改默认文件位置或您的本地 ssh 密钥将被覆盖）。

#### 上传 ssh 密钥

1.通过<https://github.com/\\>\<your\_name>/\<your\_repo>/settings/keys 上传您的 GitHub repo 设置上的 id\_rsa.pub。

2.跳转到<https://circleci.com/gh/\\>\<your\_name>/\<your\_repo>/edit#ssh 并添加您刚刚创建的私钥 id\_rsa。

  在主机名字段中输入`github.com`，然后按 提交按钮。并添加您刚刚创建的私钥 id\_rsa。 在主机名字段中输 入 `github.com`, 然后按提交按钮。

#### 将 ssh 密钥添加到配置文件中

使用 add\_ssh\_keys 设置刚刚添加的 ssh 密钥，以便在运行部署脚本时启用它。

```javascript
- add_ssh_keys:
    fingerprints:
      - "xx:xx:xx:xx:11:22:33:44:55:66:77:88:99:xx:xx:xx"
```

### 5. 编写 deploy.sh shell 脚本

现在 CircleCI 获得了写入您的存储库的权限，您可以使用任何 git 命令来操作您的存储库：

```javascript
git pull
yarn build
git checkout gh-pages
# Add site files...
git push
```

### 6. 开始测试并享受它

就这样。你现在很高兴。拿起一杯咖啡坐下来观看 CircleCI 跑。

### 参考

* [Generating a new SSH key and adding it to the ssh-agent](https://help.github.com/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent/)
* [Adding read/write deployment key](https://circleci.com/docs/2.0/deployment-integrations/)
* [CircleCI Deploy documents](https://circleci.com/docs/2.0/deployment_integrations/)
* [CircleCI configuration-reference](https://circleci.com/docs/2.0/configuration-reference/#add_ssh_keys)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shenjunhong.gitbook.io/blog/yi-wen/yi-ru-he-shi-yong-circleci-for-github-pages-chi-xu-bu-shu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.