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 hello@develop.cheap
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.
Last week I presented a number of tools which can be used to create static sites out of template and content files. And for a lot of sites like personal blogs where your interactivity needs are low those tools are perfect. The reason being that if you want to add any client side interactivity, you need to bring your own JavaScript and augment your content manually. By that I mean, it isn’t a feature of the static site generator.
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.
In this issue I highlight some frameworks and tools doing just this focused around two web frameworks: React and Vue.js. As with last issue, these are all tools, although in this case they are all JavaScript based. Typically there is an NPM package or set of packages you need to install into your project and some form of CLI tool that you use directly or via your build scripts.
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.
Next.js
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.
Nuxt.js
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.
VuePress
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
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
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.