Today I’ll show you how to use CircleCI for continuous deployment on GitHub pages.

CircleCI is a CI tool much like Travis CI. But there are many differences in their configuration. You may find it cumbersome to use in the first place.

If you are too busy to read official documents. This tutorial is very helpful for you as a quick cheat sheet.

1. Registered CircleCI

Open CircleCI’s official website and log in using your GitHub account.

2. Start the repository

Check the on/off button for the repository to manage on CircleCI.

3. Write config. Yml

First, you need to set up the build environment, depending on your project language and dependencies:

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:latest
Copy the code

If you want to specify a branch that triggers a CI task, you can use a filter:

filters:
  branches:
    only: master
Copy the code

You can then configure the commands to run on the virtual machine, which can be divided into steps:

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

I’m using Gatsby to build my doc site. Here is a complete template:

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 scriptscommand: ../gatsby-deploy.sh
Copy the code

4. Write permission to CircleCI

For me, I have to authorize CircleCI to automatically update the GH page. The default SSH key generated before read permission is obtained. So we must manually add the read/write deployment key.

Generates a new SSH key

ssh-keygen -t rsa -b 4096 -C "[email protected]"
Copy the code

Following command line interaction, you will get two SSH key files id_rsa and id_rsa.pub (remember to change the default file location or your local SSH key will be overwritten).

Uploading an SSH Key

1. Upload id_Rsa.pub on your GitHub repo Settings via https://github.com/<your_name>/<your_repo>/ Settings /keys.

2. Jump to https://circleci.com/gh/<your_name>/<your_repo>/edit# SSH and add the private key id_RSA that you just created.

Enter github.com in the host name field and press the submit button. And add the private key ID_RSA that you just created. Enter github.com in the host name field and press the submit button.

Add the SSH key to the configuration file

Use add_ssh_keys to set the SSH key you just added to enable it when you run the deployment script.

- add_ssh_keys:
    fingerprints:
      - "xx:xx:xx:xx:11:22:33:44:55:66:77:88:99:xx:xx:xx"
Copy the code

5. Writedeploy.shA shell script

Now that CircleCI has permission to write to your repository, you can use any git command to manipulate your repository:

git pull
yarn build
git checkout gh-pages
# Add site files...
git push
Copy the code

6. Start testing and enjoy it

That’s all. You’re happy now. Grab a cup of coffee and sit down to watch CircleCI run.

reference

  • Generating a new SSH key and adding it to the ssh-agent
  • Adding read/write deployment key
  • CircleCI Deploy documents
  • CircleCI configuration-reference