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
|
||||
```
|
||||
|
||||
`````
|
||||
#awk -f {"substring"}
|
||||
|
||||
### EOT (End Of Transmission)
|
||||
#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 Arch Linux ](arch-install.md)
|
||||
- [ Installer Kodi multimedia player](kodi.md)
|
||||
- [ Faire passer les mises à jour automatiquement](autoupdate.md)
|
||||
|
||||
@ -9,13 +9,12 @@
|
||||
```
|
||||
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 install flatpak geany
|
||||
|
||||
# On quitte l'admin avec **CTRL + D**
|
||||
#### On quitte l'admin avec CTRL+D
|
||||
|
||||
|
||||
### 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
|
||||
mkdir games
|
||||
@ -35,12 +34,12 @@ cd games
|
||||
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
|
||||
2. cliquer sur Nouveau Projet
|
||||
|
||||
|
||||
## Cloner le projet sur son ordinateur
|
||||
#### Cloner le projet sur son ordinateur
|
||||
Revenir dans le terminal et écrire:
|
||||
```
|
||||
cd $MT
|
||||
@ -49,7 +48,7 @@ git clone https://gitlab.com/mon-pseudo/monprojet.git
|
||||
cd monprojet
|
||||
```
|
||||
|
||||
## Créer le fichier init.lua
|
||||
#### Créer le fichier 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)
|
||||
- [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
|
||||
|
||||
!!! important "**Dans ce tutoriel, vous devez remplacer <name-of-project\> par le nom de votre site, ex: info2000**"
|
||||
|
||||
|
||||
### 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
|
||||
|
||||
```
|
||||
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
|
||||
|
||||
- [Installer Hugo](install_hugo.md)
|
||||
- [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)
|
||||
Ce guide vous permet de développer un site web avec Hugo.
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
## 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"
|
||||
```
|
||||
#!/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:
|
||||
|
||||
@ -102,8 +102,9 @@ nav:
|
||||
- "DevOps":
|
||||
- divers/devops/index.md
|
||||
- "Hugo":
|
||||
- "Guides Hugo": divers/devops/hugo/index.md
|
||||
- "Hugo Website": divers/devops/hugo/index.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
|
||||
- "*Build from scratch*": divers/devops/hugo/hugo_from_scratch.md
|
||||
- "Keycloak SSO":
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user
