Initial commit

2025-05-09 10:37:43 +02:00 · 2025-05-09 10:37:43 +02:00 · 4e10967600
commit 4e10967600
40 changed files with 1650 additions and 0 deletions
--- a/content/tutorials/_index.md
+++ b/content/tutorials/_index.md
@ -0,0 +1,21 @@
+++
+title = 'Tutorials'
+weight = 2
+++
+
+{{< warning >}}
+The tutorials are under construction and are incomplete.
+{{< /warning >}}
+
+These tutorials will help you learn how to create your websites with this theme, especially
+if you've never used Hugo before!
+
+They don't assume you know anything about Hugo and are made to teach you everything you'll need
+to know from scratch.
+
+Hugo has its [own tutorials](https://gohugo.io/getting-started/), but they are more general
+than Silicate's ones and asume you are a software developer -- they can be overwhelming.
+
+Unlike what the Hugo tutorials tells you, no, you don't need Git -- no, you don't to be comfortable with the command line (although you will use it a little)! 
+
+Silicate's tutorials try to remain as simple as possible.
--- a/content/tutorials/getting-started/_index.md
+++ b/content/tutorials/getting-started/_index.md
@ -0,0 +1,11 @@
+++
+title = 'Getting started'
+weight = 10
+++
+
+Alright! The goal is to have a very simple website that shows a simple webcomic.
+
+This section is there to understand how Silicate and Hugo work!
+
+This tutorial will use comic pages from [Pepper & Carrot](https://www.peppercarrot.com/fr/) by David Revoy
+but if you already have your own comic pages, you can use them too!
--- a/content/tutorials/getting-started/adding-about.md
+++ b/content/tutorials/getting-started/adding-about.md
@ -0,0 +1,125 @@
+++
+title = 'Adding an About page'
+show_toc = true
+weight = 40
+++
+
+{{< warning >}}
+Page under redaction.
+{{< /warning >}}
+
+For the finishing touch, let's add an "About" page to talk a bit about your webcomic.
+
+Once again, this will be a page under the `content/` folder.
+
+<!--more-->
+
+
+## What is and is not a *comic* page
+
+Hugo knows the type of a page by looking at the *first* folder after `content/`.
+For example, `content/comic/E01P01/` is a `comic` page.
+
+The type can be anything, so `content/animal/insect/ant/` would be of type `animal`.
+But Silicate doesn't not know what to do with that type, so it will a "normal" or "default" page.
+
+So, simply put: anything under `content/comic/` will be a comic page, and everything
+*outside* will be a "normal" page.
+
+
+## Creating the About page
+
+Here's the twist: since we don't care about type for the "about" page, we don't
+need a folder.
+
+Just like `index.md`, create a `content/about.md` text file.
+
+Then, you just need to add a front matter and some content! In the case of the Pepper & Carrot demo:
+
+```
+++
+title = 'About'
+++
+
+### Silicate Pepper & Carrot demo
+
+This website is a demo for Silicate using [Pepper & Carrot webcomic](https://www.peppercarrot.com/)
+comic pages as an example.
+
+### Browse the source
+
+You can see the source used to create this website here :
+<https://silicate.aribaud.net/demos-sources/pepper-carrot>
+
+### Check out Silicate
+
+You can learn more about Silicate on its main website:
+<https://silicate.aribaud.net/>
+```
+
+Now, you can navigate to `https://localhost:1313/about/` and you should see the about page:
+
+{{< warning >}}
+Screenshot will be added soon.
+{{< /warning >}}
+
+Unlike the comic pages, we have no folder with a `index.md` file, directly a `.md` file because we
+need no other resources. This is what Hugo calls a "regular page", as opposed to a "page bundle" like before.
+
+## Adding the About page to the header navigation bar
+
+Right now the header navigation bar only shows "Home" and "Archive"; we want to add our new "About" page to it.
+
+The header is configured through `hugo.toml`.
+Since nothing is set yet for the main menu, it uses defaults values from `themes/silicate/hugo.toml`.
+
+First, let's open `themes/silicate/hugo.toml` and copy-paste the whole `[menus]` table into
+our own `hugo.toml`.
+
+We should have something like this now:
+
+```
+title = 'Silicate Pepper & Carrot Demo'
+baseURL = 'https://silicate.aribaud.net/demos/pepper-carrot/'
+theme = 'silicate'
+copyright = 'Demo based on Pepper & Carrot - CC-By www.peppercarrot.com'
+
+[menus]
+  [[menus.main]]
+    name = 'Home'
+    pageRef = '/'
+    weight = 10
+
+  [[menus.main]]
+    name = 'Archive'
+    pageRef = '/comic'
+    weight = 20
+
+[params]
+  [params.author]
+    email = 'jdoe@example.org'
+    name = 'John Doe'
+```
+
+Now, we can add our own About page entry inside the `[menus]` table:
+
+```
+[[menus.main]]
+  name = 'About'
+  pageRef = '/about'
+  weight = 30
+```
+
+* `name` is what is displayed in the nav
+* `pageRef` is what page should be displayed, relative to the
+  `content/` folder
+* `weight` is the sorting order just like we saw for pages
+
+Be careful, we need `[[menus.main]]` and **not** `[menus.main]`.
+
+Now, if we look at the home page, we should have a working `About` link
+leading to the corresponding page!:
+
+{{< warning >}}
+Screenshot will be added soon.
+{{< /warning >}}
--- a/content/tutorials/getting-started/basic-configuration.md
+++ b/content/tutorials/getting-started/basic-configuration.md
@ -0,0 +1,114 @@
+++
+title = 'Basic configuration'
+show_toc = true
+weight = 20
+++
+
+{{< warning >}}
+Page under construction.
+{{< /warning >}}
+
+Still a bit boring, but let's add some more information about your webcomic into `hugo.toml`!
+
+Except for the title, all of them are optional.
+
+Be sure that you are currently [running the hugo server]({{% relref "tutorials/getting-started/site-creation" %}}#starting-your-site)!
+
+<!--more-->
+
+
+## Title
+
+First, let's fix your site's title by changing `title = 'My New Hugo Site'` with
+`title = 'Silicate Pepper & Carrot Demo'` -- or your own title -- then save.
+
+Now, two things should happen if Hugo is still running :
+
+- Some new lines should appear in your terminal, they should look like this :
+
+```
+Change of config file detected, rebuilding site (#2).
+2025-05-14 13:43:16.453 +0200
+Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
+Total in 11 ms
+```
+
+- If your broswer is still open, then the page should have automatically reloaded and the title should be fixed!
+
+{{< warning >}}
+Screenshot will be added soon.
+{{< /warning >}}
+
+That is because when Hugo is running, it automatically checks for changes in your files, and when it finds some, it
+updates the website in your browser.
+
+That is what the `Watching for changes in [...]` and
+`Watching for config changes in [...]` lines meant when you ran `hugo server`.
+
+Sometimes, the auto-reloading will fail and you will get `[ERROR]: ...` messages and Hugo
+won't be able to work again on its own. If that happens, try to stop the server by typing
+`ctrl`-`c` in the terminal then running again the `./hugo server` command.
+
+If that doesn't work, then you may have to check your configuration files.
+Hugo should display a message telling you what it thinks it wrong.
+
+
+## Copyright
+
+As you may have seen, Silicate puts a default copyright on your website:
+
+`Copyright 2025. All rights reserved.`
+
+You may want to change that. Here, since we're doing a demo from Pepper & Carrot's, let's put a proper attribution.
+Once again, it's a new line inside `hugo.toml` : `copyright = 'Demo based on Pepper & Carrot - CC-By www.peppercarrot.com'`.
+
+It will be both shown on the website and in RSS feeds.
+
+{{< warning >}}
+Screenshot will be added soon.
+{{< /warning >}}
+
+
+## Author info
+
+This setting is only used in the RSS feeds.
+
+This time, we need to add [*tables*](https://toml.io/en/v1.0.0#table) inside `hugo.toml`.
+Add the following lines, using your own info:
+
+```
+[params]
+  [params.author]
+    email = 'jdoe@example.org'
+    name = 'John Doe'
+```
+
+`[params]` is the table where most configurations for hugo will be placed.
+
+`[params.author]` is a sub-table table inside `[params]`.
+
+
+## Base URL
+
+The base URL is the URL where your website will be available online -- where people will be able to access it.
+For example, if you rent `www.my-webcomic.com`, then your base URL will most likely be `https://www.my-webcomic.com/`.
+
+In the case of Silicate, one of the demo uses `https://silicate.aribaud.net/demos/pepper-carrot/`, so we
+can change the value of `baseURL` in `hugo.toml` like this: `baseURL = 'https://silicate.aribaud.net/demos/pepper-carrot/'`.
+
+
+## Recap
+
+Your `hugo.toml` file should now look like this :
+
+```
+title = 'Silicate Pepper & Carrot Demo'
+baseURL = 'https://silicate.aribaud.net/demos/pepper-carrot/'
+theme = 'silicate'
+copyright = 'Demo based on Pepper & Carrot - CC-By www.peppercarrot.com'
+
+[params]
+  [params.author]
+    email = 'jdoe@example.org'
+    name = 'John Doe'
+```
--- a/content/tutorials/getting-started/new-comic-and-pages/index.md
+++ b/content/tutorials/getting-started/new-comic-and-pages/index.md
@ -0,0 +1,230 @@
+++
+title = 'Adding a comic and comic pages'
+show_toc = true
+weight = 30
+++
+
+{{< warning >}}
+Page under redaction.
+{{< /warning >}}
+
+Ok! We have a blank site with Silicate installed!
+
+Now, we can start the insteresting part: adding actual comic pages!
+
+For this tutorial, we'll use [Pepper & Carrot](https://www.peppercarrot.com/) pages.
+
+This guide has a premade archive with everything you'll need.
+You can download it as a [tar.gz]() archive for Linux/Mac or a [zip]() for Windows.
+
+{{< warning >}}
+Archives will be created soon.
+{{< /warning >}}
+
+But if you have your own comic already, you can use your it too!
+
+
+<!--more-->
+
+## Setting up the comic
+
+First off, let's create a `comic/` folder in `my_website/content/`.
+It will be where all comic pages will go.
+
+{{< warning >}}
+Information on how to set the comic title and description will be added soon.
+{{< /warning >}}
+
+
+## Adding a new comic page
+
+Now we'll add page 01 from episode 01 from Pepper & Carrot!
+
+Create a `E01P01/` folder inside `comic/`. If you use your own webcomic,
+you can use your own page title as a folder name (just avoid spaces and specials characters
+because this folder name will be used as a URL for this page).
+
+Then create a text file named `index.md` (If you are on Windows, make sure the file created isn't
+`index.md.txt`; Windows likes to hide file extensions from you may need to force windows to display them).
+
+This `index.md` file tells Hugo that the `E01P01` folder is a page and that all other
+files inside this folder belong to this page. This is what Hugo calls a "Page Bundle".
+
+### Post content
+
+Most webcomics will have a small "blog" post associated with a page -- a description,
+some lore, etc.
+
+You can do this by adding the post content to `index.md`.
+
+Here, for example, we can add the credit of the first Pepper & Carrot page :
+
+```
+++
+title = 'Episode 1 - Page 1'
+weight = 10
+++
+
+Creative Commons Attribution 4.0 International license
+
+------
+
+Attribution to:
+
+Art: David Revoy.
+
+Scenario: David Revoy.
+
+English (original version)
+
+Proofreading: Amireeti, Alex Gryson.
+
+------
+
+Credit for the universe of Pepper&Carrot, Hereva:
+
+Creation: David Revoy.
+
+Lead Maintainer: Craig Maloney.
+
+Writers: Craig Maloney, Nicolas Artance, Scribblemaniac, Valvin.
+
+Correctors: Alex Gryson, CGand, Hali, Marno van der Maas, Moini, Willem Sonke.
+```
+
+This content uses the [Markdown](https://daringfireball.net/projects/markdown/) syntax,
+so you can have some simple styling, like *\*italic text\**, **\*\*bold text\*\***, etc.
+
+{{< warning >}}
+Full description of Markdown possibilities will be added later.
+{{< /warning >}}
+
+> What is the weird text block with the "+++"?
+
+This block is called a [*front matter*](https://gohugo.io/content-management/front-matter/#article),
+it is used to add attributes to the page, such as its title.
+
+The `weight` attribute will be explained in [Page ordering](#page-ordering).
+
+
+### Comic pictures
+
+Now, all we need are pictures for the comic page.
+
+Create a `strips/` folder inside `E01P01/`
+
+Get the `pages/E01P01.jpg` file from the resources you downloaded -- or your
+own comic page -- and add it inside the `strips/` folder.
+
+You should now have this (and some other files and/or folders) :
+
+```
+my_webcomic/
+    hugo.toml
+    content/
+        comic/
+            E01P01/
+                index.md
+                strips/
+                    E01P01.jpg
+```
+
+If your [website is running]({{% relref "tutorials/getting-started/site-creation" %}}#starting-your-site),
+then the home page should display the page you just added like so!:
+
+{{< warning >}}
+Screenshot will be added soon.
+{{< /warning >}}
+
+Also, you can add multiple pictures inside `strips/`, Silicate will look for everything that is
+a PNG, JPG or WEBP. On the website, they'll be ordered top to bottom by name, so you can make
+a Webtoon-style long comic strip from many smaller strips.
+
+### Page ordering
+
+Page ordering is important, and can get tricky.
+
+Imagine you have a naming convention for your pages like so: `P1`, `P2`, ..., `P10`, `P11`, ...
+
+If you order them by name, then you have a trouble, because they'll get ordered like so:
+
+1. P1
+2. P10
+3. P11
+3. P2
+4. ...
+
+It gets even worse if your pages have an actual name and no naming convention.
+
+> Wait! Why not use a creation or publication date?
+
+We could use a publication date, but imagine you want to add a new page between two others.
+We now have *another* problem because you either can't or have to lie about the date to make it work.
+
+That's why Silicate relies only on ...
+
+#### Weight
+
+The way Silicate handles ordering is by using the [*weight*](https://gohugo.io/methods/page/weight/#article) of the page.
+
+You can see it like this: pages with a small weight floats up to the top and are first, pages with a big
+weight sink to the bottom and are last.
+
+![Weight schema](weight_schema.png)
+
+You can set the weight with the line `weight = ...` in the front matter. It **has** to be a positive whole
+number, things like `4.7` and `-1` won't work.
+
+#### Best practice
+
+What you should probably do is this:
+
+- Page 1 gets a weight of 10
+- Page 2 gets a weight of 20
+- ...
+- Page 50 gets a weight of 500
+
+Why? Because starting at 10 then incrementing the weight by 10 each time lets you insert up to nine
+pages before or after any page, should the need arise.
+
+
+> Won't I run out of values? My webcomic is very long.
+
+Even if you have a *lot* of pages -- say 4000 -- you would use
+a weight of 40 000, which is _**way**_ below the maximum (which is at least *2 147 483 647*).
+
+
+### Page creation date
+
+If you want, you can set a [creation date](https://gohugo.io/content-management/front-matter/#date) for the page.
+It will be displayed on the website under the page title.
+
+You can add a `date='...'` field in the front matter.
+The date format can be [multiple things](https://gohugo.io/content-management/front-matter/#dates).
+
+Let's say the date of the page we just created was 9H35 the 2025 / May / 31, then the value to add is :
+
+`date = '2025-05-31T09:35:00'`
+
+(If we care only about the day, then we can add: `date = '2025-05-31'`)
+
+Now, the page should be displayed with a creation date under its title!:
+
+{{< warning >}}
+Screenshot will be added soon.
+{{< /warning >}}
+
+## Recap
+
+Now you have most of what you need to have a simple webcomic!
+
+You can just keep adding new pages!
+
+Here's what to remember:
+
+* Website configuraiton is in `hugo.toml`.
+* Comic pages go inside `content/comic/`.
+* Comic pages are folders with an `index.md` file.
+* Comic page pictures go into a `strips/` sub-folder.
+* `index.md` has a *front matter* to set its title, ordering and creation date.
+* Ordering is done through weights. Light/Small = first, heavy/big = last.
--- a/content/tutorials/getting-started/new-comic-and-pages/weight_schema.png
+++ b/content/tutorials/getting-started/new-comic-and-pages/weight_schema.png
--- a/content/tutorials/getting-started/site-creation/index.md
+++ b/content/tutorials/getting-started/site-creation/index.md
@ -0,0 +1,213 @@
+++
+title = 'Creating a new site'
+show_toc = true
+weight = 10
+++
+
+The first step to get started is to install Hugo and Silicate then create
+a blank website!
+
+Let's be honest: this will be the most **boring** part of the guides: it's
+the most technical one and is mostly settings things up.
+
+You will have to use the terminal a bit, but it's easy, you'll see!
+
+<!--more-->
+
+## Creating a workspace and getting Hugo
+
+On your computer, create a folder where you'll work on your Hugo websites.
+For the rest of the guide, it will be named `hugo_workspace/`.
+
+Then you need to get Hugo itself. Hugo is a single executable file, it
+requires no installation, only that you download it.
+
+Hugo has its [own guide](https://gohugo.io/installation/) on how to install it, but
+this tutorial will give you a simpler version.
+
+Go to the [Hugo release page](https://github.com/gohugoio/hugo/releases/latest).
+Unfold the "Assets" section. From it, you can download Hugo based on your
+OS :
+   
+* Linux: download the `hugo_extended_X.XXX.X_linux-64bit.tar.gz` file
+* Mac: download the `hugo_extended_X.XXX.X_darwin-universal.tar.gz` file
+* Windows: download the `hugo_extended_X.XXX.X_windows-amd64.zip` file
+
+Once downloaded, extract the `hugo` executable (`hugo.exe` for Windows) from the archive into `hugo_workspace/`
+
+Now you'll need a terminal, also known as "shell", "command line" or "CLI" -- basically a text window to
+send instructions to your computer:
+
+* Linux: It varies from OS to OS, but you should be able to open one by searching "Terminal" in your applications
+* MacOS: [Click on the Launchpad icon then search and click on "Terminal"](https://support.apple.com/en-ca/guide/terminal/apd5265185d-f365-44cb-8b09-71a064a42125/mac)
+   * You can also navigate to `/Applications/Utilities` and double click on `Terminal`
+* Windows: Click on the Windows icon then search and click on "Command Prompt"
+
+Regardless of you OS, you should have a window open that you can type commands into then
+press enter to run them.
+
+First, we need to tell the terminal we want to run commands from the `hugo_workspace/` directory.
+
+Get the complete (also known as absolute) path of your `hugo_workspace/` folder.
+You can do that by navigating inside this folder with your file explorer then clicking
+on the path shown on the top then copying it.
+
+Then, in the terminal, type the following, replacing `<path to hugo workspace>` with the one you just copied:
+
+* Linux & Mac & Windows: Type `cd <path to hugo workspace>` then press enter
+   * `cd` stands for "Change Directory"!
+
+Now, to see if everything is working, you can type `./hugo version` (`hugo.exe version` for Windows) then press enter.
+
+If everything is OK, you should see a line like this :
+
+```
+hugo v0.147.2-[...] VendorInfo=gohugoio
+```
+   
+----------
+   
+## Creating a site
+
+With the terminal open in the `hugo_workspace/` folder, run the command :
+
+* Linux & Mac: `./hugo new site my_webcomic`
+* Windows: `hugo.exe new site my_webcomic`
+
+If everything went right, hugo should show you something similar to this:
+
+```
+Congratulations! Your new Hugo site was created in /.../hugo_workspace/my_webcomic.
+
+Just a few more steps...
+
+1. Change the current directory to /.../hugo_workspace/my_webcomic.
+2. Create or install a theme:
+   - Create a new theme with the command "hugo new theme <THEMENAME>"
+   - Or, install a theme from https://themes.gohugo.io/
+3. Edit hugo.toml, setting the "theme" property to the theme name.
+4. Create new content with the command "hugo new content <SECTIONNAME>/<FILENAME>.<FORMAT>".
+5. Start the embedded web server with the command "hugo server --buildDrafts".
+
+See documentation at https://gohugo.io/.
+```
+
+Hugo just created a new `my_webcomic/` folder inside `hugo_workspace/`. That's where Hugo will
+look for everything it needs to create your website!
+
+Inside `hugo_workspace/my_webcomic/`, you should now have the following folders and files:
+
+* `archetypes/`
+* `assets/`
+* `content/`
+* `data/`
+* `i18n/`
+* `layouts/`
+* `resources/`
+* `static/`
+* `themes/`
+* `hugo.toml`
+
+You don't need to worry about each and every one of them, they will be explained when -- and only if -- nedeed.
+
+Like Hugo said in its output, you can change the directory to this new one in the Terminal :
+
+* Linux & Mac & Windows: Type `cd my_webcomic` then press the enter key.
+
+Move the `hugo` / `hugo.exe` executable directly into the `my_webcomic/` folder using
+your file explorer.
+It will make things simpler.
+
+----------
+
+## Installing the Silicate theme
+
+The first thing we need is a theme -- Hugo doesn't know how to create your website
+without one.
+
+All themes go into the `themes/` folder of a Hugo website.
+
+First, [download the Silicate theme](), then extract it into `my_webcomic/themes/`.
+
+{{< warning >}}
+Downloads will be available when version 1 of Silicate is ready.
+{{< /warning >}}
+
+Now, you should have a `my_webcomic/themes/silicate` folder, but Hugo doesn't
+know that it should use that theme. You can let it know by changing your
+website configuration.
+
+Most of a Hugo website configuration is in the `hugo.toml` file.
+
+It's a simple text file using the [TOML format](https://toml.io/en/). Right now, it should look like this:
+
+```
+baseURL = 'https://example.org/'
+languageCode = 'en-us'
+title = 'My New Hugo Site'
+```
+
+We'll look at `hugo.toml` and how to fully use it later. For now, just add `theme = 'silicate'`
+at the end of the file.
+
+Be careful about the `'` around "silicate", they are necessary!
+
+And with that done, your website is set up to use Silicate! Now, you only need to do one final check.
+
+----------
+
+## Starting your site
+
+With the terminal opened in `my_website/`, type `./hugo server` (`hugo.exe server` on Windows) then press the enter key.
+
+Hugo should say something close to this :
+
+```
+Watching for changes in /<...>/hugo_workspace/my_webcomic/{archetypes,assets,content,data,i18n,layouts,static,themes}
+Watching for config changes in /<...>/hugo_workspace/my_webcomic/hugo.toml, /<...>/hugo_workspace/my_webcomic/themes/silicate/hugo.toml
+Start building sites … 
+hugo v0.147.2-c7feb15d10b29a94d7fb57c31e8bcb2e92718fb7+extended linux/amd64 BuildDate=2025-05-06T11:18:55Z VendorInfo=gohugoio
+
+
+                   | EN  
+-------------------+-----
+  Pages            |  7  
+  Paginator pages  |  0  
+  Non-page files   |  0  
+  Static files     |  1  
+  Processed images |  0  
+  Aliases          |  0  
+  Cleaned          |  0  
+
+Built in 48 ms
+Environment: "development"
+Serving pages from disk
+Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
+Web Server is available at http://localhost:1313/ (bind address 127.0.0.1) 
+Press Ctrl+C to stop
+```
+
+Hugo  actually did two separate things :
+
+* It created your entire website and put it into the `my_webcomic/public/` folder
+* It is now running a small web server so you can browse this website
+
+Keep the terminal open! If you close it, then the web server will close too.
+
+Open your web browser and go to the URL Hugo gave you in the
+`Web Server is available at XXX` line (for this example, `http://localhost:1313`).
+
+You should see the following page :
+
+![Newly created site screenshot](new_silicate_site.jpg)
+
+If you do, then you are done, the new site is created!
+
+Just so you know, only you can acess your website for now!:
+
+* `localhost` / `127.0.0.1` is a special internet address, it's your own computer
+  * By saying `(bind address 127.0.0.1)`, Hugo means "Only let 127.0.0.1 -- that is this computer -- access the website".
+* `:1313` (or the other number Hugo gave you) is a [port number](https://en.wikipedia.org/wiki/Port_(computer_networking)). If multiple servers runs at once, they would each have a different port.
+  * To put it simply: if your computer was a street, then this port would be an street number.
+
+You can stop this server at any time by pressing `Ctrl`+`C` in the terminal or by closing the terminal window.
--- a/content/tutorials/getting-started/site-creation/new_silicate_site.jpg
+++ b/content/tutorials/getting-started/site-creation/new_silicate_site.jpg
--- a/content/tutorials/more-features/_index.md
+++ b/content/tutorials/more-features/_index.md
@ -0,0 +1,18 @@
+++
+title = 'More features'
+weight = 20
+++
+
+{{< warning >}}
+Most tutorials in this section are still empty but are there regardless
+to show you what kind of content to expect once they are done.
+{{< /warning >}}
+
+Let's look at some of the functionalities Silicate provides.
+
+You should read [Getting started]({{% relref "tutorials/getting-started/" %}}) first!
+
+And if you are fine with how your website looks already, you can skip to
+[publishing your website]({{% relRef "tutorials/publishing-online" %}}).
+
+We'll continue using [Pepper & Carrot](https://www.peppercarrot.com/fr/) by David Revoy as an example.
--- a/content/tutorials/more-features/adding-translations.md
+++ b/content/tutorials/more-features/adding-translations.md
@ -0,0 +1,28 @@
+++
+title = 'Adding translations'
+show_toc = true
+weight = 30
+++
+
+{{< warning >}}
+Currently under construction.
+{{< /warning >}}
+
+<!--more-->
+
+## Configuration for multiple languages
+
+{{< warning >}}
+Currently under construction.
+{{< /warning >}}
+
+## Translating the website
+{{< warning >}}
+Currently under construction.
+{{< /warning >}}
+
+## Translating pages
+
+{{< warning >}}
+Currently under construction.
+{{< /warning >}}
--- a/content/tutorials/more-features/built-in-features.md
+++ b/content/tutorials/more-features/built-in-features.md
@ -0,0 +1,71 @@
+++
+title = 'Silicate configurations'
+show_toc = true
+weight = 20
+++
+
+{{< warning >}}
+Currently under construction.
+
+Screenshot will be added to show the result of possible configurations.
+{{< /warning >}}
+
+Silicate has built-in feature that you can configure from
+your `hugo.toml` file.
+
+Most of them are described in the `themes/silicate/hugo.toml` file as
+well. You should have a look here to see how they are organised.
+
+All these configurations go into the `params.silicate` table, so
+if you don't have one already, you can copy the one from
+`themes/silicate/hugo.toml` or add the following to your config:
+
+```
+[params]
+    ...
+    [params.silicate]
+        # All configuration will go here
+```
+
+<!--more-->
+
+## Global features
+
+### Disabling Silicate branding
+
+If you want to remove the "Made with the Silicate Framework!" message
+at the bottom of pages, you can simply do so by adding the following configuration:
+
+`show_notice = false`
+
+## Comic pages features
+
+All comic pages configurations go into the `params.silicate.pages` table, like so:
+
+```
+[params]
+    ...
+    [params.silicate]
+        ...
+        [params.silicate.pages]
+            # All pages configuration will go here
+```
+
+### Navbar location
+
+By default, Silicate will render a navigation bar below and above
+the comic's strips.
+
+If you want the nav bar to be only below the comic's strips, you can
+add the following configuration:
+
+`nav_above_page = false`
+
+### Chapter navigation
+
+By default, if you [group your pages into chapters]({{% relRef "tutorials/more-features/chapters-and-acts" %}}),
+Silicate will add a button to navigate to the previous and next chapter of the current page.
+
+If you want to disable that, you can add the following configuration:
+
+`show_chapter_nav = false`
--- a/content/tutorials/more-features/chapters-and-acts.md
+++ b/content/tutorials/more-features/chapters-and-acts.md
@ -0,0 +1,29 @@
+++
+title = 'Grouping pages into chapters, acts, etc.'
+show_toc = true
+weight = 10
+++
+
+{{< warning >}}
+Currently under construction.
+{{< /warning >}}
+
+<!--more-->
+
+## How to group your pages
+
+{{< warning >}}
+Currently under construction.
+{{< /warning >}}
+
+## Ordering groups
+
+{{< warning >}}
+Currently under construction.
+{{< /warning >}}
+
+## Silicate limitations
+
+{{< warning >}}
+Currently under construction.
+{{< /warning >}}
--- a/content/tutorials/more-features/custom-css.md
+++ b/content/tutorials/more-features/custom-css.md
@ -0,0 +1,33 @@
+++
+title = 'Using custom CSS'
+show_toc = true
+weight = 50
+++
+
+{{< warning >}}
+Currently under construction.
+{{< /warning >}}
+
+This tutorial assumes you know how CSS and HTML work.
+
+If you do not, you should probably look up a guide for that first.
+
+<!--more-->
+
+## Custom CSS location
+
+{{< warning >}}
+Currently under construction.
+{{< /warning >}}
+
+## CSS vs SCSS
+
+{{< warning >}}
+Currently under construction.
+{{< /warning >}}
+
+## How to customise the website
+
+{{< warning >}}
+Currently under construction.
+{{< /warning >}}
--- a/content/tutorials/more-features/multiple-comics.md
+++ b/content/tutorials/more-features/multiple-comics.md
@ -0,0 +1,22 @@
+++
+title = 'Multiples comics in a single website'
+show_toc = true
+weight = 40
+++
+
+{{< warning >}}
+Currently under redaction.
+{{< /warning >}}
+
+<!--more-->
+
+## It's just like creating a normal comic
+
+{{< warning >}}
+Currently under redaction.
+{{< /warning >}}
+
+## Telling Hugo the type of the pages
+{{< warning >}}
+Currently under redaction.
+{{< /warning >}}
--- a/content/tutorials/publishing-online.md
+++ b/content/tutorials/publishing-online.md
@ -0,0 +1,37 @@
+++
+title = 'Publishing your website online'
+show_toc = true
+weight = 30
+++
+
+{{< warning >}}
+Currently under construction.
+{{< /warning >}}
+
+<!--more-->
+
+## Choosing a webhost
+
+{{< warning >}}
+Currently under construction.
+{{< /warning >}}
+
+## Building the website *cleanly*
+
+{{< warning >}}
+Currently under construction.
+{{< /warning >}}
+
+## Putting your website online
+
+### The easy (and *wrong*) way
+
+{{< warning >}}
+Currently under construction.
+{{< /warning >}}
+
+### The efficient way
+
+{{< warning >}}
+Currently under construction.
+{{< /warning >}}