In order to keep a consistent schedule for publishing my blog posts, I wanted to automate the process of deploying my Hugo Static Site on Netlify. By using IFTTT, I was able to set up an auto-trigger that deploys my site every morning. This method can be used not only on Netlify, but also on other providers that offer webhooks for manual deploys. Consistency is key for maintaining momentum in my work....
If you’re using Hugo for your website and want to enhance its styling capabilities, integrating Tailwind CSS can be a great choice. In this guide, we’ll walk you through the process of adding Tailwind to Hugo. Here’s how you can get started: Step 1: Set up Tailwind CSS Inside your theme folder, open a terminal window and run the following command to initialize npm: npm init -y Next, install Tailwind CSS as a development dependency by running this command:...
When I recently launched the new home for my ebooks on The Valley of Code, I realized that the large number of images was impacting the loading time and increasing my hosting bill. Each page was quite long, with some even reaching 10MB in size. To mitigate this issue, I decided to implement lazy loading for the images, meaning that the browser would only load the image when the user scrolled to that particular section....
In this blog post, we will discuss how to retrieve the current URL in Hugo, a popular static site generator. By obtaining the current URL, you can dynamically display or manipulate content on your website based on the specific page the user is viewing. In Hugo, you can retrieve the current URL using the .Page.RelPermalink variable. The .Page.RelPermalink provides the relative permalink of the current page, which includes the path and any subdirectories....
In Hugo, there may be instances where you need to iterate over the pages of a specific section. This can be achieved by targeting the markdown files stored within a folder under the content directory, such as content/mysection. The following code snippet demonstrates how you can accomplish this: {{ range (where .Site.Pages "Section" "mysection") }} {{ range .Pages }} {{ .RelPermalink }} - {{ .Title }} {{ end }} {{ end }} By utilizing the range function along with the where function, you can iterate over the pages of the desired section....
In this blog post, I will walk you through the process of moving a website from Hugo to Astro, a simpler solution that eliminates the need to work with Hugo templates when making changes. I find Astro to be a great choice for this migration because it allows me to use JSX, a syntax I am more comfortable with, and also gives me the flexibility to incorporate frameworks like Svelte or React in the future....
A few days ago, I had a brilliant idea of migrating my website, flaviocopes.com, from Hugo to Astro. In just one day, I successfully accomplished the transition with a fresh new theme design. In this blog post, I will share the entire process and decision-making behind this change, as it may prove useful to you. For those unfamiliar with Astro, it is a fantastic site-building tool that I have been using for many of my latest website projects....
In this post, I will describe the technologies and tools I use to run my blog. From the site platform to hosting, and even my workflow for posting articles, I’ll cover it all. The site platform This blog is built using Astro, a static site framework. While I previously used Hugo, I found that I enjoy creating user interfaces with JSX more. Astro, like Hugo, generates fast pages that can be easily deployed on platforms like Netlify or Cloudflare Pages....