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.
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 à faire une Single Page Application, en utilisant un framework JS (style React, Vue.JS). On a tendance à trop vite utiliser un framework, avant de vérifier si l'utilité est vérifiée. Aucune nécessité dans mon cas, je préfère rester sur des librairies utile aux intéractions.
  • 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
January 15, 2024

Domain Driven Design

Lire
CMS
January 3, 2024

Quelle solution choisir pour créer un site vitrine

Lire