Save 10s of dollars a month!
Next.js is a static & dynamic site rendering tool for websites based on React. We can use Next.js to flatten and build static sites for us using React. We can then upload these packs to Github Pages for a freely hosted website. This talk will focus less on the React part of things, and more on the "devops" tools we use to build and host the site - Next, Circle.CI, and Github Pages
Related Repository: https://github.com/evantahler/next-static-hosting
This is how we build www.actionherojs.com
Using Next.JS to
build Static Dynamic
and never pay for hosting again!
● Use React to create our website
○ A statically compiled front-end that still allows for dynamic content
● Pay 0$ for hosting
● HTTPS + Custom Domain*
● Continuous deployment with a test suite
○ Git push -> (wait) -> live site
● Use a CDN to make things snappy around the world
This is overkill for many sites, but free production-grade ops? Why not!
This will be a “devops”-focused talk 1. Next.JS
4. Github Pages
All Free for Open Source Projects + Students!
● React + a sane router, webpack, server-side-rendering
and all the annoying stuff handled for you
● “Page” top-level components
● `next dev` - hot reload when developing
● `next build` - pre-compile pages for faster serving
● `next export` - compile HTML, JS and CSS
Build Process triggered after every `git push`
3. Github Pages
Free Hosting for static assets!
1. Almost no conﬁguration
2. Domain Name Mapping via C-Names
3. Hosting for a chosen branch
a. Usually called “gh-pages”
3. Github Pages - Gotchas
We want to make a separate branch for hosting automagically
- called gh-pages
1. “Read” Key vs “Write” Key - Github Access from Circle.CI
2. CNAME File - needs to be in your gh-pages branch
3. Tell Circle.CI not to test the gh-pages branch
4. Tell Github you don’t want to build a Jekyl site
● NPM install
● Next Build
● Next Export
● Copy to a new folder that maps to the gh-pages branch
● Copy next export ﬁles + CNAME ﬁle
● (force) push to gh-pages branch
ssh-keygen -m PEM -t rsa -C "[email protected]"
@evantahler | www.evantahler.com