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 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