start reorg hugo guide and add auto-update guide
This commit is contained in:
makayabou
parent
988e4c06f7
commit
f020afb755
@ -159,6 +159,5 @@ siska@siska-pc:~/cours/doc/docs/cours/scripting
|
|||||||
- `$!` : contient le PID de la dernière commande lancée
|
- `$!` : contient le PID de la dernière commande lancée
|
||||||
```
|
```
|
||||||
|
|
||||||
`````
|
### EOT (End Of Transmission)
|
||||||
#awk -f {"substring"}
|
#awk -f {"substring"}
|
||||||
|
|
||||||
104
docs/divers/admin/autoupdate.md
Normal file
104
docs/divers/admin/autoupdate.md
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
# Mises à jour automatiques
|
||||||
|
|
||||||
|
## Utilisation de cron-apt
|
||||||
|
|
||||||
|
### Installation du logiciel
|
||||||
|
|
||||||
|
```
|
||||||
|
sudo apt update
|
||||||
|
sudo apt install cron-apt
|
||||||
|
```
|
||||||
|
Si l'installateur vous demande de configurer le serveur Postfix (c'est le serveur chargé d'envoyer des messages à l'administrateur), vous n'avez qu'à choisir, "pas de configuration", ou "Local Uniquement" pour que les messages soient envoyés dans `/var/mail/$USER`, ou "Site Internet" pour utiliser le serveur SMTP de votre messagerie (gmail, etc.)
|
||||||
|
|
||||||
|
### Configuration
|
||||||
|
|
||||||
|
!!! note "/etc/cron-apt/config"
|
||||||
|
```
|
||||||
|
APTCOMMAND=/usr/bin/apt
|
||||||
|
OPTIONS="-o quiet=1 Dir::Etc::SourceList=/etc/apt/sources.list"
|
||||||
|
```
|
||||||
|
|
||||||
|
!!! note "/etc/cron-apt/action.d/3-download"
|
||||||
|
```
|
||||||
|
autoclean -y
|
||||||
|
full-upgrade -y -o APT::Get::Show-Upgraded=true
|
||||||
|
```
|
||||||
|
|
||||||
|
Comme indiqué dans `/etc/cron.d/cron-apt`, la tâche apt-cron se déclenche tous les jours à 4h du matin.
|
||||||
|
|
||||||
|
### Re-démarrage du service
|
||||||
|
```
|
||||||
|
sudo systemctl restart cron.service
|
||||||
|
```
|
||||||
|
|
||||||
|
## Avec Unattended-Upgrade
|
||||||
|
|
||||||
|
### Installation des dépendances
|
||||||
|
|
||||||
|
```
|
||||||
|
sudo apt install unattended-upgrades apt-listchanges
|
||||||
|
```
|
||||||
|
|
||||||
|
### Configuration
|
||||||
|
|
||||||
|
!!! note "/etc/apt/apt.conf.d/50unattended-upgrades"
|
||||||
|
Modifier l'élément `Unattended-Upgrade` de la manière suivante:
|
||||||
|
```
|
||||||
|
Unattended-Upgrade::Origins-Pattern {
|
||||||
|
"origin=*";
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
!!! note "/etc/apt.conf.d/02periodic"
|
||||||
|
```
|
||||||
|
// Control parameters for cron jobs by /etc/cron.daily/apt-compat //
|
||||||
|
|
||||||
|
|
||||||
|
// Enable the update/upgrade script (0=disable)
|
||||||
|
APT::Periodic::Enable "1";
|
||||||
|
|
||||||
|
|
||||||
|
// Do "apt-get update" automatically every n-days (0=disable)
|
||||||
|
APT::Periodic::Update-Package-Lists "1";
|
||||||
|
|
||||||
|
|
||||||
|
// Do "apt-get upgrade --download-only" every n-days (0=disable)
|
||||||
|
APT::Periodic:Download-Upgradeable-Packages "1";
|
||||||
|
|
||||||
|
|
||||||
|
// Run the "unattended-upgrade" security upgrade script
|
||||||
|
// every n-days (0=disabled)
|
||||||
|
// Requires the package "unattended-upgrades" and will write
|
||||||
|
// a log in /var/log/unattended-upgrades
|
||||||
|
APT:Periodic::Unattended-Upgrade "1";
|
||||||
|
|
||||||
|
|
||||||
|
// Do "apt-get autoclean" every n-days (0=disable)
|
||||||
|
APT:Periodic::AutocleanInterval "21";
|
||||||
|
|
||||||
|
|
||||||
|
// Send report mail to root
|
||||||
|
// 0: no report (or null string)
|
||||||
|
// 1: progress report (actually any string)
|
||||||
|
// 2: + command outputs (remove -qq, remove 2>/dev/null, add -d)
|
||||||
|
// 3: + trace on
|
||||||
|
APT:Periodic::Verbose "1";
|
||||||
|
```
|
||||||
|
|
||||||
|
### Plannifier l'exécution de `unattended-upgrades`
|
||||||
|
|
||||||
|
On utilise un éditeur intégré avec la commande `sudo systemctl edit apt-daily.timer`
|
||||||
|
|
||||||
|
!!! note "apt-daily.timer"
|
||||||
|
```bash
|
||||||
|
[Unit]
|
||||||
|
Description=Daily apt download activities
|
||||||
|
|
||||||
|
[Timer]
|
||||||
|
OnCalendar= *-*-* 05:00
|
||||||
|
#RandomizedDelaySec=12h
|
||||||
|
Persistent=true
|
||||||
|
|
||||||
|
[Install]
|
||||||
|
WantedBy=timers.target
|
||||||
|
```
|
||||||
@ -6,3 +6,4 @@
|
|||||||
- [ Installer Lug9000 sur Minetest ](lug9000.md)
|
- [ Installer Lug9000 sur Minetest ](lug9000.md)
|
||||||
- [ Installer Arch Linux ](arch-install.md)
|
- [ Installer Arch Linux ](arch-install.md)
|
||||||
- [ Installer Kodi multimedia player](kodi.md)
|
- [ Installer Kodi multimedia player](kodi.md)
|
||||||
|
- [ Faire passer les mises à jour automatiquement](autoupdate.md)
|
||||||
|
|||||||
@ -9,13 +9,12 @@
|
|||||||
```
|
```
|
||||||
su bellinuxien
|
su bellinuxien
|
||||||
```
|
```
|
||||||
|
#### installer flatpak pour avoir la dernière version de Minetest
|
||||||
# installer flatpak pour avoir la dernière version de Minetest
|
|
||||||
|
|
||||||
sudo apt update
|
sudo apt update
|
||||||
sudo apt install flatpak geany
|
sudo apt install flatpak geany
|
||||||
|
|
||||||
# On quitte l'admin avec **CTRL + D**
|
#### On quitte l'admin avec CTRL+D
|
||||||
|
|
||||||
|
|
||||||
### Partie 2: en tant qu'utilisateur
|
### Partie 2: en tant qu'utilisateur
|
||||||
@ -27,7 +26,7 @@ export MT=.var/app/net.minetest.Minetest/.minetest
|
|||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
## Installer le jeu du Garage Numérique
|
#### Installer le jeu du Garage Numérique
|
||||||
```
|
```
|
||||||
cd $MT
|
cd $MT
|
||||||
mkdir games
|
mkdir games
|
||||||
@ -35,12 +34,12 @@ cd games
|
|||||||
git clone https://gitlab.com/garagenum/minetest-lug9000
|
git clone https://gitlab.com/garagenum/minetest-lug9000
|
||||||
```
|
```
|
||||||
|
|
||||||
## Créer un projet de mod Minetest
|
#### Créer un projet de mod Minetest
|
||||||
1. Créer un compte sur gitlab.com
|
1. Créer un compte sur gitlab.com
|
||||||
2. cliquer sur Nouveau Projet
|
2. cliquer sur Nouveau Projet
|
||||||
|
|
||||||
|
|
||||||
## Cloner le projet sur son ordinateur
|
#### Cloner le projet sur son ordinateur
|
||||||
Revenir dans le terminal et écrire:
|
Revenir dans le terminal et écrire:
|
||||||
```
|
```
|
||||||
cd $MT
|
cd $MT
|
||||||
@ -49,7 +48,7 @@ git clone https://gitlab.com/mon-pseudo/monprojet.git
|
|||||||
cd monprojet
|
cd monprojet
|
||||||
```
|
```
|
||||||
|
|
||||||
## Créer le fichier init.lua
|
#### Créer le fichier init.lua
|
||||||
```
|
```
|
||||||
geany init.lua&
|
geany init.lua&
|
||||||
```
|
```
|
||||||
@ -57,6 +56,6 @@ geany init.lua&
|
|||||||
***
|
***
|
||||||
|
|
||||||
|
|
||||||
Tu peux éditer le fichier init.lua en t'aidant de
|
Tu peux éditer le fichier init.lua en t'aidant de :
|
||||||
- [le livre écrit par RubenWardy](https://rubenwardy.com/minetest_modding_book/en/index.html)
|
- [le livre écrit par RubenWardy](https://rubenwardy.com/minetest_modding_book/en/index.html)
|
||||||
- [la doc officielle](https://github.com/minetest/minetest/blob/master/doc/lua_api.txt)
|
- [la doc officielle](https://github.com/minetest/minetest/blob/master/doc/lua_api.txt)
|
||||||
|
|||||||
0
docs/divers/devops/hugo/add_list.md
Normal file
0
docs/divers/devops/hugo/add_list.md
Normal file
47
docs/divers/devops/hugo/add_menu.md
Normal file
47
docs/divers/devops/hugo/add_menu.md
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
# Ajouter un menu et une page de contenu
|
||||||
|
|
||||||
|
Pour commencer à entrer du contenu sur notre site, nous allons intégrer un menu dans le header et créer une nouvelle page :
|
||||||
|
- [création du menu](#creer-un-menu)
|
||||||
|
- [créer une page](#creer-une-page)
|
||||||
|
|
||||||
|
## Créer un menu
|
||||||
|
|
||||||
|
Nous créons un partial pour définir le menu, et nous appelons le partial dans `header.html`, jsute après la balise </a>.
|
||||||
|
|
||||||
|
### Appel du partial menu.html
|
||||||
|
|
||||||
|
!!! note "Appel du partial dans header.html"
|
||||||
|
```html
|
||||||
|
{% raw %}
|
||||||
|
{{ partial "menu.html" . }}
|
||||||
|
{% endraw %}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Création du partial menu.html
|
||||||
|
??? note "layouts/partials/menu.html"
|
||||||
|
=== "Contenu"
|
||||||
|
```html
|
||||||
|
{% raw %}
|
||||||
|
<nav class="menu" aria-label="menu">
|
||||||
|
<ul class="menu__items" aria-label="menu">
|
||||||
|
{{ $current := . }}
|
||||||
|
{{ range .Site.Menus.main }}
|
||||||
|
<li class="menu__items__item" aria-label="{{ .Name }}">
|
||||||
|
<a href="{{ .URL }}" class="menu__items__item__link {{ if $current.IsMenuCurrent "main" . }}active{{ end }}"
|
||||||
|
alt="{{ .Name }}" role="menuitem">
|
||||||
|
{{ .Name }}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
{% endraw %}
|
||||||
|
```
|
||||||
|
=== "Explication"
|
||||||
|
la fonction `range` scanne tous les paramètres pour savoir les pages qui appartiennent au menu `main`
|
||||||
|
|
||||||
|
## Créer du contenu
|
||||||
|
|
||||||
|
Pour l'exemple, nous choisissons de créer la page `Présentation`.
|
||||||
|
|
||||||
|
### Création du template
|
||||||
0
docs/divers/devops/hugo/add_sections.md
Normal file
0
docs/divers/devops/hugo/add_sections.md
Normal file
327
docs/divers/devops/hugo/create_website.md
Normal file
327
docs/divers/devops/hugo/create_website.md
Normal file
@ -0,0 +1,327 @@
|
|||||||
|
# Créer un site web avec Hugo
|
||||||
|
|
||||||
|
!!! important "**Dans ce tutoriel, vous devez remplacer `<name-of-project>`, par le nom de votre site, ex: info2000**)"
|
||||||
|
|
||||||
|
## Étape 1: Construire le site
|
||||||
|
|
||||||
|
## Création du site
|
||||||
|
|
||||||
|
```
|
||||||
|
hugo new site my-website
|
||||||
|
```
|
||||||
|
Cette commande va créer tout l'arborescence nécessaire à Hugo dans le dossier `./<my-website`.
|
||||||
|
|
||||||
|
## Modification du `config.toml`
|
||||||
|
|
||||||
|
Edit at least `url` to reflect the adress where it will be deployed by gitlab pages.
|
||||||
|
If your project is located at `https://gitlab.com/myuser/agroup/myproject`, then
|
||||||
|
your website will be deployed at `https://myuser.gitlab.io/agroup/myproject`.
|
||||||
|
|
||||||
|
Ajouter les éléments suivants à votre `config.toml`:
|
||||||
|
```
|
||||||
|
baseurl = "https://myuser.gitlab.io/agroup/myproject/"
|
||||||
|
title = "My website title"
|
||||||
|
author = "Le Garage Numérique"
|
||||||
|
[params]
|
||||||
|
description = "A description for my website, that can be used on front page."
|
||||||
|
favicon = "favicon.ico"
|
||||||
|
logo = "my-logo.png"
|
||||||
|
```
|
||||||
|
and place pictures in `static` folder.
|
||||||
|
|
||||||
|
|
||||||
|
## Étape 2: Construire la home page
|
||||||
|
|
||||||
|
### Création de la home page
|
||||||
|
```
|
||||||
|
hugo new _index.md
|
||||||
|
```
|
||||||
|
A new file is created at `content/_index.md`
|
||||||
|
|
||||||
|
### Modification
|
||||||
|
|
||||||
|
```
|
||||||
|
---
|
||||||
|
title: "Mon super contenu"
|
||||||
|
date: 2020-12-08T00:13:21+01:00
|
||||||
|
draft: false
|
||||||
|
---
|
||||||
|
|
||||||
|
Ceci est le contenu de la home page pour mon site web
|
||||||
|
```
|
||||||
|
La partie encadrée entre `---` s'appelle le **front matter**, il s'agit de méta-données utilisées pour le déploiement du site.
|
||||||
|
|
||||||
|
### Création des templates
|
||||||
|
|
||||||
|
Dans le dossier `layouts` on créé l'arborescence suivante:
|
||||||
|
```
|
||||||
|
├── _default
|
||||||
|
│ ├── baseof.html
|
||||||
|
├── partials
|
||||||
|
| ├── head.html
|
||||||
|
| ├── header.html
|
||||||
|
| ├── hero.html
|
||||||
|
| ├── styles.html
|
||||||
|
└── index.html
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
??? note "**layouts/index.html**"
|
||||||
|
=== "Contenu"
|
||||||
|
```
|
||||||
|
{% raw %}
|
||||||
|
{{define "main"}}
|
||||||
|
{{ partial "hero.html" }}
|
||||||
|
{{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 aussi `partials/hero.html`, qui est en quelque sort le slogan de bannière du site.
|
||||||
|
|
||||||
|
??? 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>
|
||||||
|
{{- partial "head.html" . -}}
|
||||||
|
|
||||||
|
<body>
|
||||||
|
{{- 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**"
|
||||||
|
=== "Contenu"
|
||||||
|
```
|
||||||
|
{% raw %}
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="robots" content="index, follow" />
|
||||||
|
<title>{{ $.Site.Title }} - {{ .Title }}</title>
|
||||||
|
<link rel="icon" href="{{ $.Site.BaseURL }}{{ $.Site.Params.favicon }}" />
|
||||||
|
<meta name="description" content="{{ $.Site.Params.description }}" />
|
||||||
|
|
||||||
|
{{ hugo.Generator }}
|
||||||
|
<!-- CSS -->
|
||||||
|
{{ partial "styles.html" . }}
|
||||||
|
</head>
|
||||||
|
{% endraw %}
|
||||||
|
```
|
||||||
|
=== "Explication"
|
||||||
|
C'est ici qu'on placera notamment les informations de référencement **SEO**.
|
||||||
|
Entre double-accolades, on appelle des variables.
|
||||||
|
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**"
|
||||||
|
=== "Contenu"
|
||||||
|
```
|
||||||
|
{% 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"
|
||||||
|
Ici des classes CSS sont appellées (`header`, `header__title`, etc.).
|
||||||
|
Elles doivent être définies dans le fichier `assets/css/style.css`
|
||||||
|
|
||||||
|
|
||||||
|
### Le CSS
|
||||||
|
|
||||||
|
??? note "**layouts/partials/styles.html**"
|
||||||
|
=== "Contenu"
|
||||||
|
```
|
||||||
|
{% 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;
|
||||||
|
}
|
||||||
|
```
|
||||||
139
docs/divers/devops/hugo/deploy_website.md
Normal file
139
docs/divers/devops/hugo/deploy_website.md
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
# Déploiement du site web
|
||||||
|
|
||||||
|
2 méthodes sont présentées:
|
||||||
|
- [déploiement local](#deploiement-local)
|
||||||
|
- [déploiement avec Gitlab](#deploiement-en-ligne-avec-gitlab-pages)
|
||||||
|
|
||||||
|
## 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
|
||||||
|
|
||||||
|
### Préparation locale en vue du déploiement sur Gitlab
|
||||||
|
|
||||||
|
#### Mise en place de la gestion de versions
|
||||||
|
|
||||||
|
```
|
||||||
|
git init
|
||||||
|
```
|
||||||
|
|
||||||
|
!!! 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.
|
||||||
|
|
||||||
|
#### Création du README
|
||||||
|
|
||||||
|
```
|
||||||
|
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 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"
|
||||||
|
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.
|
||||||
|
|
||||||
|
#### Ajout des fichiers au versionning
|
||||||
|
|
||||||
|
```
|
||||||
|
git add README.md .gitlab-ci.yml config.toml content assets layouts archetypes
|
||||||
|
git commit -m "initial commit"
|
||||||
|
```
|
||||||
|
|
||||||
|
### 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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 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>`**
|
||||||
@ -10,7 +10,7 @@ La création d'un site avec Hugo se fait en plusieurs temps :
|
|||||||
|
|
||||||
## Préparer l'environnement de travail
|
## Préparer l'environnement de travail
|
||||||
|
|
||||||
!!! important "**Dans ce tutoriel, vous devez remplacer <name-of-project\> par le nom de votre site, ex: info2000**"
|
|
||||||
|
|
||||||
### Installer les dépendances
|
### Installer les dépendances
|
||||||
```
|
```
|
||||||
@ -46,433 +46,9 @@ en utilisant le format [Markdown](https://docs.roadiz.io/fr/latest/user/write-in
|
|||||||
|
|
||||||
## Création du site web Hugo en local
|
## Création du site web Hugo en local
|
||||||
|
|
||||||
### Création du site
|
|
||||||
|
|
||||||
```
|
|
||||||
hugo new site my-website
|
|
||||||
```
|
|
||||||
Cette commande va créer tout l'arborescence nécessaire à Hugo dans le dossier `./my-website`.
|
|
||||||
|
|
||||||
### Modification du `config.toml`
|
|
||||||
|
|
||||||
Edit at least `url` to reflect the adress where it will be deployed by gitlab pages.
|
|
||||||
If your project is located at `https://gitlab.com/myuser/agroup/myproject`, then
|
|
||||||
your website will be deployed at `https://myuser.gitlab.io/agroup/myproject`.
|
|
||||||
|
|
||||||
Ajouter les éléments suivants à votre `config.toml`:
|
|
||||||
```
|
|
||||||
baseurl = "https://myuser.gitlab.io/agroup/myproject/"
|
|
||||||
title = "My website title"
|
|
||||||
author = "Le Garage Numérique"
|
|
||||||
[params]
|
|
||||||
description = "A description for my website, that can be used on front page."
|
|
||||||
favicon = "favicon.ico"
|
|
||||||
logo = "my-logo.png"
|
|
||||||
```
|
|
||||||
and place pictures in `static` folder.
|
|
||||||
|
|
||||||
|
|
||||||
### Création de la home page
|
|
||||||
|
|
||||||
#### Création avec hugo
|
|
||||||
|
|
||||||
```
|
|
||||||
hugo new _index.md
|
|
||||||
```
|
|
||||||
A new file is created at `content/_index.md`
|
|
||||||
|
|
||||||
#### Modification
|
|
||||||
|
|
||||||
```
|
|
||||||
---
|
|
||||||
title: "Mon super contenu"
|
|
||||||
date: 2020-12-08T00:13:21+01:00
|
|
||||||
draft: true
|
|
||||||
---
|
|
||||||
|
|
||||||
Ceci est le contenu de la home page pour mon site web
|
|
||||||
```
|
|
||||||
La partie encadrée entre `---` s'appelle le **front matter**, il s'agit de méta-données utilisées pour le déploiement du site.
|
|
||||||
|
|
||||||
#### Création des templates
|
|
||||||
|
|
||||||
Dans le dossier `layouts` on créé l'arborescence suivante:
|
|
||||||
```
|
|
||||||
├── _default
|
|
||||||
│ ├── baseof.html
|
|
||||||
├── partials
|
|
||||||
| ├── head.html
|
|
||||||
| ├── header.html
|
|
||||||
| ├── hero.html
|
|
||||||
| ├── styles.html
|
|
||||||
└── index.html
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
??? note "**layouts/index.html**"
|
|
||||||
=== "Contenu"
|
|
||||||
```
|
|
||||||
{% 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 aussi `partials/hero.html`, qui est en quelque sort le slogan de bannière du site.
|
|
||||||
|
|
||||||
??? 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>
|
|
||||||
{{- partial "head.html" . -}}
|
|
||||||
|
|
||||||
<body>
|
|
||||||
{{- 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**"
|
|
||||||
=== "Contenu"
|
|
||||||
```
|
|
||||||
{% raw %}
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<meta name="robots" content="index, follow" />
|
|
||||||
<title>{{ $.Site.Title }} - {{ .Title }}</title>
|
|
||||||
<link rel="icon" href="{{ $.Site.BaseURL }}{{ $.Site.Params.favicon }}" />
|
|
||||||
<meta name="description" content="{{ $.Site.Params.description }}" />
|
|
||||||
|
|
||||||
{{ hugo.Generator }}
|
|
||||||
<!-- CSS -->
|
|
||||||
{{ partial "styles.html" . }}
|
|
||||||
</head>
|
|
||||||
{% endraw %}
|
|
||||||
```
|
|
||||||
=== "Explication"
|
|
||||||
C'est ici qu'on placera notamment les informations de référencement **SEO**.
|
|
||||||
Entre double-accolades, on appelle des variables.
|
|
||||||
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**"
|
|
||||||
=== "Contenu"
|
|
||||||
```
|
|
||||||
{% 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"
|
|
||||||
Ici des classes CSS sont appellées (`header`, `header__title`, etc.).
|
|
||||||
Elles doivent être définies dans le fichier `assets/css/style.css`
|
|
||||||
|
|
||||||
|
|
||||||
#### Le CSS
|
|
||||||
|
|
||||||
??? note "**layouts/partials/styles.html**"
|
|
||||||
=== "Contenu"
|
|
||||||
```
|
|
||||||
{% 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"
|
|
||||||
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>`**
|
|
||||||
|
|
||||||
```
|
```
|
||||||
```
|
```
|
||||||
|
|||||||
@ -1,5 +1,15 @@
|
|||||||
# Guides pour Hugo
|
# Guides pour Hugo
|
||||||
|
|
||||||
- [Installer Hugo](install_hugo.md)
|
Ce guide vous permet de développer un site web avec Hugo.
|
||||||
- [Déployer un site web avec Hugo, à l'aide des templates](hugo_from_templates.md)
|
|
||||||
- [Déployer un site web avec Hugo, *from scratch*](hugo_from_scratch.md)
|
Vous réaliserez un site **from scratch** en suivant ces étapes :
|
||||||
|
- [Installer Hugo](install_hugo.md)
|
||||||
|
- [Créer le site web en local](create_website.md)
|
||||||
|
- [Déployer le site web](deploy_website.md)
|
||||||
|
- [Ajouter un menu et une page](add_menu.md)
|
||||||
|
- [Ajouter des sections](add_sections.md)
|
||||||
|
- [Ajouter une collection d'articles](add_list.md)
|
||||||
|
|
||||||
|
D'autres ressources pour aller plus loin :
|
||||||
|
- [Course on mikedane.com](https://www.mikedane.com/static-site-generators/hugo/)
|
||||||
|
- [Official doc](https://gohugo.io/documentation/)
|
||||||
@ -28,14 +28,4 @@ sudo dpkg -i hugo*_Linux-64bit.deb
|
|||||||
|
|
||||||
```
|
```
|
||||||
hugo --help
|
hugo --help
|
||||||
```
|
```
|
||||||
|
|
||||||
## Ressources
|
|
||||||
|
|
||||||
You can also follow these tutorials :
|
|
||||||
- [Utiliser des templates](hugo_from_templates.md)
|
|
||||||
- [Build a hugo website from scratch](hugo_from_scratch.md)
|
|
||||||
|
|
||||||
Or those great ressources online :
|
|
||||||
- [Course on mikedane.com](https://www.mikedane.com/static-site-generators/hugo/)
|
|
||||||
- [Official doc](https://gohugo.io/documentation/)
|
|
||||||
@ -149,7 +149,7 @@ Script à exécuter:
|
|||||||
!!! note "/etc/cron.daily/backup"
|
!!! note "/etc/cron.daily/backup"
|
||||||
```
|
```
|
||||||
#!/bin/bash
|
#!/bin/bash
|
||||||
rsync -ahv --update --delete --info=backup2,copy2,del2,name1,stats2 --log-file="/home/$USER/backup_log/backup.log.$(date +%Y-%m-%d)" /home/$USER/Documents/ -e 'ssh -p 43000 -i $KEY_PATH $USER@176.151.59.186:/home/$USER/Documents &
|
rsync -ahv --update --delete --info=backup2,copy2,del2,name1,stats2 --log-file="/home/$USER/backup_log/backup.log.$(date +%Y-%m-%d)" /home/$USER/Documents/ -e 'ssh -p 43000 -i $KEY_PATH $USER@176.151.59.186:/home/$USER/Documents'
|
||||||
```
|
```
|
||||||
|
|
||||||
N'oubliez pas de rendre le script exécutable:
|
N'oubliez pas de rendre le script exécutable:
|
||||||
|
|||||||
@ -102,8 +102,9 @@ nav:
|
|||||||
- "DevOps":
|
- "DevOps":
|
||||||
- divers/devops/index.md
|
- divers/devops/index.md
|
||||||
- "Hugo":
|
- "Hugo":
|
||||||
- "Guides Hugo": divers/devops/hugo/index.md
|
- "Hugo Website": divers/devops/hugo/index.md
|
||||||
- "Installer Hugo": divers/devops/hugo/install_hugo.md
|
- "Installer Hugo": divers/devops/hugo/install_hugo.md
|
||||||
|
- "Créer un site": divers/devops/hugo/create_website.md
|
||||||
- "Utiliser les templates": divers/devops/hugo/hugo_from_templates.md
|
- "Utiliser les templates": divers/devops/hugo/hugo_from_templates.md
|
||||||
- "*Build from scratch*": divers/devops/hugo/hugo_from_scratch.md
|
- "*Build from scratch*": divers/devops/hugo/hugo_from_scratch.md
|
||||||
- "Keycloak SSO":
|
- "Keycloak SSO":
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user
