Stefan Bethke
bfde817bc6
All checks were successful
/ build (pull_request) Successful in 43s
A single sentence per line
119 lines
5.4 KiB
Markdown
119 lines
5.4 KiB
Markdown
# CCCHH Website
|
|
|
|
The new CCCHH website powered by the [HUGO](https://gohugo.io/) static site generator.
|
|
|
|
## Website vs. Wiki
|
|
|
|
The website should contain information for new people about the club as well as upcoming events.
|
|
The blog should also still exist.
|
|
All other information like details on groups, projects and recurring events should be in the wiki.
|
|
|
|
- start page (onepager)
|
|
* who we are
|
|
* announcements aka current blog entry (if in the future)
|
|
* event calendar
|
|
* visit us -> open chaos + link to wiki for all recurring events
|
|
* groups, e.g. CTF team, CMS, freifunk, etc.
|
|
* directions (map)
|
|
- blog, split into:
|
|
* (event) announcements
|
|
* other blog posts and press releases
|
|
- imprint
|
|
|
|
## Usage
|
|
|
|
### Build and Deploy
|
|
|
|
To populate the calendar data, please run `./fetch-calendar.sh` before running hugo.
|
|
|
|
Running the hugo command without and parameters will re-generate the site in the `public` directory.
|
|
To deploy the website, just copy the whole folder to a directory which is servered by the webserver of your preference.
|
|
|
|
Please note that the website should be re-deployed at least daily to update the "announcement" section on the front page even if there were no changed to the content.
|
|
|
|
### Previewing Changes Locally
|
|
|
|
To run a local version, just install HUGO by following the [instructions](https://gohugo.io/installation/) for your operating system.
|
|
To build the website and run a development webserver, execute:
|
|
```shell
|
|
hugo server
|
|
```
|
|
|
|
To also build posts in the future or in draft state, run this instead:
|
|
```shell
|
|
hugo server -D
|
|
```
|
|
|
|
### Adding Content
|
|
|
|
There are two basic types of posts: Events and blog posts.
|
|
Hugo and the template set distinguish between these two types based on frontmatter information.
|
|
When manually creating content, you need to take extra care to use the correct frontmatter data.
|
|
See the link to the Hugo archetypes below for details.
|
|
If at all possible, use `hugo new content` with the appropriate parameters to create the new content file correctly.
|
|
|
|
#### Add a Blog Entry
|
|
|
|
Blog posts (the archetype is called `article`) should be used for information that will be relevant for a longer period, for example explanations about technical, political or cultural topics.
|
|
Articles will be shown in chronological order on the [blog main page](https://hamburg.ccc.de/blog/), until newer posts push them down.
|
|
In addition, the `tags:` can be used to find blog posts about certain topics.
|
|
|
|
To create a new general blog post, run a command like this:
|
|
```shell
|
|
hugo new content --kind article blog/yyyy/yyyy-mm-dd-your-article-title/index.md
|
|
```
|
|
|
|
If you want to create a blog post from scratch, or convert an event into a blog post, see the frontmatter data in [themes/ccchh/archetypes/article.md](themes/ccchh/archetypes/article.md).
|
|
In particular, you need to set `categories: article` and remove any `date:` or `location:`.
|
|
Note that `publishDate:` is fine, as it determines when the content will start appearing on the the site.
|
|
|
|
#### Add an Event Announcement
|
|
|
|
Events will be shown on the home page from the frontmatter `publishDate` until the `date:`.
|
|
Use them for information that is relevant for a specific event, like a talk or a meeting.
|
|
|
|
This is not limited to events organized by the CCCHH, but can also be a hint to other events which we think are related to our activities.
|
|
|
|
To create a new event blog post, run a command like this:
|
|
```shell
|
|
hugo new content --kind event blog/yyyy/yyyy-mm-dd-your-event-title/index.md
|
|
```
|
|
|
|
If you want to create an event from scratch, or convert a blog post into an event, see the frontmatter data in [themes/ccchh/archetypes/event.md](themes/ccchh/archetypes/event.md).
|
|
In particular, you need to set `categories: event`, `date:` for the date of the event, and `location: Z9` (or whereever your event takes place).
|
|
|
|
#### Additional Notes on Events and Articles
|
|
|
|
By default the first 70 words are shown as a summary on list pages.
|
|
Please use `<!--more-->` (white space matters) to manually separate the summary from other post content.
|
|
|
|
Please prefix your folder name with a date to make browsing the content in the source code easier.
|
|
The date in the URL will be taken from the `date` field in the front matter.
|
|
|
|
Blog posts from before 2024-01-22 were imported from the previous website and have additional front matter data which is not usually needed (e.g. the lastmod value).
|
|
|
|
#### Populate the Event Calendar
|
|
|
|
The event calendar table is filled from the Nextcloud iCal feed.
|
|
To add a link on the title text, just add some link to the event's description field.
|
|
The first link (something starting with `https://` or `http://`) from anywhere in the text will be taken.
|
|
|
|
(iCal has a link attribute, but that is not supported by the Nextcloud web UI. So we use the description instead.)
|
|
|
|
|
|
### Icons
|
|
|
|
You can use solid and brand icons from https://fontawesome.com/icons version 6 in your posts like this:
|
|
```md
|
|
{{< fa envelope >}}
|
|
{{< fa brands gitlab >}}
|
|
```
|
|
|
|
## Home One-Pager Architecture
|
|
|
|
The Home page is a one-pager which combines multiple files from the `content/home` directory.
|
|
Each sub-directory is creating a section of the home page and all content files in these directories must have `headless: true` in their front matter.
|
|
|
|
If a directory only contains an `index.md`, it will be rendered as normal content.
|
|
If there are additional markdown files, those will be rendered as a flexbox column layout.
|
|
An image gallery can be added by providing a list of `resources` in the front matter.
|