Web development on PäksTech

Add an RSS Feed to Your Hugo Blog

Sun, 09 May 2021 20:02:10 +0300

RSS might not be as fashionable as it was many years ago, but it’s still a great way to easily stay up to date with your favorite sites. If you have a Hugo site, you probably already have a working RSS feed. You just might not know about it!

SASS Processing with Hugo Pipes

Mon, 08 Jun 2020 22:14:42 +0300

So far we have been using the CDN version of Bulma. However, this has the unfortunate property that we cannot really customize the colors and other parameters. We can solve this by using Hugo pipes to process the Bulma source code with the built-in SASS processor.

I'm Switching to Twitter for My Blog Comments

Sun, 24 May 2020 18:06:43 +0300

This blog is a static website built with Hugo. As with any static website letting users post comments on your site typically requires using a third party service. This is one area where having WordPress would be nice as it gives you a built-in commenting platform. I’ve been using a third party commenting platform but now I’m going to try something else, use Twitter for comments.

Start a Blog With Hugo

Mon, 27 Apr 2020 20:25:51 +0300

I run my blog with a static site generator called Hugo and as you’re reading this article I’m going to make a wild guess that you’d be interested to start your own blog too. I have created a whole series of blog posts about blogging with Hugo where I go through the required steps to build your own blog from scratch. However, in this tutorial I wanted to condense all the necessary steps to getting your blog up and running as fast as possible with a ready theme.

CORS Simply Explained

Sat, 11 Apr 2020 15:30:40 +0300

If you’re doing web development there is one thing that you have quite likely been bitten by, CORS. It stands for Cross-Origin Resource Sharing and simply put it is a mechanism which is used by browsers to determine whether or not a request to another domain can be made.

Use Google Analytics to Show Popular Content on Your Static Blog

Sat, 07 Mar 2020 13:08:13 +0200

It is quite easy to recommend your most popular posts to your readers if you are running a WordPress site. What if you are using a static site generator such as Hugo instead? On this post you’ll learn how to add a popular posts section by using data from Google Analytics, and how to automate the whole process.

Custom Hugo Shortcodes

Sat, 21 Dec 2019 12:10:31 +0200

Even though you can add normal HTML markup to your Markdown files in Hugo it doesn’t always mean that you should. Complicated or reusable pieces of code should preferably be abstracted away from the content. Custom shortcodes can help with this issue as they let you define snippets that can be added to the page and configured with parameters.

In this series we haven’t created the home page yet so in this post we are finally going to create a simple one with the help of some custom shortcodes.

Hugo Comments

Tue, 05 Nov 2019 19:32:02 +0200

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.

Implemement Hugo List and Taxonomy Pages

Sun, 27 Oct 2019 21:37:46 +0300

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

Wed, 19 Jun 2019 12:16:55 +0300

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

Sat, 04 May 2019 09:00:05 +0300

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

Mon, 15 Apr 2019 21:00:26 +0300

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

Thu, 21 Mar 2019 20:26:52 +0200

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

Sun, 17 Mar 2019 22:51:21 +0200

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

Thu, 14 Mar 2019 18:49:40 +0200

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

Fri, 08 Mar 2019 20:09:24 +0200

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.

Why You Should Blog with Hugo?

Fri, 08 Mar 2019 16:30:10 +0200

I wanted to have a blog where I could share my thoughts and ideas. Naturally I quickly discovered WordPress and started fiddling around with it. In this series I’ll tell you why I chose to go with a static site generator called Hugo instead and how you can do it too. The idea of this series is to help you learn while doing.

If you want to go the static web page route with Hugo you have basically two choices, either use a ready theme or create your own. I decided to go with the homebrewn option because I felt that the ready themes didn’t match with how I envisioned the site should look.

In this series I am going to show you how to start a theme from scratch. But if you want to go with a ready theme I still recommend that you read through these pages as they’ll help you understand how Hugo works and hopefully help you customize your site.

I want you to have the resource that I would’ve needed when starting out.