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.

Previewing Changes Locally

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 --buildFuture --buildDrafts

Note: the flags --buildFuture --buildDrafts makes Hugo process all content, even if the publishDate is still in the future, or the content is marked as draft: true in the frontmatter. You usually want these flags, especially if you are preparing content that should only be shown after a certain date.

Also see Submitting Your Content below.

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.

You should always set these frontmatter fields:

• categories: must be either article or event; see below.
• date: the date displayed for this content. For events, that should be when the event takes place; for blog posts, it is when the post was written.
• publishDate: the date and time the content should be published. Note that if you do not specify a publishDate, the value of date will be used.
• title: the headline of your content.

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 for a few days on the home page. The blog page shows all posts, newest first. 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:

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. In particular, you need to set categories: article. You do not need to specify an explicit publishDate, as the value of date will be used as a fallback.

Add an Event Announcement

Events will be shown on the home page from the frontmatter publishDate: until the date: (plus a few hours grace period). 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:

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. In particular, you need to set categories: event, date: for the date of the event, publishDate: for the date the content should be published, and location: to 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).

Submitting Your Content

After creating the new content, or making changes to existing content please commit your changes with a meaningful commit message to a fresh branch. Name the branch in a way that makes it easy to understand what the changes are, for example, the title of your new blog post.

Push the branch to git.hamburg.ccc.de, and create a new pull request. Invite reviewers, or post the link to the PR to the #infrastruktur:hamburg.ccc.de Matrix channel.

The changes you have made will be deployed to the staging website automatically (this might take a minute or two). See the comments in the PR for the link to your preview. You and the reviewers can use the link to preview the changes.

If you have set a publishDate to a date and time in the future, the preview will show the content as it would appear then.

Once at least one reviewer approves the PR, it will be merged and pushed to production. This usually takes less than five minutes.

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.