👉 This post was originally published on my website! 👈
This’s the first article about how I built francoscarpa.com from scratch. In this article, I describe the tools I use to develop and manage it.
Eleventy, a Static Site Generator
My website is static. This means it’s made of static HTML files directly sent by the server to your device and rendered by your browser, without any previous server-side rendering or access to a database. In particular, using a database puts you in front of additional security issues, not to mention that accessing a database is a slow operation. Server-side rendering is another cause that slows down the loading of a website since a webpage needs to be built on demand before a user can view it.
If a website is simple, you could write it as single independent HTML files (or maybe even just one). But this approach is unproductive since it forces you to edit each file separately. Static site generators are the game-changer. SSGs take content files, apply templates to them, and generate a website made of purely static HTML files. In my case, I used Eleventy, and I still use this SSG to manage my website. I find it to be simple to use, and really fast. Of course, this article is not meant to be an Eleventy tutorial. If you’re interested in it, check its website.
Utopia and the Fluid Responsive Design
Another vehicle I use to develop francoscarpa.com is Utopia. On its website, it’s described as “[...] not a product, a plugin, or a framework. It’s a memorable/pretentious word we use to refer to a way of thinking about fluid responsive design”. In a nutshell, it’s a tool that lets you use fluid units to lay your website out, taking advantage of the infinite range of devices and viewports available today. More about Utopia in the section about the appearance of my website.
Netlify and the JAMstack approach
I host francoscarpa.com on Netlify, “a cloud computing company that offers hosting and serverless backend services for web applications and static websites,” as Wikipedia states. Again, this article is not meant to give you an overview of Netlify functionalities. You can read about all of them on Netlify’s website. You just need to know that Netlify is an excellent choice for those who want to publish a static site, also for free.
My website uses a JAMstack strategy. Have you ever heard of it? It’s a new approach to build websites, a path that involves using, guess what, only static HTML files, without server-side rendering, nor accesses to databases. Netlify is strictly tied to the JAMstack; not by chance, you can find an excellent overview of this new approach on Netlify’s website again.
This article ends here. I can’t wait to publish the second one, which will be about the appearance of francoscarpa.com, so: stay tuned!
Top comments (0)