https://github.com/flatcar/flatcar-website
https://github.com/flatcar/flatcar-website
flatcar kinvolk
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/flatcar/flatcar-website
- Owner: flatcar
- License: apache-2.0
- Created: 2018-03-04T06:33:40.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2026-04-01T16:35:08.000Z (2 months ago)
- Last Synced: 2026-04-02T01:16:31.501Z (2 months ago)
- Topics: flatcar, kinvolk
- Language: HTML
- Homepage:
- Size: 164 MB
- Stars: 8
- Watchers: 15
- Forks: 54
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: code-of-conduct.md
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
[](https://www.flatcar.org/)
[](https://app.element.io/#/room/#flatcar:matrix.org)
[](https://kubernetes.slack.com/archives/C03GQ8B5XNJ)
[](https://x.com/flatcar)
[](https://hachyderm.io/@flatcar)
[](https://bsky.app/profile/flatcar.org)
# Flatcar Website
Flatcar's website is built with [Hugo](https://gohugo.io/).
## Installing Hugo
You should install Hugo Extended instead of the regular Hugo version (**check what Hugo version we are using in the [`.env`](./.env) file**).
So download [Hugo Extended](https://github.com/gohugoio/hugo/releases)
from the releases page, and/or follow
[these instructions](https://gohugo.io/getting-started/installing/)
in order to install it.
## Prerequisites
- Hugo Extended (see version in [`.env`](./.env) file)
- Python 3 with PyYAML (required for docs generation - installed via `make getdeps`)
- Docker (required for building presentations with Marp) (a `docker` symlink to `podman` works too)
## Adding content
Currently, you'll need to edit the text files under `content` in this repo to modify the site.
### Blog content
In order to add content for the blog you can use the `hugo new` command. The format is as follow.
`hugo new blog/YEAR-MONTH-DAY-example-content/index.md`
The following command will create a new blog post with the [front matter](https://gohugo.io/content-management/front-matter/) defined in the default [archetype](https://gohugo.io/content-management/archetypes/) from the `./archetype` directory.
The default front matter almost always needs to be modified to a category and tags. Here's an example.
```
---
title: "Example Content"
date: 2018-10-26T03:51:27+02:00
draft: true
tags:
- tag1
- tag1
categories:
- Announcement
---
```
*TODO: Add more content sections (events, job postings, etc.)*
### Presentations
Create HTML presentations from screenshots using Marp (requires Docker):
1. Create directory: `static/presentations/your-topic/`
2. Add screenshots (16:9 aspect ratio recommended) and `main.md` in the same directory
3. Use `theme: screenshot-guide` in your `main.md` for screenshot tutorials
#### Theme Classes
- **Slide themes** (affects pagination, header/footer defaults):
- `` - For light background slides (default)
- `` - For dark background slides
- **Use Marp's built-in directives**:
- `` - Adds header
- `` - Adds footer
- **Optional modifiers**:
- `invert-header` or `invert-footer` - Swap colors
- `solid-header` or `solid-footer` - Less transparent backgrounds
Example:
```markdown
```
4. Run `make presentations` to generate `index.html` in each presentation directory
5. Embed in docs with: `{{< presentation "your-topic" >}}`
Note: The custom theme is located at `static/presentations/screenshot-guide-theme.css`
## Testing
You should always test your changes locally before creating a pull request. Once you do createi a branch or a pull request, we use Azure Static Web Apps to create previews of the changes so that reviewers and yourself can easily review the changes.
### Testing locally
To test locally run the following command.
`make run`
The above command will run a server with the the site available at `http://localhost:1313`. It will also watch for any changes made to the site and regenerate and reload the site when changes are detected. In addition, it disables some caching that can sometimes have confusing results.
### Testing Pull requests
Each pull request will run some checks and create a new preview of the changes that can be access by clicking on the Github pull request status section.
### Testing documentation locally
If you are working on documentation and would like to see the changes
be reflected in a local run of the website, then you need to generate a
module to import the docs and run the website locally with it.
You can use the `tools/preview_docs.sh` script for conveniently generating
an import module, e.g.:
`./tools/preview_docs.sh ../flatcar-docs/docs new_latest`
(this creates a `tmp_modules.yaml`)
and then start the local server again with `make run`.
## Changing the published documentation
The documentation is set under `params.docs` in [config.yaml](./config.yaml) and
should look similar to:
```
github_edit_url: https://github.com/flatcar/flatcar-docs/edit/main/docs/
issues_url: https://github.com/kinvolk/flatcar/issues/new?labels=kind/docs
external_docs:
- repo: https://github.com/flatcar/flatcar-docs.git
name: "latest"
branch: "main"
dir: "docs"
```
If you want to add a new version of the documentation, this can be done by adding a new entry to external_docs:
```
external_docs:
- repo: https://github.com/flatcar/flatcar-docs.git
name: "latest"
branch: "main"
dir: "docs"
- repo: https://github.com/flatcar/flatcar-docs.git
name: "old"
branch: "tag-1.2.3"
dir: "docs"
```
This will pull the docs that were versioned by the `tag-1.2.3` and place them under a version called `old`.
By default, the first version in the list of `external_docs` is considered to be
the latest version and so it is the one linked to automatically in the site.