HCI Lab 1: Creating a Blog

In this article, I will talk about the laboratory which deals with creating a blog thanks to Hugo, a really powerful tool. Unfortunately, I already did my blog in September using Wix, so I will just speak about what I learned in this TP, and the difficulties I encountered.

Creating a blog

I have already had the opportunity to create blogs for personal and school projects, and I have also done some projects to learn how to use HTML and CSS. So, I was not too lost when I discovered Hugo, a tool that allows to create websites quickly through the command terminal.

I followed the course to the letter, which allowed me to make an easy blog without much difficulty. Thanks to the Homebrew tool on the Mac, I easily installed Hugo on my command terminal.

After that, it was not really difficult to create the website thanks to this simple command:

Now, by using the command hugo server, we were supposed to see a blank website locally. However, it didn't work for me, and the page was not found. I solved the problem after. First, I decided to install a theme that will make the website more attractive. I chose the "paper" theme which looked simple but nice to look at. I used this command to add the theme to my website folder:

After that, I changed the theme in the configuration file:

After a new hugo server command, and by using the right link (https:/localhost:1313/Blog), I was able to see the website (with only a title and some design) locally. I think that I had some troubles with the link I used, but it worked well at the end.

It was time to create my first post. As long as I already had a blog, I just created an empty page in order to try. It is really simple: we just had to use this command:

I put random sentences inside the text document and tried locally, but nothing appent. In fact, the problem was from the theme which was different from the one used by the professor. I decided to take the aether one, and by changing it, everything worked well.

---

Deploying it on the web

Now that we are able to create a simple blog, that is nice to look at with fully customizable content, it should be published on the internet. For this, we use Github.

I used my own Github account for this purpose. We had first to install git in our project folder. Then, I used the command git status to verify if everything was deployable on the internet, and the command git add . to add the files that were not put inside the right branch. Then, I used these two commands:

I created a new repository in my Github page, and tried to put the branch I just created with the last commands inside it. However, I had some errors. In fact, I had to do two more steps that I didn't know about.

The first one was the creation of an authentication token in Github, in order to securize the deployment.

The other adjustment to do was to create a .github folder, with a workflows folder inside. I created a document gh-pages.yml, and put a code that we can found on the online documentation.

This was the solution to this error because after writing the deployment commands, I was able to validate the sent workflows in my Github repository.

If we change the name of the baseURL, we can finally deploy the blog on the web:

In the pages settings in Github, I just had to make the right deployment:

And it worked ! I have a personalized URL, and I can easily create new posts. I note that inside the post's document, we must delete the draft=true line if we want the post to be seen.

I could do more than that (like adding images, creating different posts), but I had my own blog to fill. I think I would have used Hugo to create my blog if I had known about this in the beginning of the master.