This website

I have always wanted to build a website to keep track of the projects I’ve made. Nowadays building and deploying a website is easier and more affordable than ever, so I decided to give it a try and build this very simple blog. Let’s find out how I made it, using free tools and a 2011 Macbook Air with linux installed and a loose hinge.

Hosting and deploying

HUGO, Github and Netlify

Hugo is “the world’s fastest framework for building websites”, as is’s written on their homepage. It is written in Go and it’s an open-source static site generator. There are lots of themes available, but I wanted to create something personal, starting almost from the ground up. The source code of the website (hugo theme, .md files etc…) is hosted on Github, on a private repository. To make it accessible from the internet I need to deploy it. I’m using Netlify, because it is easy to setup and has a convenient Continuous Deployment function. Next, I set up the DNS record to point andfar.me to the netlify content delivery network. Netlify will also provide a ssl certificate through Let's Encrypt for free.

Making a fast, light website

Cloudinary

Cloudinary is a very cool website which offers image hosting and delivery services. I chose it because they have a free version which is more than enough for a small website, and they also offer on the fly image conversion and optimization. Basically you can request a specific size or format of your image based on the URL. This way, I upload the highest quality image on my cloudinary account, and it automatically generates the small thumbnails when you need them. It is a very powerfull tool, which has many more features that I could possibly ever need. I use it to host images, to optimize quality and also to do automatic format selection based on the browser. When you load a webpage, you should only load what’s in the viewport. As soon as you start scrolling, images should load just before they enter the viewfinder. By doing so you can minimize the amount of resources and bandwidth used by the user. Modern browser integrate this feature by adding lazyload class to your image. In this website I use the lazysizes js plugin. You simply add class = lazyload to your image and you are good to go. If you visit this website from a phone which has a resolution of 1280x720px, why should the images be larger than that? Lazysizes has a useful feature to detect the image real size and load the correct one based on that. And with Cloudinary, you only need the highest quality image url from which you can originate the smaller versions. When you browse this website, images load as you scroll and according to your device resolution.

Quicklink.js is another js plugin to make navigation faster. It automatically prefetch the links that you see in the viewport, during idle time. It is pretty easy to install and is also very small.

Hugo Shortcodes

Shortcodes are great. All the images are managed with a shortcode that takes the cloudinary original URL and adds all the necessary classes and data-src attributes. I can choose if I want an image to be included in the gallery slideshow, or make it unclickable. I’ve integrated photoswipe beautiful gallery plugin in my theme. I’ve adjusted it to use both cloudinary images and lazysizes responsive images. Photoswipe also support touchscreen navigation, pinch to zoom and vertical swipe to close gallery. It is essential if you plan to build a website with the mobile experience in mind.

Conclusion

I’m a less than a beginner in the web-development field, but I was able to deploy a website in a few hours, thanks to open source software and services like netlify. I encourage everyone to do the same. Having a personal space on the internet is very useful, and in the making process you can learn a lot of things. And did I mention that it’s free?