111 lines
4.6 KiB
Markdown
111 lines
4.6 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.
|
|
|
|
### Add Pages
|
|
|
|
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
|
|
```
|
|
|
|
#### Add an Event Announcement
|
|
|
|
There are two basic types of posts: Events and articles.
|
|
Events will be shown on the home page from their publishing date until they have happened and shall be used for things which happen at a certain date.
|
|
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
|
|
```
|
|
|
|
#### Add a Blog Entry
|
|
|
|
As mentioned before, you can also create blog posts for things which aren't events.
|
|
They will only be shown in the "blog" section and posted to the RSS feeds and shall be used for things which are relevant for a longer time.
|
|
|
|
As we have much more event announcements than articles, finding articles in all blog posts can be quite a challenge.
|
|
But using these two categories enables filtering, so that the history of articles is in one list.
|
|
|
|
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
|
|
```
|
|
|
|
#### Additional Notes on Events and Articles
|
|
|
|
By default the first 70 words are shown as a summary on list pages.
|
|
Please use `<!--more-->` 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).
|
|
When using the commands above, the template shall have evenything you need.
|
|
|
|
#### 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.
|
|
|
|
## Open Source Code Used
|
|
|
|
Source code of the [picocss/pico repo](https://github.com/picocss/pico) was either used directly or as a reference. It was licensed under the MIT license. A copy of the license can be found under: `licenses/picocss-pico_mit_license`.
|