Edit this on

guides

Deploy with TravisCI & Now

We have seen so far how to create a blog, render and filter markdown files, use custom components and how to add analytics. In this post, we'll explore how to deploy our blog using Travis CI and Now.

Deploy with Now

Once we are ready to push our development to the outside world, we can try to manually deploy an exported version using now- read more on zeit.co

We can start by installing globally the now cli or you can install the desktop version which allows you to control what's deployed and also drag and drop folders.

Since we will use now as part of our development later with Travis CI, it is better to install it as part of our devDependencies

npm i -D now

With npm 5.x we can use npx to execute a command from our node_modules. Deploying manually will require to first sign in into the now cli. As stated in the getting started guide.

The first time you run now, it'll ask for your email address in order to identify you. Simply click on the email you've received, and you'll be logged in automatically.

Once you finish the login process we can now export our site:

npm run export

and then deploy it:

npx now ./out

That's all you need. If everything goes well you will have a link to your deploy in your console (and available in your clipboard to paste it in your browser.)

Automate the process with TravisCI

Using TravisCI is quite simple. If you want to use a free account you will need to have your code available in a public github repository.

Login into TravisCI with your github account and follow the steps to enable the CI with your repository.

Configure your .travis.yml

Add a new file to your repository named .travis.yml with the following content:

language: node_js
node_js:
  - '8'
script: npm run export
deploy:
  provider: script
  script: npm run deploy
  skip_cleanup: true
  on:
    branch: master

This configuration file will tell Travis to use node 8 and execute the npm run export. It will run npm run deploy to perform the deploy task. It is important to remark that we need to skip cleanup since the deploy task will use files generated by the export task.

Check the TravisCI guides for further information on how to configure the .travis.yml file.

Now Token

We need to create a token to use our now account with TravisCI to deploy automatically. To do so, go to your account/token and create a new token.

Adding the now token into TravisCI

You can follow the TravisCI guide on how to add a new token / environment variable with the travisci cli. We are going to define a new variable using the TravisCI Settings. We just need to go to our repository settings and scroll down to the Environment Variables section. Add a name such as NOW_TOKEN, paste the generated token and click Add.

Add the export task into the package.json

The .travis.yml specifies that we will run a deploy script. We need to add the deploy script to our package.json

{
  "name": "my-awesome-blog",
  //...
  "scripts":{
    "dev": "nextein",
    "export": "nextein build && nextein export",
    "deploy": "now ./out --static --no-clipboard --token=$NOW_TOKEN --public" 
  }
}

The deploy script uses the environment variable NOW_TOKEN that we defined earlier. The extra parameters are not strictly necessary.

Using an Alias

In case we want to use an alias with now deploys, we just need to change the deploy script to add the alias command:

{
    "name": "my-awesome-blog",
    //...
    "scripts":{
        "dev": "nextein",
        "export": "nextein build && nextein export",
        "deploy": "now alias --token=$NOW_TOKEN $(now ./out --static --no-clipboard --token=$NOW_TOKEN --public) your-alias"
    }
}

Notice that we need to feed now alias with the deployed url. Also, the token has to be provided for both deploy and alias commands.