DEV Community

Cover image for How I Developed A Tool That Generates Static Versions Of Dynamic Websites
Miguel Piedrafita
Miguel Piedrafita

Posted on • Originally published at miguelpiedrafita.com on

How I Developed A Tool That Generates Static Versions Of Dynamic Websites

I was interviewed for the 8BitMen blog about my experience developing Sitesauce. Here's a transcript of the interview.

Miguel is the Founder of Sitesauce, a tool that generates static versions of dynamic websites. Static sites can be rendered completely off a CDN hence are pretty quick to load as opposed to a dynamic site that needs a backend server to render different pages.

In a conversation that I had with Miguel, he shared insights into how he developed this novel product. So, without further ado. Let’s get on with it.

Tell us a bit about yourself

Hi! I’m Miguel Piedrafita, a 17-year-old maker from Spain who loves to spend his free time building cool things and learning. I’ve been coding for seven years now, in which I’ve contributed to over 500 open-source projects, and started multiple startups, including Blogcast, a platform that uses AI to produce audio versions of articles, and Sitesauce, a service that generates static sites from dynamic websites, and the one this article focuses on.

Tell us about your product. What pain points are you trying to solve?

I started Sitesauce out of frustration with both CMS platforms and static site generators. I wanted something as easy to customize and manage as WordPress or Ghost, but as fast, secure, easy, and cheap to host as static sites. I couldn’t find any product that covered this space, so I decided to build one using a novel approach to the static site generating I had been brainstorming for a different product.

So, how does Sitesauce work?

Basically, Sitesauce crawls your entire site, making your backend render each page and turning the results into static pages, then it automatically uploads them to Zeit or Netlify. Every time your content is changed (like, for example, when publishing an article), Sitesauce regenerates your site, making sure your static version is always updated with the latest content. It’s also incredibly fast and easy to set up, generating your site with the click of the button and in under a minute in most cases.

Would you like to talk about your customer acquisition strategy & the user engagement & retention rate?

Sure! That’s an interesting question, as I’ve never used any kind of paid acquisition technique for my products and prefer to rely on content marketing and social networks mostly. I’ve been growing my audience over the past few years, and continuously sharing my progress and updates on social networks has driven a considerable amount of traffic and leads to the service. The strategy is simple: be helpful on the internet, drop a link to your product in a non-intrusive way, and people who are looking for a solution will sign up.

What is your monthly revenue, if you don’t mind sharing?

Sitesauce is an open startup, which means all our numbers are public. At the time of writing this, MRR is at ~$76/month, but if you want to check real-time data and other interesting data out, have a tour around our Open Startup page.

Let’s talk about the technology stack you’ve leveraged to build your product

When I started working on Sitesauce, I just used my regular stack, that is, Laravel (PHP) for the backend + Vue.js for the frontend + Inertia.js for tying both together + Tailwind CSS for styling. I’ve tried multiple stacks over the years, but I feel this is the one that better adjusts to my way of thinking and makes me the most productive.

Two months into the product, I built a CLI tool to allow users to generate static sites from websites running locally in their computers without needing a publicly-accessible server. To build the Sitesauce CLI, I used Node, as I feel it’s the best language for creating CLI tools out there at the moment, only rivalled maybe by Go, which I didn’t know at the time. The CLI also has a backend component for temporally tunnelling local websites to the Sitesauce server, and that’s built on Node as well, mostly for consistency.

There’s a third component in the stack that I introduced recently: the generator. This component was initially a part of the Laravel application, but I ended up extracting it to a standalone Go CLI tool, which improved performance and speed massively.

To put it in context, it used to take around a minute to generate a static version of my personal website, and it can now process a site as big as the Laravel News website in that time. I did not know Go when I started, so I sort of learned along the way with intuition and much googling around, but it ended up turning out great.

The only external tool Sitesauce currently uses is Fathom Analytics, which does not only power our privacy-first analytics but also our public analytics dashboard, where you can also dive deeper into how people discover Sitesauce.

So, how’s your infrastructure organized? Which platform have you picked to deploy your service?

The frontend is structured as a Vue-powered SPA thanks to Inertia.js, which bridges the gap between the backend and the frontend and allows you to keep using traditional routing. The backend and all the different microservices (the CLI backend and the generator) communicate using an internal HTTP API and are all hosted on a Google Cloud VPS for simplicity.

The marketing site uses Statamic but is turned static and hosted on Zeit using Sitesauce to take advantage of all the benefits static sites provide (speed, infinite scaling, etc.). It also serves as a way to use Sitesauce on production and ensure everything works correctly (dogfooding!).

Zeit and their amazing CDN manage auto-scaling on the marketing page. For the actual app, scaling is handled manually by upscaling the server when needed.

Here’s a diagram showing how everything is organized and connected:

How I Developed A Tool That Generates Static Versions Of Dynamic Websites

If you are interested in the running costs for our setup, there’s a conveniently-named costs section on our Open Startup page just for you 🙂

If you were to rebuild your service from the bare bones, is there anything you would do differently?

If I were to start building Sitesauce again, I’d make some changes to how certain features are offered (like removing the Netlify integration and focusing exclusively on Zeit). Still, I would undoubtedly keep the stack as it is now.

Are there any invaluable learnings during the whole product development process that you would like to share with the readers?

Try to get something you can charge someone for, then iterate on that and focus on everything else. This is something I learned from one of my previous projects, Snaptier, which failed because of an overly ambitious MVP (minimum viable product). I wrote about what happened and the lessons I learned from it here if you want to know more.

Is there any advice that you have for the entrepreneurs who aspire to or are already building their product from the ground up?

Share what you’re doing. Get people involved in your journey. Not only will it serve as an outreach for your product and grow your audience, but you’ll be helping others who are behind you on the same path.

Where can people keep up with what you’re doing?

The best place to find me is on Twitter, where I regularly tweet about what I’m working on, new things I learn as I go, and give tips I wish I had been given. You can also subscribe to my personal newsletter, a hand-made weekly email on a more personal tone, where I explain what I’ve been doing more extensively and share fresh content I find around.

Miguel, thank you for giving us a technical insight into your product & I wish you success as an entrepreneur.

Top comments (0)