Are your static sites too static?
Welcome to any new readers. Please feel free to share this newsletter with anyone else you think may enjoy it. I’m always interested in feedback about content or format. Also if anyone knows of any cheap tools or services for developers you can let me know by replying to this email or sending a message to firstname.lastname@example.org
I’ve heard there is a misconception around static sites that when people hear ‘static’, they think non-interactive. They think piles of documents in a folder with too much text. However, all static really means is that for visitor A and visitor B when they request a URL, the server is going to send both visitors the same content. However, that content could be very interactive. It could even be a game, or a simple app to roll dice.
There is an emerging type of tool which combines a front-end component framework with the power to render everything out as static files. There is still usually a focus on content, but they could just as easily be used to create the next killer app.
It is also worth mentioning here that most if not all of these tools can go beyond static sites and also manage server side aspects, like server-side rendering or maintaining sessions. You lose some of the advantages of static sites that way, but it is an option.
You could say that Next.js set off this current trend in static site generation and certainly many of the following tools are inspired by it. At its simplest, Next allows you to create React components in a
pages folder, using the file system to represent different page views in your site or application. It handles all of the routing and code splitting to create your site from these.
No question where this name came from, as Nuxt was directly inspired by Next. However, where Next uses React, Nuxt uses Vue.js. Otherwise the concept is the same.
The original design goal of VuePress was for creating documentation sites. It is fairly simple but allows you to harness the power of Vue components in the resulting site. VuePress is still reaching maturity, but if you need a documentation site with the ability to add dynamic components, this is good option.
Gatsby (and Gridsome below) take things a step further. Whereas typically static site generators work off local content files, maybe with some data files as well, Gatsby expands your input sources. It combines various inputs, from APIs, databases, files, content management systems and hosts the data via a GraphQL server. It then lets to query this server to build your pages. And it is possible to have this querying done at build time so in the end you have plain HTML files.
Gridsome is essentially Gatsby but for Vue.js instead of React. I’m sure there are other differences, but that is probably the deciding factor if you are choosing between the two.
Doing More In Your Browser
I saw this video from the JAMstack_conf last year which addresses some of the issues I mentioned above. Fun watch if you still aren’t convinced about this whole static site thing.
And one more thing…
The US Government has just released a new font called Public Sans, which is available for free under the SIL Open Font license. Find out more on their Github repo. Free fonts can be hit or miss, but this looks like it is well thought out and the download provides files for desktop and webfont use.