Week 1 : Web Design

Summary

This week I developed my web page with Hugo and Bootstrap.

Assignments

Step 1 : Choosing a Website Generator

The first step was to choose a website generator. Nicolas De Coster, our FabLab instructor for the week, invited us to explore the Jamstack website, which lists various static website generators. I decided to go with Hugo, a static site generator which uses the Go language (kind of C language) for its programming, and supports the Markdown language to write pages. Hugo will translate everything I provide into html pages that will become my Fab Ac site! You can also write html directly in the Markdown pages, which is really handy! One of Hugo’s advantages, mentioned both by our instructor and on the Jamstack website, is his speed of execution.

Step 2 : Hugo’s Quick Start

Now it’s time to install Hugo. To do this, I launch into the Quick start on the Hugo website, where everything is explained. Two prerequisites are required:

Installing Hugo

I follow a GitHub page where all the Hugo versions are listed, and, of course, I take the most recent one for my Windows operating system.

I extract everything into a Hugo folder at the root of my PC:

C:/hugo/bin/

It’s a good idea to add Hugo to the PATH so that you can run hugo.exe from anywhere without having to locate it each time. How to do this depends on the operating system. In my case, for Windows 10, I need to:

That’s it! Hugo is running on my PC, and I can now build my website… Well, I’ve still got a bit of work to do.

Installing Git

I follow the installing Git page and download an executable which is installing Git.

After installing Git, I identified myself with the following commands:

git config --global user.name "Teo Serra"
git config --global user.email teo.serra@ulb.be

I’m going to use a few Git commands, so it’s best to find out about them beforehand. The commands I used are listed here at the end of this page.

Back to Quick start

After taking care of the prerequisites, I continue with the quick start where I learn how to generate Hugo quick start structure with the command :

hugo new site quickstart

I’m also learning how to install modules, themes and so on. But also how to add content. I don’t really use these elements, but it’s helped me understand how Hugo works. The only thing I use regularly is the command to build the website locally:

hugo server

This command builds on the site, e.g. Hugo generates the html pages we’ve created. Hugo also uses the config file to configure the website. All kinds of parameters are stored in this file, such as the language used, the URL of the website, its title, and so on. The website is locally hosted so you need the given local address to access it.

Step 3 : First try with GitLab (failure)

The task now becomes more difficult. I want to try to push my quick start to GitLab. In retrospect, it was a bit stupid, but I’m learning! My knowledge of Git is close to zero, so I wasn’t aware of this “Git never forgets” thing.

Anyway, I go ahead and write the following lines for the first time in my PowerShell :

Git init
Git clone *url of my GitLab repository*

Copying-Pasting the Quick Start folder in the cloned folder where the initial files generated by Fab Ac were in. This, of course, overwriting important files such as “.gitlab-ci.yml” (more on this later). This first attempt was a failure. I hadn’t configured the config file and the gitlab-ci.yml file, so the site build didn’t synchronize with the host. What’s more, I uploaded a lot of data to the GitLab for nothing.

Step 4 : Second try with GitLab (success)

This time, instead of using Hugo’s Quick Start, I cloned the FabLab ULB site linked to FabAc. This is hosted in the same way as my website and also uses Hugo. This gives me the same layout as my FabLab site.

In passing, I reconfigure the config file. The main parameters are the baseURL, the language, the title and the copyright (because I’m using the work of Nicolas for the layout).

baseURL = 'https://fabacademy.org/2024/labs/ulb/students/teo-serra/'
languageCode = 'en-en'
title = 'Teo Serra - FabAcademy 2024'
copyright = 'Nicolas H.-P. De Coster (Vigon)'

The gitlab-ci.yml file was set up correctly for me to use Hugo.

With this, I managed to build a functional site with GitLab!

Step 5 : Feeding the web site

Now it’s time to start building the back end of the website. I customize the home page to introduce the site to me, Fab Ac and my project.

At first, I write everything in Markdown, but sometimes I have to switch to HTML for more specific things. For example, in this home page, I wanted to divide the page into 3 columns. To do this, I have to use HTML, but above all the CSS Framework bootstrap. An html library that pre-codes many features, such as the ability to divide the page into columns (quite common).

Then I made the About Me page, and Project. During these projects, I used various Markdown codes, all of which are listed at the end of this page.

My website is ready to be published! At least the first version.

Step 6 : Using Git

Now it’s time to push the website to my GitLab. To do this, I start by initializing my Git in a directory on my PC, as well as cloning my GitLab on my PC. The first time I did this I add to identify myself.

git init
git clone *url of my GitLab repository*

Copy-past my content in the cloned folder. I first have to add the content using the “add .” command, the dot means I add all the content. I have to commit the modification, explaining what I did. For example “First try with Hugo”. Finally, I push the modification tomy GitLab. Normally you have to use an SSH key but a standard identification was possible with GitLab, only using my GitLab account and password.

git add .
git commit -m "Explaining text"
git push

There’s one last step that Nicolas reminded me of, which I forgot to do despite the indications on Hugo’s website. Since the pipeline will build the site directly on the Fab Academy site, there’s no need to push the “public” file. To ignore this folder, I use the following commands to create a special ignore files :

git init
echo "/public" >> .gitignore

I also need to remove the public folder on my GitLab, which takes up space for nothing. I use the following git commands:

git init 
git rm -r "./public"

With that, all modifications are done and applied to my website. Ready to go with next week !

Appendix : Windows subsystem for Linux (WSL)

Install WSL

We were advised to install a linux virtual machine to be able to use the capabilities of linux on Windows. To do this, I go to the microsoft page How to install Linux on Windows with WSL. And I install the virtual machine with the following command in Powershell.

wsl --install

This command installs the Linux Ubuntu version. It is possible to change distribution but I keep this one. I had a problem during installation because my BIOS didn’t allow virtual machines. A quick look in the BIOS solved the problem.

Set up WSL

Now it’s time for the WSL setup. This is explained on the microsoft page Set up a WSL development environment page.

When I launch Ubunutu, the first thing I have to do is define a linux username and password.

Next, we recommend updating and upgrading all packages with the following command.

sudo apt update && sudo apt upgrade

The next step is to make Ubuntu easy to use. We recommend installing Windows Terminal, an application from the Windows Store. This software lets you manage several terminal instances: powershell, ubuntu, etc. from the same interface - very practical!

windowsterminal

A final step is also useful. I use Visual Studio Code as my core tool. It’s possible to adapt VSC with WSL to be able to use linux directly in VSC. It installs automatically the next time you connect to VSC, at least if you accept the proposed installation.

Used Commands

Git commands

git config --global user.name "Teo Serra"
git config --global user.email teo.serra@ulb.be
git init
git clone *url*
git rm "file"
git add "file"
git commit -m "Informing message"
git status
git push
git pull

Markdown code

#Title
##Subtitle
###Subsubtitle
####Sub...
*italic*
**bold**
[clickable](URL)
![ImageName](IMAGE)
*** horizontal bar
```Show Code```

HTML code

<h1>Title</h2>
<h2>Subtitle</h2>
<h3>Subsubtitle</h3>
...
<B>Bold</B>
<i>itali</i>
<a href="URL"><clickable element></a>
<div class="row"> </div>