[譯] 如何使用 CircleCI for GitHub Pages 持續部署

今天我將介紹如何在GitHub頁面上使用 CircleCI 進行持續部署。

CircleCI 是一個很像 Travis CI 的CI工具。 但他們的配置有不少不一樣之處。 你可能會發現, 首先使用它很麻煩。

若是你太忙，不能閱讀官方文檔。 本教程對您做爲快速備忘，很是有幫助。

1. 註冊 CircleCI

打開 CircleCI 官方網站，使用您的GitHub賬戶登陸。

2. 啓動存儲庫

檢查要在 CircleCI 上管理的存儲庫的開關按鈕。

3. 編寫 config.yml

在項目根目錄或 .circleci 目錄中爲 CircleCI 建立名爲 config.yml 的配置文件 首先，您須要設置構建環境，這取決於您的項目語言和依賴項：

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:latest
複製代碼

若是要指定觸發 ci 任務的某個分支，可使用過濾器：

filters:
  branches:
    only: master
複製代碼

而後，您能夠配置要在虛擬機上運行的命令，命令能夠按步驟劃分：

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 來構建個人 doc 站點。這是一個完整的模板：

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密鑰

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密鑰，以便在運行部署腳本時啓用它。

- 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 命令來操做您的存儲庫：

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
• Adding read/write deployment key
• CircleCI Deploy documents
• CircleCI configuration-reference