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.