Simple Dynamic Site

This guide currently assumes you have installed a recent version of node.js. You can run your app for free, but it will only be accessible for 18 hours per day. This is intended so you can try things out. You can upgrade to the full 24 hour version for $7 per month (at time of writing). I'm not getting sponsored by Heroku for this.

Step 1: Choose a domain name

You need to register your chosen domain name. I recommend namecheap for this. They're both one of the cheapest, and have good security set up, which is very important for your domain registrar. Simply go to www.namecheap.com, enter your domain and click search, then follow the instructions to pay.

I recommend you pay the extra for "WhoisGuard" as without it you'll get a lot of spam. If you don't have WhoisGuard, your contact details will be publicly available to anyone who wants to know who owns the domain.

Step 2: Setup Cloudflare

This step can take a few days to fully complete, so you should start this as soon as you have registered your website. Sign up for a cloudflare account. Add your newly registered domain to cloudflare.

Once cloudflare tells you to set your nameservers, you can go to your namecheap dashboard and click "Domain List" then "Manage" on your chosen domain. From here, Choose "Custom DNS" under "NAMESERVERS", then enter the two nameservers cloudflare tells you to. I recommend refreshing the page to make sure the change has been saved.

It typically takes about 30 minutes for cloudflare to recognise your change. In the mean time, you can start building your website.

Step 3: Create your website

Sign up for an account on GitHub and create a new repository. Use the domain name you have chosen as the name of the repository. If you don't already have it, install the Github Desktop app. You can then use the app to "clone" your new repository.

Open the resulting folder, using your text editor of choice (I recommend Atom).

Add a .gitignore that has the following contents: 

node_modules
out

Add a package.json that has the following contents: 

{
  "name": "example.com",
  "private": true,
  "description": "A simple dynamic website",
  "dependencies": {
    "express": "^4.13.3"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo No Tests",
    "deploy": "npm i heroku-release && heroku-release --app example-app-name"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/my_github_username/example.com.git"
  },
  "engines": {
    "node": "5.11.0"
  }
}

Then run npm install to install dependencies.

Add a sever.js file containing: 

'use strict';

var express = require('express');

var app = express();

app.get('/', function (req, res, next) {
  res.sendFile(__dirname + '/index.html');
});

module.exports = app.listen(process.env.PORT || 3000);

Add an index.html file with whatever content you want in it, e.g. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

Check that it works by running node server and navigating to http://localhost:3000. Now commit and push that code.

Step 4: Set up Heroku

Sign up for an account on Heroku. Create a new app. Your app name can be any string of letters, hyphens and numbers. Note that you should update the heroku-release --app example-app-name command in your package.json file with your chosen app name.

Step 5: Publishing to Heroku on Commit

Go to Travis CI and enable it for your repository. Then click settings.

In a new tab, go to your account page on heroku and copy your API Key. Making sure that "Display value in build log" is set to "Off", add that API Key to Environment Variables with a Name of "HEROKU_API_TOKEN".

Back in the repository, add a .travis.yml file containing: 

language: node_js

sudo: false

node_js:
  - "5.11.0"

deploy:
  provider: script
  script: npm run deploy
  on:
    branch: master
    node_js: 5.11.0

Commit and push this new file and your site should get built and uploaded by travis. You should now be able to see your site at example-app-name.herokuapp.com.

Step 6: Set up cloudflare

Now that you have the site hosted on Heroku, all that remains is to fix the URL so it is nice and memorable, and add support for https.

In cloudflare, edit the DNS records. First, remove any existing "A" or "CNAME" records, then add two new "CNAME" records:

Ensure cloudflare is enabled for both records

Go to "Page Rules" within cloudflare and add two new rules

Once those changes have propagated, you should be able to see your website by navigating to https://example.com/. It should also auto update every time you push new changes to GitHub.