Published on

Deploying a static site to Github Pages using Travis and Cloudflare

Authors

Update June 2020: I am no longer using this infrastructure for my site. See Deploying a Gatsby site to GitHub Pages using Actions and Cloudflare.


A quick and easy way to use these 3rd party services to deliver your site:

  • Cloudflare speeds up your site and gives you HTTPS for free.
  • Github Pages is basically zero-configuration, free hosting.
  • Travis CI glues the pieces together. And it's free.

The setup for this site

  1. the source for this static site is on the source branch of the repo
  2. when I push to that branch, Travis CI builds the static site, then pushes that built site to the master branch of the repo
  3. Github pages is configured to serve the master branch as static files at http://goodgravy.github.io/
  4. Cloudflare acts as a CDN in front of Github pages, serving as https://jmsbrdy.com/

Travis CI configuration

Full file here, relevant excerpt here:

deploy:
  local_dir: public
  provider: pages
  skip_cleanup: true
  target_branch: master
  fqdn: 'jmsbrdy.com'
  github_token: $GITHUB_TOKEN # Set in travis-ci.org dashboard
  on:
    branch: source
after_deploy:
  - |
    curl -X DELETE "https://api.cloudflare.com/client/v4/zones/${CF_ZONE_ID}/purge_cache" \
     -H "X-Auth-Email: ${CF_EMAIL}" \
     -H "X-Auth-Key: ${CF_API_KEY}" \
     -H "Content-Type: application/json" \
     --data '{"purge_everything":true}'

Cloudflare configuration

Following this guide should get you basically there.

The after_deploy step purges the entire Cloudflare cache for your site, so feel free to be very aggressive with the caching settings.