Blog About
↼ Back to list

Hugo, Tailwind, Cloudflare Pages and GitHub Actions

Mar 14, 2023 - 3 min read

On this post I discuss this blog tech stack and my decisions behind it. It’s my very first content for a long while, hope you find it useful.

Life and career have changed a lot since my last footprint on the web three years ago, I’ve now fully transitioned into the DevOps world and working with CI/CD, IaC, automation and tons of YAML on a daily basis. However tech world is constantly moving and I felt I needed a way to keep myself learning and up to date, that’s why this blog has been created but also one of the reasons for choosing each of the technologies discussed in the following sections.

Hugo #

Besides its popularity and speed, Hugo uses Go and its templates. I have working experience with Helm which uses the same stack, thus choosing Hugo would enable me to interchange skills and by using it I would get better at Helm and vice-versa.

Some would list Go templates as driving the decision not to use Hugo, interestingly enough this brought me to it. I have to agree though that at first glance it’s not as intuitive as other template engines like jinja2. Too have a glimpse of how it looks, the snippet below shows the hugo code for this blog post page.

{{ define "main" }}
{{ $shouldCenter := cond (gt (len .Pages) 0) "text-center" "" }}
<article class="{{ $shouldCenter }} prose  dark:prose-invert mx-auto">
  {{ .Content }}
</article>

{{ if len .Pages }}
<article class="prose dark:prose-invert mx-auto mt-10 mb-6">
  <h2 class="text-center">All articles</h2>

  <ul class="pl-0 list-outside">
    {{ range .Pages.ByLastmod.Reverse }}
    <li class="pl-0 flex flex-col">
      <h2>{{ .Title }}</h2>
      <p class="text-sm">
        :: {{ .Date.Format .Site.Params.DateFormat }}
        :: {{ partial "minread.html" . }}
      </p>
      <p>{{ .Summary }}</p>
      <div class="not-prose">
        <a class="anchor" href="{{ .Permalink }}">
          Read more &#x21C0;
        </a>
      </div>
    </li>
    {{ end }}
  </ul>
</article>
{{ end }}
{{ end }}

Tailwind #

Tailwind is a very popular framework, and its utility based approach claims to hardly require one to write any custom CSS. This looked very compelling as the popularity would make it easy to find resources online and its approach would fit my knowledge background — I’m not too experienced into frontend so writing custom CSS would take more time than I’d like to.

Claims proved to be true and you can check below a snippet showing all custom CSS used on this blog.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* This just gives an alias to common
     Tailwind classes used altogether. */
  .anchor {
    @apply
      font-medium
      text-indigo-700
      dark:text-indigo-400
      hover:underline;
  }
}

/* Custom CSS starts here :D */
.terminal-cursor {
  animation: cursor .8s infinite;
}

@keyframes cursor {
  from {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

Cloudflare Pages #

I needed an easy way of getting most out of static hosting built in. A few options were available like GitHub pages, Netlify and others. Since I host my domain configuration on cloudflare their solution sounded interesting, things could be kept in one place. Having a cli to automate the workflow on my own also looked good since this way I could add whatever custom steps I’d like to, for example:

Wrangler (the cli) also has an official GitHub action with good docs and which I use for deploying this blog.

GitHub Actions #

This is the GitHub CI/CD builtin tool. Besides being a native solution it’s a very easy tool with a huge community around it. You can find an action for pretty much everything, and also build your own where the existing ones don’t fit. It has a very good documentation and a very clear structure. Didn’t have to think much and went straight to using it.

Conclusion #

I’ve finally assembled the tools and managed to get the time to write this very first post in a long time. The chosen tools made the whole process smooth especially due to the content and community around them. With time, I can fill this place of the web with more and more content 😄. Hope you enjoyed this first one!