--- title: "Documentation Contributions" description: "Information on contributing documentation to the Authelia project." lead: "Authelia has great documentation however there are always things that can be added. This section describes the contribution process for the documentation even though it's incredibly easy." date: 2022-06-15T17:51:47+10:00 draft: false images: [] menu: contributing: parent: "prologue" weight: 130 toc: true alias: - /contributing/prologue/documentation --- ## Introduction The website is built on [Hugo] using the [Doks] theme. [Hugo] is a powerful website building tool which allows several simple workflows for developers as well as numerous handy features like [Shortcodes] which allow building reusable parameterized sections of content. ## Making a Change Anyone can simply edit the [Markdown] of the relevant document which shares a path with the website URL under the [docs folder on GitHub]. In most if not all pages there is a link included at the very bottom which links directly to the [Markdown] file responsible for the document. ## Viewing Changes It's relatively easy to run the __Authelia__ website locally to test out the changes you've made. ### Requirements * [git] *(though this can be skipped if you just download the repository)* * [Node.js] and npm *(bundled with [Node.js])* ### Directions The following steps will allow you to run the website on the localhost and view it live in your browser: 1. Run the following commands: ```bash git clone https://github.com/authelia/authelia.git cd authelia/docs npm run install npm run start ``` 2. Visit [http://localhost:1313/](http://localhost:1313/) in your browser. 3. Modify pages to see the effects live in your browser. ## Front Matter Most documents come with a front matter that looks similar to this: ```yaml --- title: "A Page Title" description: "This is a description of the page." lead: "This is a page lead." date: 2022-03-19T04:53:05+00:00 draft: false menu: development: parent: "prologue" weight: 100 toc: true --- ``` The front matter controls several aspects about how the page is displayed and varying other aspects. ### Open Graph Protocol First of all it's important to understand the [Open Graph Protocol]. This is a protocol developed by Meta / Facebook which is utilized by most social media platforms to display a preview of a website. This is done by customizing special HTML `` tags. ### Fields This section documents each of the fields that we commonly use. #### title String. Configures the `