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