course hugo from scratch until first web deploy
This commit is contained in:
makayabou
parent
fba110010b
commit
ca2a6df105
@ -62,7 +62,7 @@ ma_commande 2>&1 |tee $LOG
|
||||
|
||||
### wc
|
||||
|
||||
Compteur
|
||||
Compteur (de lignes, de mots...)
|
||||
```
|
||||
wc -l myfile.txt # donne le nombre de lignes du fichier
|
||||
```
|
||||
|
||||
@ -1,45 +1,48 @@
|
||||
# Construire un site statique avec Hugo
|
||||
|
||||
## Création du projet sur Gitlab
|
||||
La création d'un site avec Hugo se fait en plusieurs temps :
|
||||
1. [Installation d'Hugo](install_hugo.md)
|
||||
2. [Préparation de l'environnement de travail](#preparer-lenvironnement-de-travail)
|
||||
3. [Création du site en local](#creation-du-site-web-hugo-en-local)
|
||||
4. [Déploiement local](#deploiement-local)
|
||||
5. [Déploiement en ligne avec Gitlab Pages](#deploiement-en-ligne-avec-gitlab-pages)
|
||||
|
||||
### Création d'un nouveau projet
|
||||
|
||||
|
||||
## Préparer l'environnement de travail
|
||||
|
||||
### Configuration du déploiement sur Gitlab Pages
|
||||
!!! important "**Dans ce tutoriel, vous devez remplacer <name-of-project\> par le nom de votre site, ex: info2000**"
|
||||
|
||||
#### Création du fichier de déploiement `.gitlab-ci.yml`
|
||||
### Installer les dépendances
|
||||
```
|
||||
sudo apt install git
|
||||
```
|
||||
|
||||
|
||||
### Créer le dossier du projet
|
||||
|
||||
```
|
||||
mkdir <name-of-project>
|
||||
```
|
||||
|
||||
Name the file `.gitlab-ci.yml` and fill it with the following content:
|
||||
### Initialisez le versioning
|
||||
|
||||
```
|
||||
# All available Hugo versions are listed here: https://gitlab.com/pages/hugo/container_registry
|
||||
image: registry.gitlab.com/pages/hugo/hugo_extended:latest
|
||||
```
|
||||
cd <name-of-project>
|
||||
git init
|
||||
```
|
||||
|
||||
variables:
|
||||
GIT_SUBMODULE_STRATEGY: recursive
|
||||
!!! tip "Pro tip"
|
||||
À partir de maintenant, vous pouvez utilisez git pour gérer les versions successives du code.
|
||||
Après chaque changement significatif, utilisez la commande `git add` pour ajouter les changements,
|
||||
et `git commit` pour les valider.
|
||||
Utilisez une [*CheatSheet*](https://rogerdudler.github.io/git-guide/) pour vous aider à mémoriser les commandes.
|
||||
|
||||
test:
|
||||
script:
|
||||
- hugo
|
||||
except:
|
||||
- master
|
||||
### Création du README
|
||||
|
||||
pages:
|
||||
script:
|
||||
- hugo
|
||||
artifacts:
|
||||
paths:
|
||||
- public
|
||||
only:
|
||||
- master
|
||||
```
|
||||
|
||||
#### Fais un *commit* sur les changements
|
||||
|
||||
|
||||
```
|
||||
echo "#<name-of-project>" > README.md
|
||||
```
|
||||
Vous pouvez maintenant modifier ce fichier, qui doit présenter le projet et le fonctionnement du site internet,
|
||||
en utilisant le format [Markdown](https://docs.roadiz.io/fr/latest/user/write-in-markdown/)
|
||||
|
||||
## Création du site web Hugo en local
|
||||
|
||||
@ -66,7 +69,7 @@ Ajouter les éléments suivants à votre `config.toml`:
|
||||
favicon = "favicon.ico"
|
||||
logo = "my-logo.png"
|
||||
```
|
||||
|
||||
and place pictures in `static` folder.
|
||||
|
||||
|
||||
### Création de la home page
|
||||
@ -99,42 +102,62 @@ Dans le dossier `layouts` on créé l'arborescence suivante:
|
||||
│ ├── baseof.html
|
||||
├── partials
|
||||
| ├── head.html
|
||||
| ├── header.hmtl
|
||||
| ├── footer.html
|
||||
| ├── header.html
|
||||
| ├── hero.html
|
||||
| ├── styles.html
|
||||
└── index.html
|
||||
```
|
||||
|
||||
|
||||
!!! note "**layouts/index.html**"
|
||||
??? note "**layouts/index.html**"
|
||||
=== "Contenu"
|
||||
```
|
||||
{% raw %} {{define main}} {% endraw %}
|
||||
{% raw %}
|
||||
{{define "main"}}
|
||||
{{ partial "hero.html" }}
|
||||
{% raw %} {{end}} {% endraw %}
|
||||
```
|
||||
=== "Explication"
|
||||
Il s'agit d'un template spécifique à la page d'accueil.
|
||||
On appelle le template `layouts/default/baseof.html` avec la directive `{% raw %} {{define main}} {% endraw %}`
|
||||
On appelle le template `layouts/default/baseof.html` avec la directive `{% raw %} {{define main}} {% endraw %}`.
|
||||
On appelle aussi `partials/hero.html`, qui est en quelque sort le slogan de bannière du site.
|
||||
|
||||
!!! note "**layouts/default/baseof.html**"
|
||||
??? note "**layouts/partials/hero.html**"
|
||||
=== "Contenu"
|
||||
```
|
||||
{% raw %}
|
||||
<main class="hero"
|
||||
<div class="hero__caption" >
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</main>
|
||||
{% endraw %}
|
||||
```
|
||||
=== "Explication"
|
||||
La directive `{% raw %} {{ .Content }} {% endraw %}` récupère le contenu de `content/_index.md` après les balises de l'en-tête Toml.
|
||||
|
||||
??? note "**layouts/default/baseof.html**"
|
||||
=== "Contenu"
|
||||
```
|
||||
{% raw %}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
{% raw %}{{- partial "head.html" . -}}{% endraw %}
|
||||
{{- partial "head.html" . -}}
|
||||
|
||||
<body>
|
||||
{% raw %}{{- partial "header.html" . -}}{% endraw %}
|
||||
{% raw %}{{- block "main" . }}{{- end }}{% endraw %}
|
||||
{% raw %}{{- partial "footer.html" . -}}{% endraw %}
|
||||
{{- partial "header.html" . -}}
|
||||
{{- block "main" . }}{{- end }}
|
||||
{{- partial "footer.html" . -}}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
{% endraw %}
|
||||
```
|
||||
=== "Explication"
|
||||
On appelle le partial `head.html`, puis on créé le `body` avec les partials `header.html` et `footer.html` .
|
||||
Le bloc central, "main", sera construit à partir de chaque page.
|
||||
|
||||
!!! note "**layouts/partials/head.html**"
|
||||
??? note "**layouts/partials/head.html**"
|
||||
=== "Contenu"
|
||||
```
|
||||
{% raw %}
|
||||
@ -147,7 +170,8 @@ Dans le dossier `layouts` on créé l'arborescence suivante:
|
||||
<meta name="description" content="{{ $.Site.Params.description }}" />
|
||||
|
||||
{{ hugo.Generator }}
|
||||
|
||||
<!-- CSS -->
|
||||
{{ partial "styles.html" . }}
|
||||
</head>
|
||||
{% endraw %}
|
||||
```
|
||||
@ -157,32 +181,299 @@ Dans le dossier `layouts` on créé l'arborescence suivante:
|
||||
Quand celles-ci commencent par `$.Site.Params`, il s'agit des variables définies dans la rubrique [params] de `config.toml`
|
||||
|
||||
|
||||
!!! note "**layouts/partials/header.html**"
|
||||
??? note "**layouts/partials/header.html**"
|
||||
=== "Contenu"
|
||||
```
|
||||
header
|
||||
{% raw %}
|
||||
<header class="header">
|
||||
<div class="header__title">
|
||||
<a href="{{ "/" | relLangURL }}" class="header__title__link" alt="Home">
|
||||
{{ if $.Site.Params.logo }}
|
||||
<img src="{{ $.Site.BaseURL }}{{ $.Site.Params.logo }}" class="header__title__logo" alt="{{ $.Site.Title }}">
|
||||
{{ else }}
|
||||
{{ $.Site.Title }}
|
||||
{{ end }}
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
{% endraw %}
|
||||
```
|
||||
=== "Explication"
|
||||
This is why.
|
||||
Ici des classes CSS sont appellées (`header`, `header__title`, etc.).
|
||||
Elles doivent être définies dans le fichier `assets/css/style.css`
|
||||
|
||||
!!! note "**layouts/partials/footer.html**"
|
||||
|
||||
#### Le CSS
|
||||
|
||||
??? note "**layouts/partials/styles.html**"
|
||||
=== "Contenu"
|
||||
```
|
||||
footer
|
||||
{% raw %}
|
||||
{{ $style := resources.Get "css/style.css" }}
|
||||
{{ $base := resources.Get "css/base.css" }}
|
||||
{{ $bundle := $style $base | resources.Concat "css/bundle.css" }}
|
||||
{{ $css := $bundle | resources.Minify }}
|
||||
<link rel="stylesheet" href="{{ $css.Permalink }}">
|
||||
{% endraw %}
|
||||
=== "Explication"
|
||||
On appelle les fichiers `style.css` et `base.css` dans `assets/css/` et on les minimise, après les avoir concaténés.
|
||||
|
||||
??? note "**assets/css/style.css**"
|
||||
```
|
||||
/* HEADER */
|
||||
|
||||
.header {
|
||||
background-color: var(--white);
|
||||
box-shadow: 0 1px 5px var(--divider);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: 1fr;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.header__title {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 1.1rem;
|
||||
justify-content: flex-start;
|
||||
margin: 1rem 4.5rem;
|
||||
}
|
||||
|
||||
.header__title__link {
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.header__title__logo {
|
||||
position: absolute;
|
||||
top: 8px; left: 20px;
|
||||
height: 55%;
|
||||
width: 13%;
|
||||
max-width: 20%;
|
||||
vertical-align: middle;
|
||||
transition: all .4s ease-in-out;
|
||||
margin-bottom: 0px;
|
||||
margin-top: 10px;
|
||||
display : inline-block;
|
||||
margin-left: 8%;
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
align-content: center;
|
||||
background-attachment: fixed;
|
||||
background-position: 100% 20%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
display: flex;
|
||||
height: 90vh;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero__caption {
|
||||
align-items: flex-start;
|
||||
animation: focus 0.95s cubic-bezier(0.39, 0.575, 0.565, 1) both;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 4.5rem;
|
||||
}
|
||||
|
||||
.hero__caption > h1 {
|
||||
font-size: var(--title);
|
||||
}
|
||||
|
||||
.hero__caption > h2 {
|
||||
font-size: var(--subheader);
|
||||
margin-top: 0.45rem;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
??? note "**assets/css/base.css**"
|
||||
```
|
||||
:root {
|
||||
/* Font Sizes */
|
||||
--title: 3.998rem;
|
||||
--subtitle: 2.827rem;
|
||||
--header: 1.999rem;
|
||||
--subheader: 1.414rem;
|
||||
|
||||
/* Colors */
|
||||
--primary: #ffc107;
|
||||
--primary-dark: #ffa000;
|
||||
--primary-light: #ffecb3;
|
||||
--primary-text: #212121;
|
||||
--secondary-text: #333333;
|
||||
--accent: #536dfe;
|
||||
--divider: #bdbdbd;
|
||||
--white: #fdfdfd;
|
||||
|
||||
/* Breakpoints */
|
||||
--sm: 576px;
|
||||
--md: 768px;
|
||||
--lg: 992px;
|
||||
--xl: 1200px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
hr {
|
||||
color: var(--divider);
|
||||
opacity: 0.30;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: var(--subheader);
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
border: 2px solid var(--divider);
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
border: 2px solid var(--accent);
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 1px solid var(--divider);
|
||||
overflow: auto;
|
||||
margin-bottom: 1.75rem;
|
||||
padding: 1rem 1.75rem;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
```
|
||||
|
||||
## Déploiement local
|
||||
|
||||
Le déploiement local du site est très simple, il suffit d'utiliser la commande `hugo server`:
|
||||
```
|
||||
makayabou@domani:~/dev/garagenum/team/webapps/hugo_from_start$ hugo server
|
||||
Start building sites …
|
||||
|
||||
| EN
|
||||
-------------------+-----
|
||||
Pages | 0
|
||||
Paginator pages | 0
|
||||
Non-page files | 0
|
||||
Static files | 0
|
||||
Processed images | 0
|
||||
Aliases | 0
|
||||
Sitemaps | 1
|
||||
Cleaned | 0
|
||||
|
||||
Built in 1 ms
|
||||
Watching for changes in /home/makayabou/dev/garagenum/team/webapps/hugo_from_start/{archetypes,assets,content,data,layouts,static}
|
||||
Watching for config changes in /home/makayabou/dev/garagenum/team/webapps/hugo_from_start/config.toml
|
||||
Environment: "development"
|
||||
Serving pages from memory
|
||||
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
|
||||
Web Server is available at http://localhost:1313/team/webapps/hugo_from_start/ (bind address 127.0.0.1)
|
||||
Press Ctrl+C to stop
|
||||
```
|
||||
|
||||
## Déploiement en ligne avec Gitlab Pages
|
||||
|
||||
### Création du projet sur Gitlab
|
||||
|
||||
Connectez-vous à [gitlab.com](https://gitlab.com)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Vous êtes redirigés vers la page d'accueil de votre projet, qui vous propose des instructions pour manipuler le projet en ligne de commandes depuis votre ordinateur.
|
||||
Exécutez les instructions `Git global setup` seulement. Les autres instructions seront à réaliser plus loin dans ce tutoriel.
|
||||
|
||||
|
||||
|
||||
### Création du fichier de déploiement
|
||||
|
||||
En local, à la racine du projet hugo, on crée un fichier `gitlab-ci.yml`
|
||||
|
||||
??? note "**gitlab-ci.yml**"
|
||||
=== "Contenu"
|
||||
```
|
||||
# All available Hugo versions are listed here: https://gitlab.com/pages/hugo/container_registry
|
||||
image: registry.gitlab.com/pages/hugo/hugo_extended:latest
|
||||
|
||||
variables:
|
||||
GIT_SUBMODULE_STRATEGY: recursive
|
||||
|
||||
test:
|
||||
script:
|
||||
- hugo
|
||||
except:
|
||||
- master
|
||||
|
||||
pages:
|
||||
script:
|
||||
- hugo
|
||||
artifacts:
|
||||
paths:
|
||||
- public
|
||||
only:
|
||||
- master
|
||||
```
|
||||
=== "Explication"
|
||||
This is why.
|
||||
Ce fichier `.yaml` (**attention aux indentations de 2 ++space++ **), définit des tâches qui sont exécutées automatiquement par Gitlab à chaque nouveau commit.
|
||||
|
||||
Deux tâches sont exécutées:
|
||||
- la tâche `test`, qui exécute hugo sur toutes les branches sauf `master`
|
||||
- la tâche `pages`, qui exécute hugo sur la branche master, et propose au téléchargement (les `artifacts`) le contenu du dossier `public` créé par le déploiement automatique de Gitlab.
|
||||
|
||||
### Liaison entre le projet local et le projet sur Gitlab
|
||||
|
||||
#### Vérification de l'état du projet
|
||||
|
||||
Assurez-vous à ce stade d'avoir exécuté `git add` et `git commit` pour tous les fichiers créés.
|
||||
Vous pouvez vous en assurer avec la commande `git status`:
|
||||
```
|
||||
makayabou@domani:~/dev/garagenum/team/webapps/hugo_from_start$ git status
|
||||
Sur la branche master
|
||||
Votre branche est à jour avec 'origin/master'.
|
||||
|
||||
rien à valider, la copie de travail est propre
|
||||
```
|
||||
|
||||
#### Liaison entre la branche locale et la branche master
|
||||
|
||||
!!! important "Remplacer tous les éléments entre <\>"
|
||||
|
||||
|
||||
```
|
||||
git remote add origin git@gitlab.com:<username>/<projectpath>.git
|
||||
git push --set-upstream origin master
|
||||
```
|
||||
```
|
||||
```
|
||||
```
|
||||
```
|
||||
```
|
||||
```
|
||||
```
|
||||
**Après 2 minutes, votre site est désormais déployé à `https://<username>.gitlab.io/<projectpath>`**
|
||||
|
||||
```
|
||||
```
|
||||
```
|
||||
|
||||
BIN
docs/divers/devops/hugo/img/gitlab-new-project.png
Normal file
BIN
docs/divers/devops/hugo/img/gitlab-new-project.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
docs/divers/devops/hugo/img/gitlab-project-cli.png
Normal file
BIN
docs/divers/devops/hugo/img/gitlab-project-cli.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
BIN
docs/divers/devops/hugo/img/gitlab-project-desc.png
Normal file
BIN
docs/divers/devops/hugo/img/gitlab-project-desc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Loading…
x
Reference in New Issue
Block a user
