Back to categories

Category: "Web development"

Hugo Comments Janne Kemppainen |

Comments are an important part of communicating with your audience. This is where static pages struggle a bit as they are immutable by design. To add comments to a Hugo (or any other static) blog you need to resort to some third party solution. Personally I’m using ReplyBox but Disqus works with Hugo out of the box so it would be the easy way.

In this post I’ll show you how to add Disqus or ReplyBox to your site but I will also talk about other alternatives.

Related Content in Hugo Janne Kemppainen |

You may have noticed that many blogs like to promote other posts at the end of an article. Hugo can do this too with its related content feature. This means that you don’t have to hand pick those related posts for each new piece of content you write but you can let Hugo do it for you automatically. If you scroll down to the bottom of the page you can see a live example on this very page.

Implemement Hugo List and Taxonomy Pages Janne Kemppainen |

Until now we have concentrated on single pages such as blog posts or special pages. While we do already have a basic and functional list page for our blog it isn’t particularly pretty.

So in this post you will learn how to create a decent looking layout to display multiple blog posts on a single page.

Introduction To Cloudflare Workers Janne Kemppainen |

I've been interested in serverless for a while but haven't had the chance to try anything out. Recently I found out about Cloudflare Workers, a rather new serverless solution by the CDN company that powers 10% of the Internet. In this post I'll tell you how it differs from its main competitors and how to get started.

Hugo Single Page Templates Janne Kemppainen |

Now that our blog has a basic single post template it is time to move on to other content pages. In this post we will concentrate on pages such as About, Privacy Policy and Contact.

Even though the site itself is static it is possible to embed dynamic content from other sources. For example, the contact page will show you how to embed Google Forms as a contact form and a map showing your office location.

Show Twitter Follower Count with Google Spreadsheets as a Backend Janne Kemppainen |

I was quite surprised to get my first Twitter followers after linking my earlier blog post about developing with Windows Subsystem for Linux to Twitter as I’ve never really had a social media presence outside of my own circles. This gave me the idea to track how my Twitter following develops over time when I start from zero.

Given that I’m using a static blogging environment there is no server that could actively serve this data and routing users to my home server is definitely not an option. This is where Google Spreadsheets comes in handy as it turns out that you can fetch data in CSV format without having to use strong authentication! Read more to find out how I built the follower chart below.

Create a Single Post Template in Hugo Janne Kemppainen |

In this post we will create a template for single blog posts on our Hugo blog. The end result will be a clean and simple page with support for a featured image. It will also show the author, an author image, publish date and the estimated reading time.

Create a Layout for Your Hugo Theme Janne Kemppainen |

Last time we finally started creating our own theme and we were able to render something on the home page. We also created a template for the page head so that our pages will always contain the necessary metadata and information for social sharing. Next we’re going to create the basic layout for our page.

Let's Create a New Hugo Theme Janne Kemppainen |

Now that we know how the basics of Hugo it’s time to take a step further and start building our own theme. This post will lay the foundations for our theme so it won’t look like much in the beginning but it will be something that we can build on. We have lots of content to cover so let’s get going!

Getting Started with Hugo Janne Kemppainen |

In the last post of the series we touched the surface and learned what Hugo is. This time we will dive deeper and actually create our first example site with a ready theme.