Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using Next.JS to build Static Dynamic Websites... and never pay for font-end hosting again!

Evan Tahler
September 12, 2019

Using Next.JS to build Static Dynamic Websites... and never pay for font-end hosting again!

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

Evan Tahler

September 12, 2019

More Decks by Evan Tahler

Other Decks in Technology


  1. Using Next.JS to
    build Static Dynamic
    and never pay for hosting again!

    View Slide

  2. View Slide

  3. View Slide

  4. Goals
    ● 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!

    View Slide

  5. next-static-hosting.evantahler.com

    View Slide

  6. Tools
    This will be a “devops”-focused talk 1. Next.JS
    2. Github
    3. Circle.CI
    4. Github Pages
    All Free for Open Source Projects + Students!

    View Slide

  7. 1. Next.JS
    ● 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

    View Slide

  8. View Slide

  9. View Slide

  10. 2. Circle.CI
    Build Process triggered after every `git push`
    1. “Build”
    2. “Test”
    3. “Deploy”

    View Slide

  11. Our Workflow

    View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. 3. Github Pages
    Free Hosting for static assets!
    1. Almost no configuration
    2. Domain Name Mapping via C-Names
    3. Hosting for a chosen branch
    a. Usually called “gh-pages”

    View Slide

  16. 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

    View Slide

  17. Deploy Steps
    ● NPM install
    ● Next Build
    ● Next Export
    ● Copy to a new folder that maps to the gh-pages branch
    ● Copy next export files + CNAME file
    ● (force) push to gh-pages branch

    View Slide

  18. View Slide

  19. View Slide

  20. ssh-keygen -m PEM -t rsa -C "[email protected]"

    View Slide

  21. View Slide

  22. DNS Configuration

    View Slide

  23. next-static-hosting.evantahler.com

    View Slide

  24. Thanks!
    @evantahler | www.evantahler.com

    View Slide