Development of a Portfolio and Presentation Website Based on the Hugo Framework

• 1: Implementation of the Website

How Hugo Works

Source : Hugo

Hugo is a modern static site generator framework, widely appreciated for its speed and simplicity. Here are some key points about Hugo:

1. Speed: Hugo is known for its ability to generate websites at an impressive speed, making it ideal for projects requiring frequent updates.

2. Simplicity: With Hugo, content creation is simplified through the use of Markdown files, allowing for easy and intuitive writing.

3. Flexibility: Hugo offers great flexibility with its theme and template system, allowing for extensive customization of the site’s design and functionality.

4. Active Community: Hugo benefits from an active community and comprehensive documentation, facilitating learning and troubleshooting.

5. Multilingual: Hugo natively supports the creation of multilingual sites, which is a major asset for international projects.

Hugo works by converting content written in Markdown and templates into static HTML.

• Content Creation: Users create content using Markdown files, allowing for simple and efficient writing.
• Templates and Themes: Hugo uses templates and themes to define the appearance and structure of the site. These templates are written in HTML and CSS, with additional features provided by Hugo.
• Site Generation: When you run Hugo, it compiles the content and templates to generate a static website, ready to be deployed on a web server.

1 - Implementation of the Website

Development

One of the advantages of Hugo is the use of templates and themes that allow for site customization. To quickly develop the site, I used an existing theme, “Docsy.”

This theme is used for:

• Content structure: Docsy provides a clear structure for organizing documents and sections of the site, making navigation easier for users.
• Responsive design: The theme is designed to be responsive, ensuring a good user experience across different devices.
• Built-in features: Docsy includes useful features like search, side navigation, and multilingual support.

Project Folder Structure:

/hugo-cv
├──  /assets
|       ├──  /icons
|       ├──  /scss
├──  /content
|   ├──  /en
|       ├──  /about
|       ├──  /project
|       ├──  /work
|   ├──  /fr
|       ├──  /about
|       ├──  /project
|       ├──  /work
├──  /layouts
├──  /static
├── config.yaml
├── .gitlab-ci.yml

During development, several key steps were followed:

1. Initial Setup: Installing Hugo and setting up the project with the Docsy theme.
2. Customization: Adapting the theme to meet the specific needs of the project, including modifying styles and templates.
3. Content Creation: Writing pages in Markdown and organizing sections.
4. Local Testing: Using hugo server to test the site locally.

Deployment

Once the first version of the site was developed, it needed to be hosted. One of the solutions recommended by Hugo’s documentation is to host it on GitLab. By creating a repository on GitLab, the site can be directly hosted there:

Source: GitLab

1. GitLab Repository Setup: Creating a new GitLab repository for the site and configuring deployment files.
2. CI/CD Setup: Using GitLab CI/CD to automate deployment. This includes creating a .gitlab-ci.yml file to define the build and deployment steps.
3. Hosting: Configuring GitLab Pages to host the site, making the content publicly accessible.

The .gitlab-ci.yml file used for deployment:

stages:
  - build
  - deploy

variables:
  HUGO_VERSION: "0.137.1"
  GIT_SUBMODULE_STRATEGY: recursive

before_script:
  - apt-get update && apt-get install -y wget curl golang
  - wget https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_Linux-64bit.tar.gz
  - tar -xzf hugo_extended_${HUGO_VERSION}_Linux-64bit.tar.gz -C /usr/local/bin
  - hugo version
  - curl -fsSL https://deb.nodesource.com/setup_18.x | bash -
  - apt-get install -y nodejs

build:
  stage: build
  script:
    - if [ -f package.json ]; then npm install; fi
    - npm install -g sass
    - hugo --gc --minify --baseURL "$CI_PAGES_URL/"
  artifacts:
    paths:
      - public
  only:
    - main

pages:
  stage: deploy
  script:
    - echo "Deploying to GitLab Pages..."
  artifacts:
    paths:
      - public
  only:
    - main
  environment:
    name: production
    url: $CI_PAGES_URL

Additionally, with hello.cv, I was able to purchase a domain with my name to make the site easier to access. This allows visitors to easily find my portfolio using a custom and professional URL.

To view the project, follow this link to GitLab.