UI Architect, Full Stack Web Developer – San Francisco Bay Area (Walnut Creek), CA
UI Architect, Full Stack Web Developer – San Francisco Bay Area (Walnut Creek), CA

NextJS & Strapi for Static Site Generation

I’ve been motivated to move some of my side projects and blogs off of WordPress. It’s a great platform but I don’t like to see hundreds of attempts to hack my sites in my logs. So far, none have succeeded, but I resent having to block IPs from bots to the back door. With a static site generator, I could generate a site on my laptop and push the static files to an AWS S3 bucket and host my site without a back door at all.

I ended up going with Strapi for the headless CMS. Strapi enables me to create the data that appears in my pages and posts. I used NextJS to build the front end. NextJS handles the routes, pages, and all the little UI components on the site, reading the data from Strapi to populate those components. There was a bit of a learning curve, but it was a fun little project that took about 2 weekends to complete for one of my sites, mcbass.band.

Now, when I want to create or update a page, or create a post, I enter the content into Strapi. Then in a terminal I run npm run build with NextJS. That command generates a /out folder. Once I push the changes to GitHub, a GitHub action syncs the repo to an S3 bucket and the site is instantly deployed.

However, the changes do not appear instantly. I host my site through an AWS CloudFront CDN. This caches my site making it load faster for visitors. It also helps me save money on S3 data access. Although the caching can be invalidated to make deployed changes appear instantly, I’m happy to live with a 12-24 hour delay before the cached files are refreshed.

You can see my Strapi / NextJS / S3 / CloudFront site here: https://mcbass.band

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.