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
1

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
1
  • 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
1
  • 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?

Made with Slides.com