CMS

Front dans HUGO

6 janvier 2024

Préparation du projet

Pour préparer le projet, j'ai choisi d'utiliser DevContainer, permettant d'utiliser directement une stack Docker directement dans éditeur VSCode.
DevContainer est une fonctionnalité de Visual Studio Code qui permet de définir un environnement de développement préconfiguré, basé sur des conteneurs Docker.
Cela garantit que tous les développeurs travaillant sur le projet utilisent exactement le même environnement, évitant ainsi les problèmes de configuration ou d'incompatibilité.
Voici la configuration .devcontainer du projet.

.devcontainer/devcontainer.json

{
	"name": "Hugo (Community)",
	"build": {
		"dockerfile": "Dockerfile",
		"args": {
			"VARIANT": "hugo_extended",
			"VERSION": "latest",
			"NODE_VERSION": "18"
		}
	},
	"features": {
		// "ghcr.io/devcontainers/features/go:1": {
		// 	"version": "1.20.1"
		// },
		"ghcr.io/devcontainers-contrib/features/go-task:1": {}
	},

	// Configure tool-specific properties.
	"customizations": {
		// Configure properties specific to VS Code.
		"vscode": {
			// Set *default* container specific settings.json values on container create.
			"settings": {
				"html.format.templating": true,
                "license-header-manager.excludeExtensions": [
                    ".sh",
                    ".xml",
                    ".html"
                ],
                "license-header-manager.excludeFolders": [
                    "node_modules",
                    "plugins",
                    "assets"
                ],
                "editor.tabCompletion": "on",
                "eslint.alwaysShowStatus": true,
                "eslint.lintTask.enable": true,
                "eslint.useESLintClass": true,
                "jest.jestCommandLine": "npm run test --"
			},

			// Add the IDs of extensions you want installed when the container is created.
			"extensions": [
				"bierner.markdown-footnotes",
				"budparr.language-hugo-vscode",
				"bungcip.better-toml",
				"davidanson.vscode-markdownlint",
				"dbaeumer.vscode-eslint",
				"GitHub.vscode-pull-request-github",
				"hediet.vscode-drawio",
				"mushan.vscode-paste-image",
				"sdras.night-owl",
				"stevensona.character-count",
				"streetsidesoftware.code-spell-checker",
				"Tyriar.lorem-ipsum",
				"yzhang.markdown-all-in-one",
				"ms-azuretools.vscode-docker",
				"task.vscode-task",
				"donjayamanne.githistory"
			]
		}
	},

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	"forwardPorts": [
		1313
	],
	// Use `updateContentCommand` to run commands in the prebuild
    	//"updateContentCommand": "npm install",

	// Use 'postCreateCommand' to run commands after the container is created.
		//"postCreateCommand": "uname -a",
    "postCreateCommand": "task app:up",

	// Set `remoteUser` to `root` to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
	"remoteUser": "node"
}

.devcontainer/Dockerfile

# Update the NODE_VERSION arg in docker-compose.yml to pick a Node version: 18, 16, 14
ARG NODE_VERSION=16
FROM mcr.microsoft.com/devcontainers/javascript-node:${NODE_VERSION}

# VARIANT can be either 'hugo' for the standard version or 'hugo_extended' for the extended version.
ARG VARIANT=hugo_extended
# VERSION can be either 'latest' or a specific version number
ARG VERSION=latest

# Download Hugo
RUN apt-get update && apt-get install -y ca-certificates openssl git curl lftp && \
    rm -rf /var/lib/apt/lists/* && \
    case ${VERSION} in \
    latest) \
    export VERSION=$(curl -s https://api.github.com/repos/gohugoio/hugo/releases/latest | grep "tag_name" | awk '{print substr($2, 3, length($2)-4)}') ;;\
    esac && \
    echo ${VERSION} && \
    case $(uname -m) in \
    aarch64) \
    export ARCH=ARM64 ;; \
    *) \
    export ARCH=64bit ;; \
    esac && \
    echo ${ARCH} && \
    wget -O ${VERSION}.tar.gz https://github.com/gohugoio/hugo/releases/download/v${VERSION}/${VARIANT}_${VERSION}_Linux-${ARCH}.tar.gz && \
    tar xf ${VERSION}.tar.gz && \
    mv hugo /usr/bin/hugo

#RUN go install github.com/go-task/task/v3/cmd/task@latest

# Hugo dev server port
EXPOSE 1313

Choix des technologies

Pour simplifier le développement, j'ai décidé de ne pas opter pour une Single Page Application, en utilisant un framework JavaScript (style React, Vue.JS). On a tendance à trop rapidement utiliser un framework, avant de vérifier si cela est vraiment utile. Aucune nécessité dans mon cas, je préfère rester sur des librairies utiles aux interactions.
  • GSAP : librairie d'animation Tween
  • Barba.js : librairie de transition entre pages
  • Swiper : carousel en JavaScript
J'ai tout de même choisi d'utiliser un bundler. J'ai choisi Webpack mais ViteJS est une alternative très solide.
Architecture
15 janvier 2024

Domain Driven Design

Lire
CMS
3 janvier 2024

Quelle solution choisir pour créer un site vitrine

Lire