Recoding my blog ⛩

During quarantine I had more free time than usual so I decided it was time to modernize my blog. I coded the first version 5 years ago choosing technologies simply because I knew them. That resulted in a Django app with a Postgres database and an outdated design using Bootstrap. After the years I used to use my blog to test new technologies so I had versions of my blog using JQuery, Vue, Django, Django 2.0 using a DDD approach, ... and it was deployed on Digital Ocean, AWS, Heroku, Heroku using Terraform, ... Anyone who saw the code could say that a blog should never be so over-engineer, and I agree. For this reason I decided to check which technologies were being used nowadays to make simple blogs.

My goal was to make a simple, fast and modern blog which allows me to write posts easily, deploy them on Github Pages and, of course, spend as little time as possible on maintenance. After check several technologies a co-worker told me about Svelte and I loved it. Svelte and its server-rendering backend Sapper were what I was looking for and there were a lot of examples of blogs made with these technologies. After that I just required a new design. I was tired about Bootstrap designs so I was looking for something new, and then I found Tailwind. Tailwind had all that I needed. A framework which, after memorize some easy classes, allows you not to write CSS. Maybe for you this is not a plus feature but for me, a backend coder, it was perfect.

The good parts of this architecture

After this introduction I want to list the advantages that I found making my blog with Svelte, Sapper and Tailwind. Remember that this benefits I found exist in the case of study of a simple blog.

  • Easy installation. Sapper has a great initial template and several pre-configured commands which allows you to focus on the important parts of your project.
  • Great development environment. Live reload! When you modify some file, the navigator reloads the page automatically. Maybe I'm overestimating this feature but I work everyday in an outdated frontend and this feature drove me crazy!
  • Static page. Sapper allows you to export your project as a static site. Then it can be hosted and served as static files, which allows it to be deployed on hosting environments such as Github Pages. To serve the page as static files also improves the speed notoriously, obtaining better results in web positioning. You can use apps as Lighthouse to check this.
  • Elegant syntax. I worked with different frontend technologies such as JQuery, Knockout, Angular or Vue and Svelte syntax looks perfect for me. It's easy to understand, simple and elegant. In the following section you'll be able to check it in a easy example I'll show you.
  • Component structure. One thing normally I don't like in a frontend based project is the way how developers structure the code. Last years I was working in projects where component HTML, Javascript and specific CSS were in different folders and then developers loose to much time searching the Javascript or de CSS associated to a particular template. Svelte joins all in one file (.svelte) and in my opinion is a great solution to improve the components reusability.
  • Speed. Svelte is based on reactivity. To understand easily which reasons allows Svelte to get such good results in terms of speed compared to other frameworks you can watch this great conference of its creator Rich Harris.
  • No CSS. With Tailwind you don't need to write CSS code. With its pre-defined classes you can make pretty much anything.
  • Easy personalization. At Tailwind config file you can configure stuff as main colors, default spacing, text font, ... and using @apply CSS sentence you can create your own classes easily.
  • 0 costs. With this architecture I was able to have my blog with 0 costs (I just have to pay the domain).

Now I'm going to show you how I made the comments engine using Serverless.

Comments engine

A comments engine requires a persistent storage so I needed to add something else to the blog in order to allow users to write comments. Serverless is a framework that makes easier to mount a serverless infrastructure with AWS. In this case I decided to use Dynamo DB to store post user comments and Lambda to get and publish comments. This functions are not all time waiting for requests in a server (for this reason is so cheap). AWS Lambda deploys them very fast just when they are invoked by different events such as queue events, S3 changes, HTTP requests, .... In this case the event was going to be an HTTP request to the AWS API Gateway.

All this could seem very complex but with a framework as Serverless is done with a simple config file. Here you have the config file I wrote to have 2 lambda functions (at 2 different endpoints), one for get post comments and another to publish new ones. At this config file you can configure several things, from language used and access management till requests rate limits and database resources. In this case the configuration is very simple, the 2 lambda functions are 2 views of a simple Flask application. These controllers just get the comments and stores a new one in the database (in this case Dynamo DB, you can check the databse repository here).

Check comments engine README in order to install this simple API and start using it and if you find some error please let me know!

Now we need a Svelte component that gets the comments of a post and publish new ones using the endpoints created with Serverless. In the following code you can revise the component part required to get and show the comments of a post (.svelte file). 


<script>
   export let slug;
   const comments_url = `dummy.com/prod/comments/${slug}`;
   let comments = getComments();

   async function getComments() {
      const response = await fetch(comments_url);
      if (!response.ok) throw new Error(text);
      return await response.json();
    }
</script>

{#await comments}
   <figure class="flex justify-center"><img class="w-48" src="loader.gif" alt="Loader"></figure>
{:then comments}
   {#each comments as comment}
      <div class="shadow bg-white rounded-md mb-1" role="alert">
         <div class="p-4 flex">
            <div class="pl-2">
               <p class="font-bold text-gray-700">{comment.text}</p>
               <p class="text-gray-600">
                  {comment.name} <span class="text-gray-500 text-sm">{comment.date}</span>
                </p>
            </div>
         </div>
      </div>
   {/each}
{:catch error}
   <p>No comments yet</p>
{/await}

I'm using {#await} Svelte declarative to wait the fetch promise of the comments request. Svelte is going to manage the comments as soon as the promise ends and then comments will be rendered using {#each} declarative. All classes used to give styles are Tailwind classes. If you want to see the rest of the code to publish new comments here you have the complete component and the result online is just below!

Feel free to ask anything in the comments section!

Write a comment! 😀

Loader