IndieWebCamp 2024
Last updated: Nov 10, 2024This weekend I joined IndieWebCamp in Berlin and it was a pretty interesting experience with lots of learning, especially as someone completely unfamiliar with IndieWeb concepts.
Day one was mostly filled with sessions and discussions about different topics that were pitched at the beginning of the day.
I facilitated a session on POSSE, which means Publish (on your) Own Site, Syndicate Elsewhere, as I was curious to understand how we can centralize the content in our own websites, but still keep our friends up to date in the social networks they are already at.
There were some good points that not everything needs to be hard and technical and POSSE could be just manually posting things on the platforms with a link to that same post on our own website. Micro.blog was suggested as an alternative to other blogging tools, with built-in POSSE capabilities, and Bridgy as a more technical solution for those who want more control.
I also joined sessions about what’s safe to post online and what kind of UX we expect from text editors.
I had hoped for slightly more productive sessions with some practical ideas, but I think we spent most of the time trying to speak the same language to start with. Maybe I was just not used to the format, but that kind of reinforced my impression that sometimes some communities that aim for being more open and inclusive have a higher barrier for entry as they usually come with internal words, acronyms and concepts that aren’t so easy to understand for outsiders, and once you’re in it’s assumed you already know them. Being told to refer to the online chat or the wiki when asking a question in person can be quite discouraging for many people.
To refer back to: - Intros
Day two was create day, and unfortunately I ended up joining remotely because I was too lazy to cross the city in the cold and it was pretty clear I missed out on more interesting exchanges. It wasn’t easy to interact with the people remotely and I would’ve benefited from exchanging knowledge with people with more technical experience.
Despite all my thoughts on POSSE on day one, I decided to focus on migrating my website to a static site generator because I feel like there’s a lot of friction to add new content to my website and everything felt over-engineered (as it usually goes with me coding in my free time). I ended up choosing Hugo and after overcoming some hurdles (and some help from Claude) I was able to migrate all my markdown posts to this new structure.
This is the first time I use a static site generator, so the whole mental model felt a bit challenging to me, but I think I’ll get used to it pretty fast as I work with it.
Here are some notes I took to remember how to get up and running with Hugo:
- Install hugo with
brew install hugo
- Run
hugo new site my-site
Folder structure
my-site/
├── archetypes/
│ └── writing.md # Template for new writing content
├── content/
│ ├── _index.md # Home page content
│ └── writing/
│ ├── _index.md # Writing section listing
│ └── example.md # Individual post
├── layouts/
│ ├── _default/
│ │ ├── baseof.html # Base template
│ │ ├── list.html # For _index.md files
│ │ └── single.html # For individual posts
│ └── index.html # Home page template
├── static/ # Empty dir for future assets
├── .gitignore
└── hugo.yaml # Config file
Essential Templates
<!-- layouts/_default/baseof.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ .Title }} | {{ .Site.Title }}</title>
</head>
<body>
<main>
{{ block "main" . }}{{ end }}
</main>
</body>
</html>
<!-- layouts/_default/single.html -->
{{ define "main" }}
<article>
<h1>{{ .Title }}</h1>
{{ .Content }}
</article>
{{ end }}
<!-- layouts/_default/list.html -->
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
<ul>
{{ range .Pages }}
<li>
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
</li>
{{ end }}
</ul>
{{ end }}
Key Commands
# Start server (including draft posts)
hugo server -D
# Create new content (if using archetypes)
hugo new writing/my-post.md
Important Notes
- Themes are optional
- Run with
-D
flag to view draft content - Front matter can use YAML (—) or TOML (+++)
- Categories are hierarchical, tags are flat
- Content files need corresponding layout templates
.hugo_build.lock
should not be committed
At the end of the day we had demos of what people worked on during the day and these were some things I learned about:
- Add dark mode support with CSS property
color-scheme: light dark;
- Add
margin-bottom: 60vh;
to keep reading at eye level when reaching the bottom of the page - Track your own location with https://owntracks.org/