Initial commit
This commit is contained in:
commit
4e10967600
|
|
@ -0,0 +1,5 @@
|
|||
public
|
||||
static/Shrines.png
|
||||
hugo
|
||||
_gen
|
||||
*.lock
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
+++
|
||||
date = '{{ .Date }}'
|
||||
draft = true
|
||||
title = '{{ replace .File.ContentBaseName "-" " " | title }}'
|
||||
+++
|
||||
|
|
@ -0,0 +1,220 @@
|
|||
:root {
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
background-blend-mode: hard-light;
|
||||
background:
|
||||
fixed linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 198, 99, .1) 0%,
|
||||
rgba(130, 130, 130, 0) 25%,
|
||||
rgba(130, 130, 130, 0) 75%,
|
||||
rgba(77, 67, 102, .05) 100%
|
||||
),
|
||||
center top fixed url('/silicate_bg.png');
|
||||
}
|
||||
|
||||
body {
|
||||
color: black;
|
||||
border: 2px solid grey;
|
||||
font-family: sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 1rem auto;
|
||||
max-width: 900px;
|
||||
padding: 1rem 3rem;
|
||||
border-radius: 5px;
|
||||
|
||||
backdrop-filter: blur(6px) saturate(180%);
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: 1px solid #222;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
|
||||
#banner {
|
||||
display: block;
|
||||
background-blend-mode: hard-light;
|
||||
margin: 0.5rem;
|
||||
padding: .5rem;
|
||||
color: white;
|
||||
font-family: sans-serif;
|
||||
clip-path: polygon(
|
||||
1rem 0,
|
||||
calc(100% - 1rem) 0,
|
||||
100% calc(100% - 1rem),
|
||||
calc(100% - 1rem) 100%,
|
||||
1rem 100%,
|
||||
0 1rem
|
||||
);
|
||||
|
||||
background:
|
||||
conic-gradient(from -85deg at 100% 20%, #c6f3f420 90deg, #f9eadb00 90deg),
|
||||
conic-gradient(from 0deg at 0% 40%, #c6f3f420 70deg, #f9eadb00 70deg),
|
||||
conic-gradient(from 0deg at 0% 100%, #c6f3f408 40deg, #f9eadb00 40deg),
|
||||
conic-gradient(from -90deg at 10% 100%, #dbe5f908 70deg, #f9eadb00 70deg),
|
||||
conic-gradient(from -90deg at 30% 100%, #f9eadb08 15deg, #f9eadb00 15deg),
|
||||
conic-gradient(from -90deg at 25% 100%, #f9eadb08 10deg, #f9eadb00 10deg),
|
||||
radial-gradient(circle at 40% 40%, #a9fcfc3b, #FFFFFF00),
|
||||
#2a2a48;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0rem 1rem;
|
||||
margin-bottom: .5rem;
|
||||
font-size: 3rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8rem;
|
||||
border-image: linear-gradient(to left,rgba(212, 212, 212, 0) 0%, rgba(212, 212, 212, 0) 20%, rgba(75, 227, 206, 1) 35%, rgba(248, 235, 63, 1) 40%, rgba(242, 152, 69, 1) 45%, rgba(165, 92, 212, 1) 50%, rgba(242, 152, 69, 1) 55%, rgba(248, 235, 63, 1) 60%, rgba(75, 227, 206, 1) 65%, rgba(212, 212, 212, 0) 80%, rgba(212, 212, 212, 0) 100%) 1 / 0 0 3px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid #222;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00e;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: none;
|
||||
|
||||
ol {
|
||||
border-left: #00000033 solid 2px;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page-nav {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
text-align: center;
|
||||
|
||||
* {
|
||||
border: solid .2rem;
|
||||
border-radius: 5px;
|
||||
margin: .5rem;
|
||||
padding: .5rem 0;
|
||||
font-weight: bold;
|
||||
background-color: #00000060;
|
||||
backdrop-filter: blur(30px) saturate(250%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.next {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 2rem 1rem;
|
||||
padding: .1rem 0 .1rem 2rem;
|
||||
border-left: #AAA 3px solid;
|
||||
position: relative;
|
||||
font-style: italic;
|
||||
font-size: 110%;
|
||||
|
||||
&::before {
|
||||
content: '”';
|
||||
position: absolute;
|
||||
font-size: 60px;
|
||||
top: -25px;
|
||||
left: 0.8rem;
|
||||
color: #AAA
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
color: white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow-x: scroll;
|
||||
|
||||
code {
|
||||
box-shadow: unset;
|
||||
border: unset;
|
||||
background-color: unset;
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
code, pre {
|
||||
background-color: #FFFFFF55;
|
||||
box-shadow: 0 0 3px -2px black;
|
||||
border: 1px grey solid;
|
||||
padding: 0 .1rem;
|
||||
font-size: 110%;
|
||||
backdrop-filter: blur(12px) saturate(180%);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
margin-top: -1rem;
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4928e6;
|
||||
transition: color .7s ease-out;
|
||||
|
||||
&:hover{
|
||||
color: #c238ca;
|
||||
transition: color .5s cubic-bezier(.19,1,.22,1);
|
||||
}
|
||||
|
||||
&:not([href]), &[href=""]{
|
||||
color: grey;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
main img {
|
||||
max-width: 100%;
|
||||
border: solid black 1px;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: orangered;
|
||||
border: solid 2px orangered;
|
||||
background-color: lightyellow;
|
||||
|
||||
padding: 0.5rem;
|
||||
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
console.log('This site was generated by Hugo.');
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
+++
|
||||
title = 'Home page'
|
||||
+++
|
||||
|
||||
{{< warning >}}
|
||||
This website is under construction and is unfinished!
|
||||
|
||||
Some parts and tutorials may be missing or incomplete.
|
||||
|
||||
The website will be progressively updated to completion.
|
||||
|
||||
Downloads will be available once version 1 of Silicate is ready,
|
||||
so will the Q&A page.
|
||||
{{< /warning >}}
|
||||
|
||||
# Easily create comics websites!
|
||||
|
||||
Silicate is a system that lets you create static webcomic websites that
|
||||
you fully own with minimal configuration.
|
||||
Easily add pages with any chapter structure and any number of
|
||||
translations!
|
||||
|
||||
Silicate also lets you customise your website, from just adding
|
||||
your own CSS to fully customising any templates.
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
+++
|
||||
title = 'About Silicate'
|
||||
slug = 'about'
|
||||
weight = 4
|
||||
+++
|
||||
|
||||
## Author & History
|
||||
|
||||
Hi! I'm Christian Aribaud! Some may also now me as "Bohren".
|
||||
|
||||
I've loved webcomic for as long as I can remember! Just imagine -- artists creating
|
||||
amazing comics, and they put it online for all to see! And *for free*! How cool is that?
|
||||
|
||||
And since they put their work online for free, I wanted to help them.
|
||||
|
||||
There are two things I know well: software development and speaking French. Yes, I know, I'm sorry.
|
||||
|
||||
I helped a few times the webcomic [Pepper & Carrot](https://www.peppercarrot.com/fr/) but nowadays
|
||||
I'm one of the French translators for [Rising Sand](https://risingsand.glass/)!
|
||||
|
||||
And while I love webcomics, I also saw these past years how things can get dire for the
|
||||
authors -- platforms degrading, exploiting artists, shutting down, embracing that *freaking
|
||||
GenAI trend*...
|
||||
|
||||
And then two things happened : I got interested in [Hugo](https://gohugo.io/) and the RS website
|
||||
ran into trouble with multilingual support.
|
||||
|
||||
I wondered if I could give artists a way to create simple webcomic websites using Hugo without
|
||||
having to relly on third-party platforms or WordPress.
|
||||
|
||||
Silicate is the result.
|
||||
|
||||
|
||||
## Why the name Silicate?
|
||||
|
||||
I chose Silicate as an homage to Rising Sand, because it's what got me started!
|
||||
|
||||
Also, "Silicate" is pronounced like "Silly Cat" in french, which I find very funny.
|
||||
|
||||
|
||||
## Contacts
|
||||
|
||||
If you want to send me questions, feature requests or suggestions, you can do so here:
|
||||
|
||||
* [@bhoren](https://bsky.app/profile/bhoren.bsky.social) on Bluesky
|
||||
* [@bhoren@mastodon.art](https://mastodon.art/@Bhoren) on Mastodon
|
||||
|
|
@ -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.
|
||||
|
|
@ -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!
|
||||
|
|
@ -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 >}}
|
||||
|
|
@ -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'
|
||||
```
|
||||
|
|
@ -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.
|
||||
|
||||
|
||||
|
||||
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.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
|
|
@ -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 :
|
||||
|
||||
|
||||
|
||||
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.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
|
|
@ -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.
|
||||
|
|
@ -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 >}}
|
||||
|
|
@ -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`
|
||||
|
|
@ -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 >}}
|
||||
|
|
@ -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 >}}
|
||||
|
|
@ -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 >}}
|
||||
|
|
@ -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 >}}
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
+++
|
||||
title = 'Why should I use Silicate?'
|
||||
slug = 'why-silicate'
|
||||
weight = 1
|
||||
+++
|
||||
|
||||
Silicate is a [Hugo](https://gohugo.io/) theme dedicated to creating a comic website!
|
||||
You can work on your website directly on your computer then publish it on any web host you want!
|
||||
|
||||
This website also provides a [handy guide]({{% relref "tutorials/" %}}) to get started!
|
||||
|
||||
----------
|
||||
|
||||
> Can't I already host my webcomic on websites like Webtoon, Tapas, DeviantArt, HiveWorks, etc.?
|
||||
|
||||
You could, but they are *for profit* companies, they will not have your best interest
|
||||
at heart.
|
||||
What if they bring you into [predatory contracts](https://www.comicsbeat.com/webtoon-originals-contract-draws-criticism-from-creators/)?
|
||||
Or [fully buy into AI slop](https://news.artnet.com/art-world/deviantart-dreamup-ai-generator-creators-rights-ip-controversy-2210607)?
|
||||
Or even [pull the plug](https://www.comicsbeat.com/hiveworks-comics-sunsets-publishing-program/) on some features?
|
||||
|
||||
Long story short: you will never truly be in control of your website on these platforms.
|
||||
And you most likely will be seen as resource.
|
||||
|
||||
Putting your webcomic online *yourself* provides some security and agency, and for very little cost!
|
||||
|
||||
----------
|
||||
|
||||
> Is Silicate / Hugo like WordPress?
|
||||
|
||||
No, they are very different.
|
||||
|
||||
WordPress is a web server : it needs an actual server running non-stop. When a person asks for a page, WordPress creates the page
|
||||
on the fly. WordPress provides *dynamic* websites.
|
||||
|
||||
Hugo, on the other hand, is a program that pre-creates all the pages that your
|
||||
website will need, once, on your own computer.
|
||||
You can then put them on your server and they will be given to the user directly. Hugo provides *static* websites.
|
||||
|
||||
----------
|
||||
|
||||
> Why not use WordPress? Lots of people use WordPress!
|
||||
|
||||
WordPress is everywhere, yes. Most web hosting platforms will even pre-install it for you.
|
||||
But it has its drawbacks.
|
||||
|
||||
WordPress alone isn't enough to host a webcomic properly. You'll need a theme and maybe a plugin.
|
||||
But sometime plugins gets abandoned, like [ComicPress](https://github.com/Frumph/comicpress) which hasn't
|
||||
been updated in 3 years. Then you need to change themes or plugins, and it's a *mess*.
|
||||
|
||||
Also, WordPress is an actual web server - it can have [vulnerabilities](https://en.wikipedia.org/wiki/WordPress#Vulnerabilities) and be hacked.
|
||||
So you need to keep it up to date.
|
||||
But updates can break your plugins.
|
||||
Losing hours fixing up your WordPress because it broke down aren't fun.
|
||||
|
||||
And WordPress is its very own [can of worms](https://en.wikipedia.org/wiki/WP_Engine#WordPress_dispute_and_lawsuit).
|
||||
|
||||
|
||||
With Hugo and Silicate, you generate a static website. Since there is no web server, there are far fewer security risks!
|
||||
And there is no problem keeping the same version of Hugo and this theme forever. Even if Hugo disapears -- but why would it?
|
||||
It's been around for 10 years -- and this theme is no longer updated, you'll still be able to use them forever.
|
||||
|
||||
----------
|
||||
|
||||
> Come on, you're just trying to sell me Silicate. Since WordPress is still around it must have advantages!
|
||||
|
||||
You are correct! Twice!
|
||||
Wordpress *does* have some advantages, especially using the Toocheke [theme](#) and [plugin](#), so here's a small comparison :
|
||||
|
||||
| | Silicate / Hugo | WordPress |
|
||||
| ------------------------------ | ------------------------------ | ------------------------------ |
|
||||
| ------------------------------ | ------------------------------ | ------------------------------ |
|
||||
| Setup | Medium | **Often pre-installed by web hosts** |
|
||||
| Can try without web host | **Easy** | Fairly technical |
|
||||
| Complexity | **Low** | Medium |
|
||||
| ------------------------------ | ------------------------------ | ------------------------------ |
|
||||
| Managing content | **Very easy using text files** | Easy if using plugins only |
|
||||
| GUI to manage content | Your own PC | **Dedicated GUI in web browser** |
|
||||
| Multilingual support | **Built-in and easy** | Poor - need plugins |
|
||||
| RSS Feed | **Built-it and automatic** | Automatic using plugins |
|
||||
| Private pages for Patreons | No | **Using plugins** |
|
||||
| ------------------------------ | ------------------------------ | ------------------------------ |
|
||||
| Can customize styling with CSS | Easy | Easy |
|
||||
| Can configure pages layout | Yes | **Yes, with visual editor** |
|
||||
| Can fully customize any layout | **Yes, but technical** | No, some parts can't change |
|
||||
| ------------------------------ | ------------------------------ | ------------------------------ |
|
||||
| Publication method | Via file transfer (SFTP, etc.) | **Through web GUI** |
|
||||
| Can publish page at set date | No (requires manual operation) | **Yes** |
|
||||
| ------------------------------ | ------------------------------ | ------------------------------ |
|
||||
| Security | **Secure by design** | Often vulnerable |
|
||||
| Updates can break your site | **Low risk** | High risk |
|
||||
| Updates are mandatory | **No** | Yes |
|
||||
| Can preview update effects | **Yes** | No |
|
||||
| Backups | **Locally and/or web host** | Through web host |
|
||||
|
||||
|
||||
To sum it up:
|
||||
|
||||
- Hugo / Silicate is lighter -- but simpler -- than WordPress
|
||||
- You can **try it on your own computer without a web host**
|
||||
- It is way more secure and requires less maintenance than Wordpress
|
||||
- You can customise **everything** if you don't mind getting you hands dirty
|
||||
- But you **can't have dynamic pages** like patreon-only and password-protected pages
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
baseURL = 'https://example.org/'
|
||||
languageCode = 'en-us'
|
||||
title = 'Silicate'
|
||||
enableGitInfo = true
|
||||
|
||||
[menus]
|
||||
[[menus.main]]
|
||||
name = 'Home'
|
||||
pageRef = '/'
|
||||
weight = 10
|
||||
|
||||
[[menus.main]]
|
||||
name = 'Tutorials'
|
||||
pageRef = '/tutorials'
|
||||
weight = 20
|
||||
|
||||
[[menus.main]]
|
||||
name = 'Demos'
|
||||
pageRef = '/demos'
|
||||
weight = 30
|
||||
|
||||
[[menus.main]]
|
||||
name = 'Downloads'
|
||||
pageRef = '/downloads'
|
||||
weight = 40
|
||||
|
||||
[[menus.main]]
|
||||
name = 'Q&A'
|
||||
pageRef = '/q_and_a'
|
||||
weight = 45
|
||||
|
||||
[[menus.main]]
|
||||
name = 'About'
|
||||
pageRef = '/about'
|
||||
weight = 50
|
||||
|
||||
[module]
|
||||
[module.hugoVersion]
|
||||
extended = false
|
||||
min = '0.146.0'
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
<p>Last modified: {{ .Lastmod | time.Format "January 2, 2006" }}</p>
|
||||
<p>Copyright {{ now.Year }}. All rights reserved</p>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
|
||||
{{ partialCached "head/css.html" . }}
|
||||
{{ partialCached "head/js.html" . }}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{{- with resources.Get "css/main.scss" }}
|
||||
{{ $opts := dict
|
||||
"enableSourceMap" hugo.IsDevelopment
|
||||
"outputStyle" (cond hugo.IsDevelopment "expanded" "compressed")
|
||||
"vars" site.Params.styles
|
||||
}}
|
||||
{{ with . | toCSS $opts }}
|
||||
{{- if hugo.IsDevelopment }}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}">
|
||||
{{- else }}
|
||||
{{- with . | fingerprint }}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{{- with resources.Get "js/main.js" }}
|
||||
{{- $opts := dict
|
||||
"minify" (not hugo.IsDevelopment)
|
||||
"sourceMap" (cond hugo.IsDevelopment "external" "")
|
||||
"targetPath" "js/main.js"
|
||||
}}
|
||||
{{- with . | js.Build $opts }}
|
||||
{{- if hugo.IsDevelopment }}
|
||||
<script src="{{ .RelPermalink }}"></script>
|
||||
{{- else }}
|
||||
{{- with . | fingerprint }}
|
||||
<script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{{ $home := .Site.Home -}}
|
||||
<a href="{{$home.RelPermalink}}" id="banner">
|
||||
<h1>{{ site.Title }}</h1>
|
||||
<p id="header-subtitle">A simple webcomic framework</p>
|
||||
</a>
|
||||
{{ partial "menu.html" (dict "menuID" "main" "page" .) }}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
{{- /*
|
||||
Renders a menu for the given menu ID.
|
||||
|
||||
@context {page} page The current page.
|
||||
@context {string} menuID The menu ID.
|
||||
|
||||
@example: {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
|
||||
*/}}
|
||||
|
||||
{{- $page := .page }}
|
||||
{{- $menuID := .menuID }}
|
||||
|
||||
{{- with index site.Menus $menuID }}
|
||||
<nav>
|
||||
<ul>
|
||||
{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
|
||||
</ul>
|
||||
</nav>
|
||||
{{- end }}
|
||||
|
||||
{{- define "_partials/inline/menu/walk.html" }}
|
||||
{{- $page := .page }}
|
||||
{{- range .menuEntries }}
|
||||
{{- $attrs := dict "href" .URL }}
|
||||
{{- if $page.IsMenuCurrent .Menu . }}
|
||||
{{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
|
||||
{{- else if $page.HasMenuCurrent .Menu .}}
|
||||
{{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
|
||||
{{- end }}
|
||||
{{- $name := .Name }}
|
||||
{{- with .Identifier }}
|
||||
{{- with T . }}
|
||||
{{- $name = . }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
<li>
|
||||
<a
|
||||
{{- range $k, $v := $attrs }}
|
||||
{{- with $v }}
|
||||
{{- printf " %s=%q" $k $v | safeHTMLAttr }}
|
||||
{{- end }}
|
||||
{{- end -}}
|
||||
>{{ $name }}</a>
|
||||
{{- with .Children }}
|
||||
<ul>
|
||||
{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
|
||||
</ul>
|
||||
{{- end }}
|
||||
</li>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{{- $page := .page }}
|
||||
{{- $header_level := .header_level }}
|
||||
{{- if gt $page.Pages.Len 0 }}
|
||||
<ol>
|
||||
{{ range $page.Pages }}
|
||||
<li>
|
||||
<h{{ $header_level }}><a href='{{ .RelPermalink }}'>{{ .Title }}</a></h{{ $header_level }}>
|
||||
{{- $header_level := add $header_level 1 }}
|
||||
{{ partial "pagesTOC.html" (dict "page" . "header_level" $header_level) }}
|
||||
</li>
|
||||
{{ end }}
|
||||
</ol>
|
||||
{{ end -}}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
{{- /*
|
||||
For a given taxonomy, renders a list of terms assigned to the page.
|
||||
|
||||
@context {page} page The current page.
|
||||
@context {string} taxonomy The taxonomy.
|
||||
|
||||
@example: {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
|
||||
*/}}
|
||||
|
||||
{{- $page := .page }}
|
||||
{{- $taxonomy := .taxonomy }}
|
||||
|
||||
{{- with $page.GetTerms $taxonomy }}
|
||||
{{- $label := (index . 0).Parent.LinkTitle }}
|
||||
<div>
|
||||
<div>{{ $label }}:</div>
|
||||
<ul>
|
||||
{{- range . }}
|
||||
<li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{- end }}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<div class="warning">
|
||||
{{ .InnerDeindent | .Page.RenderString }}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ site.Language.LanguageCode }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
|
||||
<head>
|
||||
{{ partial "head.html" . }}
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
{{ partial "header.html" . }}
|
||||
</header>
|
||||
<main>
|
||||
{{ block "main" . }}{{ end }}
|
||||
</main>
|
||||
<footer>
|
||||
{{ partial "footer.html" . }}
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{{ define "main" }}
|
||||
{{ .Content }}
|
||||
<hr>
|
||||
{{ partial "pagesTOC.html" (dict "page" . "header_level" 2) }}
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
{{ define "main" }}
|
||||
{{- $next_page := .CurrentSection.Pages.Prev . }}
|
||||
{{- $current := . }}
|
||||
{{- range .Ancestors }}
|
||||
{{ with .Pages.Prev $current }}
|
||||
{{ $next_page = . }}
|
||||
{{ break }}
|
||||
{{ end }}
|
||||
{{ $current = . }}
|
||||
{{- end }}
|
||||
{{- $prev_page := .CurrentSection.Pages.Next . }}
|
||||
{{- $prev_section := .Parent }}
|
||||
<h1>{{ .Title }}</h1>
|
||||
<p class="subtitle">Reading time: about {{ .ReadingTime }} min</p>
|
||||
<hr>
|
||||
<nav class="page-nav">
|
||||
{{ with or $prev_page $prev_section }}<a class="prev" title="Previous page" href="{{.RelPermalink}}">< {{ .Title }}</a>{{ end }}
|
||||
{{ with $next_page }}<a class="next" title="Next page" href="{{.RelPermalink}}">{{ .Title }} ></a>{{ end }}
|
||||
</nav>
|
||||
<hr>
|
||||
{{ .Summary }}
|
||||
{{- if .Params.show_toc -}}
|
||||
<hr>
|
||||
{{ .TableOfContents }}
|
||||
<hr>
|
||||
{{- end }}
|
||||
{{ .ContentWithoutSummary }}
|
||||
<hr>
|
||||
<nav class="page-nav">
|
||||
{{ with or $prev_page $prev_section }}<a class="prev" title="Previous page" href="{{.RelPermalink}}">< {{ .Title }}</a>{{ end }}
|
||||
{{ with $next_page }}<a class="next" title="Next page" href="{{.RelPermalink}}">{{ .Title }} ></a>{{ end }}
|
||||
</nav>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
{{ define "main" }}
|
||||
{{- $prev_page := false }}
|
||||
{{- /* Try to get the previous sibling */}}
|
||||
{{- with .Parent.Pages.Next . }}
|
||||
|
||||
{{- /* Check if it's a section, if yes, get it's last page */}}
|
||||
{{- if (and .IsSection (gt .Pages.Len 0 )) }}
|
||||
{{- $prev_page = index .Pages.Reverse 0 }}
|
||||
{{ else }}
|
||||
{{- $prev_page = . }}
|
||||
{{ end }}
|
||||
|
||||
{{ else }}
|
||||
|
||||
{{- /* No previous sibling, use the parent itself */}}
|
||||
{{- $prev_page = .Parent }}
|
||||
|
||||
{{ end }}
|
||||
|
||||
{{- $next_page := false }}
|
||||
|
||||
{{- if gt .Pages.Len 0 }}
|
||||
{{- $next_page = index .Pages 0 }}
|
||||
{{- else }}
|
||||
{{- with .Parent.Pages.Prev . }}
|
||||
{{- $next_page = . }}
|
||||
{{ end }}
|
||||
{{- end }}
|
||||
|
||||
{{- $reading_time := 0}}
|
||||
{{- range .RegularPagesRecursive }}
|
||||
{{- $reading_time = add $reading_time .ReadingTime}}
|
||||
{{- end}}
|
||||
<h1>{{ .Title }}</h1>
|
||||
<p class="subtitle">Total reading time: about {{ $reading_time }} min</p>
|
||||
<hr>
|
||||
<nav class="page-nav">
|
||||
{{ with $prev_page }}<a class="prev" title="Previous page" href="{{.RelPermalink}}">< {{ .Title }}</a>{{ end }}
|
||||
{{ with $next_page }}<a class="next" title="Next page" href="{{.RelPermalink}}">{{ .Title }} ></a>{{ end }}
|
||||
</nav>
|
||||
<hr>
|
||||
{{ .Content }}
|
||||
<hr>
|
||||
{{ partial "pagesTOC.html" (dict "page" . "header_level" 2) }}
|
||||
<hr>
|
||||
<nav class="page-nav">
|
||||
{{ with $prev_page }}<a class="prev" title="Previous page" href="{{.RelPermalink}}">< {{ .Title }}</a>{{ end }}
|
||||
{{ with $next_page }}<a class="next" title="Next page" href="{{.RelPermalink}}">{{ .Title }} ></a>{{ end }}
|
||||
</nav>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{{ define "main" }}
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ .Content }}
|
||||
{{ range .Pages }}
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{{ define "main" }}
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ .Content }}
|
||||
{{ range .Pages }}
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Loading…
Reference in New Issue