|
| 1 | +# CircleCI example [](https://circleci.com/projects/83463) |
| 2 | + |
| 3 | +An example using [CircleCI](https://circleci.com) for continuous deployment to [Surge.sh](https://surge.sh). |
| 4 | + |
| 5 | +## Getting started |
| 6 | + |
| 7 | +Continuous Deployment services like [CircleCI](https://circleci.com) make it possible to run publish your project on Surge each time you push to a GitHub repository. |
| 8 | + |
| 9 | +This guide will walk you through: |
| 10 | + |
| 11 | +1. Getting your Surge token, so CircleCI can login to Surge on your behalf |
| 12 | +2. Adding Surge as a `devDependency`, so CircleCI can install Surge |
| 13 | +3. Setting up your project on CircleCI, so you can publish each time you push to GitHub |
| 14 | + |
| 15 | +First, you’ll need your token from the Surge CLI. This secret key lets services like CircleCI login and publish projects on your behalf. Get your Surge token by running the following command in your terminal: |
| 16 | + |
| 17 | +``` |
| 18 | +surge token |
| 19 | +``` |
| 20 | + |
| 21 | +You’ll be asked to login again, and afterwards your token will be displayed like this: |
| 22 | + |
| 23 | +``` |
| 24 | +token: a142e09a6b13a21be512b141241c7123 |
| 25 | +``` |
| 26 | + |
| 27 | + |
| 28 | + |
| 29 | +### Adding Surge as a `devDependency` to a `package.json` file |
| 30 | + |
| 31 | +CircleCI’s machines won’t have Surge installed by default, so you also need to save Surge as a development dependency in your project. This lets CircleCI know it needs to install Surge to publish your project. |
| 32 | + |
| 33 | +You can do this by creating a `package.json` file if you don’t have one already. Run the following command in your terminal to be walked through making this file (you can hit enter to accept the defaults): |
| 34 | + |
| 35 | +```sh |
| 36 | +npm init |
| 37 | +``` |
| 38 | + |
| 39 | +You will end up with a file that looks [something like this one](package.json). |
| 40 | + |
| 41 | +Next, run this command to save Surge as a `devDependency`, so CircleCI will install it: |
| 42 | + |
| 43 | +```sh |
| 44 | +npm install --save-dev surge |
| 45 | +``` |
| 46 | + |
| 47 | +<!-- |
| 48 | +
|
| 49 | +### Add your project’s repository to CircleCI |
| 50 | +
|
| 51 | +Now you can login and setup a new project on CircleCI. Add your project’s GitHub repository to your CircleCI projects: |
| 52 | +
|
| 53 | + |
| 54 | +
|
| 55 | +### Define your Setup and Test Commands |
| 56 | +
|
| 57 | +Now you’re ready to run `surge` on CircleCI. Your CircleCI setup commands run before the deployment command. |
| 58 | +
|
| 59 | + |
| 60 | +
|
| 61 | +Your setup commands should look like this: |
| 62 | +
|
| 63 | +```sh |
| 64 | +# Install the latest version of Node.js |
| 65 | +nvm install stable |
| 66 | +nvm use stable |
| 67 | +
|
| 68 | +# Install Surge as a devDependency |
| 69 | +npm install |
| 70 | +``` |
| 71 | +
|
| 72 | +After you push you successfully to your repository, CircleCI will run your Test Pipeline commands, which is when you can publish your project with Surge: |
| 73 | +
|
| 74 | +```sh |
| 75 | +# Run your tests (if you have any) |
| 76 | +npm test |
| 77 | +
|
| 78 | +# Run Surge |
| 79 | +surge --project ./ --domain example-circleci.surge.sh |
| 80 | +``` |
| 81 | +
|
| 82 | +### Add Environment Variables |
| 83 | +
|
| 84 | +Press _Environment Variables_ next, and you’ll be able to secretly add your email address and token so CircleCI can login to Surge for you: |
| 85 | +
|
| 86 | + |
| 87 | +
|
| 88 | +Create one environment variable called: |
| 89 | +
|
| 90 | +``` |
| 91 | +SURGE_LOGIN |
| 92 | +``` |
| 93 | +
|
| 94 | +…and set it to the email address you use with Surge. Next, add another environment variable called: |
| 95 | +
|
| 96 | +``` |
| 97 | +SURGE_TOKEN |
| 98 | +``` |
| 99 | +
|
| 100 | +…and set it to your Surge token. |
| 101 | +
|
| 102 | + |
| 103 | +
|
| 104 | +### Add a deployment script |
| 105 | +
|
| 106 | +Push to your repository, and your Setup and Test commands should run, triggering your tests to run on CircleCI. Now, CircleCI will let you move onto adding a script for Continuous Deployment. You can press the button labeled _Set up Continuous Deployment_ or access this section under your project settings: |
| 107 | +
|
| 108 | + |
| 109 | +
|
| 110 | +Add a _Custom Script_ and enter the command you want to run with Surge, for example: |
| 111 | +
|
| 112 | +```sh |
| 113 | +surge --project ./ example-circleci.surge.sh |
| 114 | +``` |
| 115 | +
|
| 116 | +Now, when you push your project to GitHub again, this command will be run and your project will get published automatically. |
| 117 | +
|
| 118 | +--> |
| 119 | + |
| 120 | +## License |
| 121 | + |
| 122 | +[The MIT License (MIT)](LICENSE.md) |
| 123 | + |
| 124 | +Copyright © 2015 [Chloi Inc.](http://chloi.io) |
0 commit comments