Building, Deploying, & Hosting Static Sites

Advantages

of static sites

• Cost: host for free or cheap
• Scale: push many expensive operations to the client
• Security: (almost) no security maintenance
• Laziness: (almost) no maintenance period with PAAS or DBAAS providers such as Firebase

Challenges

with static sites

• SEO (if using a Single Page Application)
• Complexity from separating UI from API

Building

static sites

Generators

jekyll, middleman, hugo, hexo, metalsmith, etc...

Roll your own

by combining your JS framework of choice with Webpack

OR

Rolling your own

static site builder

with Webpack

https://github.com/chrisvfritz/prerender-spa-plugin

Deploying

static sites

• GitHub Pages: least goofy default domains
• Surge: get the most for free
• Netlify: most comprehensive paid offering

GitHub Pages

for hosting static sites

username.github.io/repo

git subtree push --prefix dist origin gh-pages

Surge

for hosting static sites

npm install --global surge
echo my-custom-domain.com > src/static/CNAME
surge --project dist --domain my-custom-domain.com

• Custom domains
• Basic SSL
• Custom 404 handling
• Add collaborators
• Automatic gzipping

some-unused-subdomain.surge.sh

Netlify

for hosting static sites

npm install --global netlify-cli
netlify deploy --path dist

• Manage multiple environments
• Connect to GitHub
• Deployment webhooks
• And... everything else you may or may not have thought of

57573d18d6865d78331f0743.random-words-75248.netlify.com

Questions?