Skip to content

Commit 2547dd0

Browse files
committed
add mkdocs tutorial
1 parent 2f1ba32 commit 2547dd0

File tree

12 files changed

+402
-20
lines changed

12 files changed

+402
-20
lines changed
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
title: Deployment
3+
disquis: PythonBiellaGroup
4+
timetoread: true
5+
tags:
6+
- mdkocs
7+
---
8+
9+
Once we have completed the content of our site and tested its functionality locally, we need to make it visible to everyone for accessibility. To do this, we have several options:
10+
11+
## GitHub Pages
12+
13+
1. Host your MkDocs project on GitHub.
14+
2. Use the `mkdocs gh-deploy` command to build your documentation and upload it to the `gh-pages` branch of your GitHub repository.
15+
3. Your documentation will be automatically hosted on GitHub Pages at the address `https://username.github.io/repository`.
16+
17+
## Netlify
18+
19+
1. Connect your MkDocs project to a repository on a service like GitHub.
20+
2. Create a Netlify account and a new site, linking it to your repository.
21+
3. Configure the build settings in Netlify to run the `mkdocs build` command during the build process.
22+
4. Netlify will automatically publish and host your MkDocs site.
23+
24+
## Read the Docs
25+
26+
1. If your project is open source, you can use Read the Docs to automatically build and host your MkDocs documentation.
27+
2. Connect your project's repository to Read the Docs and configure the build settings.
28+
3. Every time you make changes in your repository, Read the Docs will automatically build and update your documentation.
29+
30+
## Manual Deployment
31+
32+
1. Build your MkDocs documentation using the `mkdocs build` command.
33+
2. Copy the generated files from the `site` directory to your web server.
34+
3. Configure your web server to serve the static files. For example, if you are using Apache or Nginx, configure a virtual host to point to the documentation directory.
35+
36+
## Docker
37+
38+
1. Build a Docker image containing your MkDocs documentation.
39+
2. Upload the Docker image to a container registry like Docker Hub.
40+
3. Deploy the Docker image on a container orchestration platform such as Kubernetes or Docker Swarm.
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
title: Deploy
3+
disquis: PythonBiellaGroup
4+
timetoread: true
5+
tags:
6+
- mdkocs
7+
---
8+
9+
Una volta che abbiamo completato il contenuto del nostro sito e abbiamo testato il suo funzionamento in locale dobbiamo renderlo visibile a tutti perchè sia consultabile.
10+
Per fare ciò abbiamo diverse possibilità:
11+
12+
## GitHub Pages
13+
14+
1. Ospita il tuo progetto MkDocs su GitHub.
15+
2. Usa il comando mkdocs gh-deploy per costruire la tua documentazione e caricarla sul ramo gh-pages del tuo repository GitHub.
16+
3. La tua documentazione sarà automaticamente ospitata su GitHub Pages all'indirizzo https://username.github.io.repository
17+
18+
## Netlify
19+
20+
1. Collega il tuo progetto MkDocs a un repository su un servizio come GitHub.
21+
2. Crea un account Netlify e crea un nuovo sito, collegandolo al tuo repository
22+
3. Configura le impostazioni di compilazione in Netlify per eseguire il comando mkdocs build durante il processo di compilazione.
23+
4. Netlify pubblicherà e ospiterà automaticamente il tuo sito MkDocs.
24+
25+
## Read the Docs
26+
27+
1. Se il tuo progetto è open source, puoi utilizzare Read the Docs per compilare e ospitare automaticamente la tua documentazione MkDocs.
28+
2. Collega il repository del tuo progetto a Read the Docs e configura le impostazioni di compilazione.
29+
3. Ogni volta che effettui modifiche nel tuo repository, Read the Docs compilerà automaticamente e aggiornerà la tua documentazione.
30+
31+
## Pubblicazione Manuale
32+
33+
1. Costruisci la tua documentazione MkDocs usando il comando mkdocs build.
34+
2. Copia i file generati dalla directory site sul tuo server web.
35+
3. Configura il tuo server web per servire i file statici. Ad esempio, se stai utilizzando Apache o Nginx, configura un virtual host per puntare alla directory della documentazione.
36+
37+
## Docker
38+
39+
1. Costruisci un'immagine Docker contenente la tua documentazione MkDocs.
40+
2. Carica l'immagine Docker in un registro dei container come Docker Hub.
41+
3. Distribuisci l'immagine Docker su una piattaforma di orchestrazione dei container come Kubernetes o Docker Swarm.
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
title: Extensions
3+
disquis: PythonBiellaGroup
4+
timetoread: true
5+
tags:
6+
- mdkocs
7+
---
8+
9+
In this section, you can find MkDocs extensions that we consider most useful for creating a truly comprehensive documentation site.
10+
11+
| Extension | Description | Link |
12+
| -------------- | ------------------------------------ | -------------------------------------------------- |
13+
| mkdocs-material | Feature-rich template compared to the basic mkdocs template | [mkdocs-material](https://squidfunk.github.io/mkdocs-material/) |
14+
| mkdocs-git-revision-date-localized-plugin | Inserts the last modification date at the bottom of the page based on the latest commit | [mkdocs-git-revision-date-localized-plugin](https://pypi.org/project/mkdocs-git-revision-date-localized-plugin/) |
15+
| mkdocs-jupyter | Renders a Jupyter notebook within a page, including any charts | [mkdocs-jupyter](https://github.com/danielfrg/mkdocs-jupyter) |
16+
| mkdocs-static-i18n | Supports your site in multiple languages | [mkdocs-static-i18n](https://github.com/ultrabug/mkdocs-static-i18n) |
17+
| mkdocs-autorefs | Allows linking to another page on the site without knowing the full path | [mkdocs-autorefs](https://pypi.org/project/mkdocs-autorefs/) |
18+
| neoteroi-mkdocs | Allows inserting graphical elements such as cards, timelines, and Gantt charts | [neoteroi-mkdocs](https://github.com/Neoteroi/mkdocs-plugins) |
19+
| mkdocs-timetoread-plugin | it allows you to add an indicative reading time for a page, ideal for those who want to create a website with articles or blog posts. | https://pypi.org/project/mkdocs-timetoread-plugin/ |
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
title: Estensioni
3+
disquis: PythonBiellaGroup
4+
timetoread: true
5+
tags:
6+
- mdkocs
7+
---
8+
9+
In questa sezione potete trovare le estensioni di mkdocs che sono secondo noi più utili per poter creare un sito documentale davvero completo.
10+
11+
| Estensione | Descrizione | Link|
12+
| ----------- | ------------------------------------ |-----------------|
13+
| mkdocs-material| template ricchissimo di funzionalità rispetto a mkdocs base| https://squidfunk.github.io/mkdocs-material/ |
14+
| mkdocs-git-revision-date-localized-plugin | permette di inserire a fondo pagina la data relativa all'ultima modifica sulla base dell'ultima commit effettuata| https://pypi.org/project/mkdocs-git-revision-date-localized-plugin/ |
15+
| mkdocs-jupyter | permette di renderizzare uno jupyter notebook all'interno di una pagina compresi eventuali grafici | https://github.com/danielfrg/mkdocs-jupyter |
16+
| mkdocs-static-i18n | consente di supportare il tuo sito in diverse lingue | https://github.com/ultrabug/mkdocs-static-i18n |
17+
|mkdocs-autorefs| permette di puntare ad un'altra pagina del sito senza conoscere il path completo | https://pypi.org/project/mkdocs-autorefs/ |
18+
| neoteroi-mkdocs | permette di inserire elementi grafici come cards, timelines e diagrammi di gantt| https://github.com/Neoteroi/mkdocs-plugins |
19+
| mkdocs-timetoread-plugin | permette di aggiungere un tempo di lettura indicativo per una pagina, ideale per chi vuole fare un sito con articoli o blog post | https://pypi.org/project/mkdocs-timetoread-plugin/ |
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
title: GitHub Pages
3+
disquis: PythonBiellaGroup
4+
timetoread: true
5+
tags:
6+
- mdkocs
7+
---
8+
9+
There are various hosting services to consider when hosting a website. In this tutorial, we will show you how to publish and host a site on **GitHub Pages**.
10+
11+
## What is GitHub Pages
12+
13+
GitHub Pages is a free web hosting service provided by GitHub. It allows users to publish static websites directly from a GitHub repository.
14+
Here are some features:
15+
16+
- Only static websites can be hosted.
17+
- The hosting service is free.
18+
- By default, a domain like https://username.github.io/my-project is set up, but you can configure a domain from another provider.
19+
20+
## Getting Started
21+
22+
1. Create your repository on GitHub.
23+
2. After creating your repository, ensure that the repository is public to use GitHub Pages. For those with a GitHub Enterprise subscription, it's possible to keep the repository private.
24+
25+
!!! note "tip"
26+
27+
To check if the repository is public, go to **Settings > Danger Zone > Change repository visibility.**
28+
29+
3. To publish on GitHub Pages, we use GitHub Actions, which allows building CI/CD pipelines from a YAML configuration file.
30+
31+
!!! note "tip"
32+
33+
Set this option in **Settings > Pages > Build and deployment > Source = GitHub Actions.**
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
title: Github Pages
3+
disquis: PythonBiellaGroup
4+
timetoread: true
5+
tags:
6+
- mdkocs
7+
---
8+
9+
Ci sono vari servizi di hosting che si possono valutare per ospitare un sito. In questo tutorial vi mostreremo come poter pubblicare e ospitare un sito su **Github Pages**.
10+
11+
## Cos'é Github Pages
12+
13+
GitHub Pages è un servizio di hosting web gratuito offerto da GitHub. Consente agli utenti di pubblicare siti web statici direttamente da una repository github.
14+
Ecco alcune caratteristiche:
15+
16+
- Possono essere hostati solo siti web statici.
17+
- Il servizio di hosting é gratuito
18+
- Di default viene impostato un dominio del tipo https://username.github.io/my-project ma é possibile impostare un dominio di un altro provider.
19+
20+
## Primi passi
21+
22+
1. Creare la propria repository su Github
23+
2. Dopo aver creato la propria repository é necessario assicurarsi che la repository sia pubblica per poter usufruire di Github Pages. Per chi possiede una sottoscrizione a github enterprise é possibile mantenere la repository privata.
24+
25+
!!! note "tip"
26+
27+
Per verificare che la repository sia pubblica andare su **Settings > Danger Zone > Change repository visibility.**
28+
29+
3. Per poter pubblicare su github Pages noi utilizziamo le github actions che permettono di costruire delle pipeline di CI/CD a partire da un file di configurazione YAML.
30+
31+
!!! note "tip"
32+
33+
Bisogna quindi impostare questa opzione in **Settings > Pages > Build and deployment > Source = Github Actions**
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: Intro
3+
disquis: PythonBiellaGroup
4+
timetoread: true
5+
tags:
6+
- mdkocs
7+
---
8+
9+
## What is MkDocs?
10+
11+
MkDocs is a documentation generation tool designed to simplify the process of creating documents for software projects, personal web pages, and more. With MkDocs, you can write documentation using the Markdown markup language, making the process of creating and maintaining documentation accessible even to those who are not familiar with more complex markup languages like HTML.
12+
13+
## Why Use MkDocs?
14+
15+
There are several reasons to choose MkDocs as a tool for documentation creation. Here are some of the main motivations:
16+
17+
1. **Ease of use**: MkDocs is based on the Markdown markup language, known for its simplicity and clarity. This makes the creation and maintenance of documentation accessible even to those who are not familiar with more complex markup languages like HTML.
18+
19+
2. **Speed in creation**: MkDocs simplifies the documentation creation process. With just a few commands, you can initialize a project, add new pages, and generate a complete documentation site. This allows you to focus more on content, reducing the time required for documentation creation.
20+
21+
3. **Professional and elegant appearance**: MkDocs generates documentation websites with a modern and elegant design. The clean appearance and intuitive navigation enhance the user experience, making the documentation more enjoyable to read and consult.
22+
23+
4. **Flexible configuration**: MkDocs offers many configuration options that allow you to customize the appearance and behavior of the documentation site. You can customize the theme, add navigation elements, and embed code snippets to tailor the documentation to the needs of your project.
24+
25+
5. **Large support community**: MkDocs has an active community and a plugin ecosystem that provides additional functionality. You can find support online, tutorials, and additional resources thanks to the community that continually contributes to the improvement of the MkDocs ecosystem.
26+
27+
## What Will We Cover?
28+
29+
In this tutorial, we will explore step by step how to use MkDocs to create clean and easily navigable documentation for your project. You can also use MkDocs to build a site for a community (as we did 😉).
30+
31+
* Introduction to MkDocs
32+
* Initializing the project
33+
* Creating documentation pages using Markdown.
34+
* Customizing the appearance of your documentation site.
35+
* Developing your site locally
36+
* Deploying your site
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: Intro
3+
disquis: PythonBiellaGroup
4+
timetoread: true
5+
tags:
6+
- mdkocs
7+
---
8+
9+
## Cos'é MkDocs?
10+
11+
MkDocs è uno strumento di generazione di documentazione progettato per semplificare il processo di creazione di documenti per progetti software, pagine web personali e altro ancora. Con MkDocs, è possibile scrivere la documentazione utilizzando il linguaggio di markup Markdown, rendendo il processo di creazione e manutenzione della documentazione accessibile anche a chi non è esperto di HTML o altri linguaggi di markup più complessi.
12+
13+
## Perchè utilizzare MkDocs?
14+
15+
Ci sono diverse ragioni per scegliere MkDocs come strumento per la creazione della documentazione. Ecco qualche esempio:
16+
17+
1. **Semplicità d'uso**: MkDocs si basa sul linguaggio di markup Markdown, che è noto per la sua semplicità e chiarezza. Questo rende la creazione e la manutenzione della documentazione accessibile anche a coloro che non hanno familiarità con linguaggi di markup più complessi come HTML.
18+
19+
2. **Rapidità nella creazione**: MkDocs semplifica il processo di creazione della documentazione. Con pochi comandi, è possibile inizializzare un progetto, aggiungere nuove pagine e generare un sito di documentazione completo. Ciò consente di concentrarsi maggiormente sul contenuto, riducendo il tempo necessario per la creazione della documentazione.
20+
21+
3. **Aspetto professionale ed elegante**: MkDocs genera siti web di documentazione con un design moderno ed elegante. L'aspetto pulito e la navigazione intuitiva migliorano l'esperienza dell'utente, rendendo la documentazione più piacevole da leggere e consultare.
22+
23+
4. **Configurazione flessibile**: MkDocs offre molte opzioni di configurazione che consentono di personalizzare l'aspetto e il comportamento del sito di documentazione. Puoi personalizzare il tema, aggiungere elementi di navigazione e incorporare snippet di codice per adattare la documentazione alle esigenze del tuo progetto.
24+
25+
5. **Ampia community**: MkDocs gode di una comunità attiva e di un ecosistema di plugin che offre ulteriori funzionalità. Puoi trovare supporto online, tutorial, e risorse aggiuntive grazie alla comunità che contribuisce continuamente al miglioramento dell'ecosistema MkDocs.
26+
27+
## Cosa vedremo?
28+
29+
In questo tutorial, esploreremo passo dopo passo come utilizzare MkDocs per creare una documentazione pulita e facilmente navigabile per il tuo progetto. Puoi usare Mkdocs anche per poter realizzare un sito per una community (come abbiamo fatto noi 😉)
30+
31+
* Introduzione a MkDocs
32+
* Inizializzare il progetto
33+
* Creare pagine di documentazione utilizzando il Markdown.
34+
* Personalizzare l'aspetto del tuo sito di documentazione.
35+
* Sviluppare il tuo sito in locale
36+
* Deployare il tuo sito
Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
title: Setup
3+
disquis: PythonBiellaGroup
4+
timetoread: true
5+
tags:
6+
- mdkocs
7+
---
8+
9+
## Installation
10+
11+
You can install MkDocs like any other Python library, but it is advisable to use a dependency manager such as PDM or Poetry.
12+
13+
```shell
14+
poetry add mkdocs
15+
```
16+
In addition to the basic installation of MkDocs, you can use various templates that enhance the configuration and initial layout of MkDocs. The library we prefer and recommend is MkDocs Material, which is among the most widely used and appreciated. We will explore some of the features it provides in this tutorial.
17+
18+
```shell
19+
poetry add mkdocs-material
20+
```
21+
22+
With MkDocs, you have the option to enhance functionality with numerous interesting and highly useful extensions, providing a better user experience.
23+
24+
## Initialization
25+
26+
Once you have finished developing your code, you can run this command:
27+
28+
```shell
29+
poetry mkdocs new .
30+
```
31+
32+
The result of this instruction is the creation of:
33+
34+
- **docs folder**: In this folder, you can place all the Markdown files that will constitute the documentation.
35+
- **mkdocs.yml**: It is the main configuration file of MkDocs where you set all the properties of the documentation site.
36+
37+
## mkdocs.yml
38+
39+
This file is the most important in MkDocs and provides all the information needed to create and customize the final site.
40+
41+
Here are some of the main sections:
42+
43+
| Section | Attributes | Description |
44+
|-----------------------|----------------------------------------------------------|-----------------------------------------------|
45+
| project information | site_name, site_url, author, site_description | Basic information for the site |
46+
| repo information | repo_name, repo_url | It is possible to link the repository to the site, allowing visitors to view the source code |
47+
| nav | -- | Defines the site's tree structure; it can be built on multiple levels |
48+
| extra css | extra_css | It is possible to extend certain aspects of the site with custom CSS |
49+
| theme | -- | Properties of the chosen theme; in our case, mkdocs-material |
50+
| markdown_extensions | -- | Here we can specify the properties of our Markdown that will determine the layout of individual pages within the site |
51+
| plugins | -- | In this section, we specify all the plugins we have installed with the options required for each |
52+
| extra | analytics, social, consent, alternate | In this section, we can specify additional functionalities for our site, including: linking to Google Analytics, social links in the footer of the site, consent to use cookies, and a switcher for multilingual sites |
53+
54+
## Run locally
55+
After compiling the mkdocs.yml file and creating the Markdown files inside the docs folder, you can check the final result locally by running:
56+
57+
```shell
58+
poetry run mkdocs serve
59+
```
60+
61+
MkDocs will generate all artifacts in the **site** folder and make the site available at **http://127.0.0.1:8000/**.
62+

0 commit comments

Comments
 (0)