Static Sites and Going Serverless

As a teacher of intro-level web design and front-end development courses, I have always enjoyed the simplicity of static web sites and how the primary three web technologies of HTML, CSS, and JS have persisted throughout the years. As a freelancer, most of my clients require some sort of backend functionality, such as a CMS, a contact form, or more complex systems like custom generated reports or custom web apps. As a front-end designer with little backend experience, WordPress (and it’s many plugins) has been my goto solution, but lately I have been considering other options—namely embracing third-party API’s and services that work well with static sites.

There are several different-but-related terms and over-lapping technologies that share many similarities in this area, here’s a list of a few:

• Going “server-less” (e.g. https://thepowerofserverless.info/)
• Embracing the JAMstack
• Using Third-party API’s (e.g. forms, authentication, payment processing, notifications, search, etc.)
• Using a Static Site Generator (SSG) (e.g. Jekyll)
• Static site hosting (e.g. Netlify, Github Pages)
• Going “headless” (using a Headless CMS and disconnecting the front-end from the backend)
• Digesting JSON
• Using Cloud Services (e.g. Firebase, AWS, cloud databases, cloud functions, etc.) to create serverless web applications (with CRUD functionality)
  
• Managing state (e.g. using React, Vue, Angular, etc.)
• Going offline (e.g. creating a PWA)

Learning Resources

• Watch this video screencast by Chris Coyier on “The All Powerful Front-end Developer” and “Going Serverless” 
  • Video: https://css-tricks.com/video-screencasts/160-the-all-powerful-front-end-developer/
  • Associated resource site: The Power of Serverless for Front-End Developers (thepowerofserverless.info)

Static Site Generators (SSG’s)

Curated lists of SSG’s (sites that track SSG’s):

• StaticGen (managed by Netlify)
• Awesome Static Generators
• Stackbit (super cool site that lets you pick your own stack and it automatically will set it up for you in just a few clicks).

Below is a short personal list of notable SSG’s that I’d like to learn more about and do more hands-on tests with:

• Jekyll
• 11ty (aka Eleventy)
• Gatsby (React-based)

Personal Tests

• NMA Jekyll SSG Test Site with Netlify CMS
  • Repo: https://github.com/kccnma/cms
  • Github Pages Hosted Site: https://kccnma.github.io/cms/
  • Netlify Hosted Site: https://nma.netlify.com/
• NMA Gatsby SSG Test Site with Netlify CMS
  • Repo: https://github.com/kccnma/cms-gatsby
  • Netlify Hosted Site: https://kcccm.netlify.com/
• Stackbit Test Site with Jekyll and Netlify CMS
  • Repo: https://github.com/kccnma/stackbit-test1
  • Netlify Hosted Site: https://kccnma-stackbit-test1.netlify.com/
• Eleventy Test Site
  • Repo: https://github.com/kccnma/eleventy-test1
  • Netlify Hosted Site: https://kccnma-eleventy-test1.netlify.com/
• CreativeMedia.space Test Site with Jekyll
  • Repo: https://github.com/kccnma/creativemediaspace-jekyll
  • Github Pages Hosted Site: https://kccnma.github.io/creativemediaspace-jekyll/index.html

Found Examples, Demos, &  More

• Mavo
  • Mavo todo-list (using Firebase)
  • Mavo High Score (using Firebase)
• Airtable
• Webtask
• How to Build a Serverless Blog on Codepen (using Firebase)
• GatsbyJS (React-based static site generator) + headless WordPress:
  • Getting Started with WordPress and Gatsby

Future next steps:

• Look into Create React app (need to add link)
• Check out Gatsby and do a hello-world with a headless WP setup