CCCHH Website

The new CCCHH website powered by the HUGO 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 for your operating system. To build the website and run a development webserver, execute:

hugo server

To also build posts in the future or in draft state, run this instead:

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:

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:

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:

{{< 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 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.