This template repository contains a tailored selection of tools and configurations to streamline the process of building and deploying a static website.
Furthermore, an effort was made to facilitate the generation of time tracking reports using the lovely git-spend tool, by enforcing a consistent commit message format using commitlint and a custom rule.
All that's necessary to get started is to configure a data source and implement the desired design.
The repository is configured to automatically run a PageSpeed Insights audit using the psi-svg package.
After a successful deployment of this website to gh-pages via the configured workflow , the analyze job of action generates the psi.svg. It displays the current PageSpeed Insights scores. The SVG is uploaded to the output directory configured by the PSI_DIR environment variable.
This is the psi.svg of the latest deployment of this starter:
My main criteria for selecting a static site generator (from here on referred to as IT) are:
- No-Server Hosting: Hosting a static website solely on a CDN is currently the most cost-effective way to host a website. Especially considering the many free options available, such as GitHub Pages, Vercel and Netlify.
- IT MUST at least be compatible with Netlify to allow for commercial use of the resulting website.
- Independent Image Optimization: Images are the most common bottleneck for website performance. A static site generator should have a built-in way to optimize images.
- IT MUST have a way to optimize images without the need for a third-party service.
- Web Performance: Choosing SSG itself already provides a performance boost over the majority of rendering methods at the cost of a more complex build process. However, how the generated HTML, CSS and JavaScript is optimized and delivered can also impact how a site performs, therefore:
- IT MAY optimize the build process to further improve web performance.
- Framework Support: I have the moste experience with React and TypeScript, therefore these should be supported. Additionally, I would like to keep the option open to use other frameworks in the future.
- IT MUST at least support React and TypeScript
- IT MAY be framework-agnostic to allow for the use of other frameworks in the future.
- Headless CMS Integration: In my projects, a headless CMS generally is used to manage the content of the website. Therefore, the SSG should have a way to integrate with a headless CMS.
- IT MUST support data fetching from a headless CMS at build time.
- IT MAY support live previews of content changes.
- Custom Build Steps: Sometimes, a website requires a custom build steps, such as generating a sitemap or open graph images.
- IT MUST allow for the configuration and implementation of custom build steps.
- Open Source: The SSG should be open source to allow for the community to contribute and to ensure that it will be supported in the future.
- IT MUST be open source.
- Stability & Adoption: The SSG should be actively maintained and have a large community to ensure that it will be supported in the future.
- IT MUST have a commit in the last month.
The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be interpreted as described in RFC 2119.
- Astro
- is a still somewhat young SSG that has a lot of potential, but does not yet have the same level of adoption as the other SSGs. I plan on developing a project with it in the future to evaluate its capabilities.
- Next.js
- It has a very wide adoption, but it is not as well-suited for my requirements, mainly due to its mandatory external service dependency for image optimization.
- Gatsby.js
- Is the most popular SSG and has a large ecosystem of plugins and starters, which makes it easy to integrate with a headless CMS. It also supports image optimization out of the box.
After a rigorous evaluation process, Gatsby.js has crystallized itself as my current go-to static site generator.
The reasons for this decision are:
- It supports React and TypeScript out of the box.
- It supports image optimization out of the box.
- It has a large ecosystem of plugins and starters, which makes it easy to integrate with a headless CMS.
- It is actively maintained and has a large community.
- It is open source.
- It is supported by Netlify & GitHub Pages.
- It allows for customizing the build process with a variety of entry points.
- Google's Core Web Vitals (CWV) Technology Report
- This report demonstrates the number of websites using a specific technology with a good CWV score in the past year.
- Bejamas Comparison Tool
- Allows for a comparison of different SSGs based on a variety of criteria.
- npm trends: Astro vs Gatsby
- Astro seems to be gaining traction and Gatsby seems to slowly be losing some of its popularity.