Quickstart Example

New in version 0.1.0.

The following example demonstrates using sdep to create a static website. In addition to sdep, and Amazon S3, we utilize travis-ci, Cloudflare, and an external DNS provider of your choice (I’m a fan of hover).

Creating Accounts

Before we begin, sign up for the following accounts if you do not have them already: Github, travis-ci, Amazon Web Services, Cloudflare, and a DNS provider of your choice.

Initial Upload and Configuration

To start, we assume that you’ve purchased a domain name from some DNS provider.

AWS

  • From AWS’ IAM service page, create a new AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY for your user, through using your user’s Security Credentials tab. This user must have access to S3.

    • Store these credentials, as we will need them later.

Sdep

  • Assuming you have python3 and pip installed, download sdep with pip install sdep.

  • Run the following command:

    export AWS_ACCESS_KEY_ID=YOUR_AWS_ACCESS_KEY_ID;
export AWS_SECRET_ACCESS_KEY=YOUR_AWS_ACCESS_KEY;
export SITE_DIR=PATH_TO_SITE_YOU_WISH_TO_DEPLOY;
export DOMAIN=YOUR_DOMAIN; sdep create

AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY are the credentials from the AWS step. SITE_DIR is the directory containing your static website (ex. the ./public directory in a static website built by hugo), and DOMAIN is the domain name you purchased.

Your website is now deployed on S3, and can be accessed by accessing its endpoint (ex. http://mattjmcnaughton.com.s3-website-us-east-1.amazonaws.com). Throughout the rest of the tutorial, we’ll refer to this as S3_ENDPOINT, and it can be found through going to Properties tab of the S3 bucket representing your website, and then going to the Static Website Hosting section.

Cloudflare

  • From the account overview page, click Add Site.
    • Enter the domain name you have purchased (ex. “mattjmcnaughton.com”) and click Continue Setup.

  • Delete the A Record with YOUR_DOMAIN_NAME. Add a new CNAME with Name equal to YOUR_DOMAIN_NAME (i.e. mattjmcnaughton.com) and DOMAIN_NAME equal to S3_ENDPOINT.

    • After creating, click the Cloud with the Arrow throughout so that it becomes Orange.

  • Click continue, and then select the Free Website plan.

  • Record the Nameservers shown by Cloudflare. We will need them later to update our DNS provider.

If you want SSL:

  • Go to the Crypto Tab and ensure SSL is set to Flexible.
  • Go to the Page Rules Tab and change turn on the Always Use HTTPS page rule.

DNS Provider

  • Delete any previous A or CNAME records on your DNS provider.
  • Configure the Nameservers on your DNS provider to be the Cloudflare’s Nameservers.

Continuous Deployment

If you are happy with manually deploying your static website, then congrats, you’re done! Simply replace sdep create with sdep update whenever you make a change.

However, using a continuous integration build tool like travis-ci, it is possible to deploy your static site to S3 anytime a pull request is merged.

Assuming your Github account is linked with travis-ci, and your static website is hosted on Github, take the following steps:

  • Turn on travis-ci for this repo.
  • Go to settings and turn off Build Pull Requests, but ensure that Build Pushes is turned on.

Then in the root directory of the repository containing your application, create a .travis.yml file with the following contents:

language: go
install: go get -v github.com/spf13/hugo
sudo: required
script:
- hugo -v
- sudo pip install sdep>=0.1.0
- sdep update
branches:
  only:
  - master
env:
  global:
  - SITE_DIR=YOUR_SITE_DIR
  - DOMAIN=YOUR_DOMAIN

Then, from the command line run travis encrypt AWS_ACCESS_KEY_ID=YOUR_AWS_ACCESS_KEY --add env.global and travis encrypt AWS_SECRET_ACCESS_KEY --add env.global. You will need to run gem install travis if you do not have the travis-ci gem installed.

Then, just push to Github. Anytime you merge a pull request, sdep will deploy your website once again.

You’re Done!

Success, you did it! Looking for next steps, we’d love any contributions. If you encountered any issues going through this tutorial, please let us know here. We’d love to try and help you out!