I wrote that I was going to optimise my photos so they would be smaller and I could include them in my posts, since that’s all I was planning to do.

Then I realised I needed a video in my post. If you’ve read Museum memories you’ll know why.

The problem

My website is powered by Hugo, a static site generator that takes an input, like my markdown files where I write my posts, and outputs a website.

I store both my site code and content in Git, which also drives my deployment process: every change triggers a new build and deploy.

This is where it gets tricky with media files.

Photos

To include my own photos in a blog post I need to host them. I can do that in Hugo, but I would need to save the photos with Git so it’s part of the site and the deployment process. The problem with this is photos can be quite large, so they bloat the Git repository.

This isn’t really a problem with one blog post with a few photos, but it does become a problem when you do it over and over for many years.

I don’t know if I’ll be posting lots of photos, or doing it for many years, but I don’t like the idea of one day having a scaling problem, I’d rather fix it now.

Videos

Videos are even more of a problem. They’re much bigger than photos, and they don’t compress down as effectively.

A 7 MB photo can compress down to 200 KB, which might be tolerable in a Git repo.

A 15 second video might be 30 MB and only compress down to 15 MB.

A solution

Instead of keeping my photos and videos inside the Git repo I am moving towards separate media hosting for them. I wanted to publish my photo post before fully solving media hosting, so I’m using a temporary solution for now.

I have made a directory on my server and uploaded the videos there. I then changed my web server to serve the files in this directory at https://paultibbetts.uk/media/ and updated my post to use this URL for videos.

You can see the change in infrastructure code on GitHub .

It’s Temporary™

My web server has 50 GB of storage so there is a limit to how many photos and videos I can upload. This type of storage is relatively expensive and it’s awkward changing the setup.

A better solution for media hosting would be a storage bucket and a Content Delivery Network to serve the files, as mentioned in Changes to the Site .

I don’t know when that’s happening.

Changes:

• Notes: shorter posts that don’t need titles
• Bookmarks and likes: a way to share links without writing full posts
• Replies: posts that are part of a conversation with another site
• Webmentions: now appear below posts

Ideas:

• serving media through a CDN
• dynamic image resizing with imgproxy
• publishing from my phone using micropub

Notes

My site now has notes . They are still posts but I treat them a bit differently.

Notes don’t need a title, and they’re usually shorter, but they’re effectively the same as the articles I’ve already been posting. The real difference will be what I end up classing as an article instead of a note.

I added them because I wanted to post moments in time without needing to write several paragraphs like I would in an article. This post was nearly a note, until I realised it was more than just recent changes and that I could write about future ones as well.

I think I will probably end up writing less articles now I have notes but when I do write an article it should mean that it’s taken more effort to write, and is therefore of higher quality, but I’m not guaranteeing anything.

Bookmarks

I’ve also added bookmarks , which I’m going to use to share links to interesting things around the web.

These are notes with a bookmark_of field set to the URL I’ve bookmarked. They are then displayed a little differently, with the link going to the bookmarked site instead of my own post.

<a class="u-bookmark-of" href="https://example.com/post">Example</a>

Using a different post kind for this makes it easier for me to share links, since I don’t need to write an article talking about it, or even a note saying what I like about it. I can just share the link.

Likes

Another type of link I’m going to share is a like , which is both a reaction and me sharing something. I don’t know if there’s going to be a system for deciding whether something is a bookmark or a like so I will make it up as I go along.

<a class="u-like-of" href="https://example.com/post">I liked this</a>

Because I don’t know what the difference will end up being, and they’re both just a link to something, I have also added a /links feed which includes both bookmarks and likes.

This will be my own curated version of the internet I want others to know about.

Webmentions

Speaking of likes, I got my first webmention like! Thank you Joe !

I was checking Google Search Console and found a page showing me what sites linked to mine when I saw Joe had liked one of my posts .

I run my own site because I enjoy doing so, but that interaction made it all seem worth it, and I want to post likes from my own site to share that with others going forward.

webmention.io

Joe was able to send me a like because I signed up to webmention.io , which now collects my webmentions for me.

It also provides a feed showing all the webmentions my site has received, which I’ve added to my reader so I’m notified of new ones.

To display the webmentions on my site I’m using webmention.js to show them below the post they are mentioning.

Replies

The other post type I’ve added recently is a reply .

These are notes that are in response to someone else’s post. I will use webmentions to tell them that I’ve written it, after which they could display my reply as a comment.

This now means that to write about a link I could:

• write an article about it
• share it as a bookmark
• share it as a like
• write a note about it
• reply to it directly

So to try and make a rule for them: replies are notes that are part of a conversation.

Where it gets confusing is that any type of post can also be a reply. I could publish a post as an article, and then include a line like

my entry for
<a class="u-in-reply-to" href="https://carnival.host/prompt.html">this month's IndieWeb Carnival</a>

and the post would be both an article and a reply.

If the site I’m replying to displayed my article in full, it might be as long as their original post. Because of that they might show only an excerpt, or just link to it instead.

So, for long articles that are technically also replies I will have to make sure I write a shorter summary that works well as a comment, which could be displayed in full.

The replies I write using the reply post type will be written as I want them to appear in the conversation.

Planned changes

My entry for this month’s IndieWeb Carnival is taking longer than I thought because it’s turned into a holiday photo dump.

This has had me questioning my setup, which is annoying because I thought it would last a bit longer before it needed changing.

I have not even finished my post about infra.paultibbetts.uk , which documents my infrastructure, and I am already thinking of changing it.

I do enjoy working on my site, maybe even more than actually using it, but I have other things I should be working on.

I don’t know when the following will get done.

Media

My draft Carnival post was starting to include photos from my phone, which were about 7 MB each. I hadn’t thought about photos before and didn’t have a process for them.

My site uses git for version control, which is great for text like code and content but it starts to get bloated when you fill it with 7 MB photos. I started thinking up a better system for this, which is coming up next, until I realised I could optimise my images before saving them in git.

The solution for now is to run a script that replaces the original image with a compressed version. The 7 MB photos shrink down to ~200 kB. I am still bloating my repo with images, but at a much more tolerable size.

CDN

A better solution is to store my photos separately, which lets me keep the repo slim by tracking only text files.

I could use my Raspberry Pi to host the photos, but it uses Network File Storage which is a bit slow and has only 50 GB of storage.

Instead I’m thinking of using a storage bucket, which could grow to any size, and then using a Content Delivery Network to serve the assets.

Edit

I needed a temporary solution, so in Added support for photos and videos I explain how I’ve set up my Raspberry Pi to host my media files until I get a storage bucket and CDN sorted out.

Dynamic Image Resizing

I might also use something like imgproxy to dynamically resize images.

When a user requests a smaller version of a photo, imgproxy would generate it on demand. That resized image would then be cached by the CDN, so future visitors can receive the optimised version immediately.

This might mean I can stop compressing photos manually and just use the originals.

Micropub

The final change to my site, which will really elevate it from a simple blog to a personal publishing system, is using micropub to let me post from my phone.

This would need hosting and hooking up to my git repo to manage my content. I would have the same problem as I do right now if I used it for photos, so I will need to wait until I have the storage bucket and CDN sorted before tackling this.

I’m considering using Indiekit as my micropub server, as it works with Hugo (which powers my site), and can also syndicate my posts out to social networks. It doesn’t look like it has a Micro.blog plugin yet, so I’d need to write one before I can selectively choose which posts to syndicate there.

Micro.blog

Which leaves me with a site that can do what I currently use my Micro.blog microblog for. I want to stay as part of the Micro.blog community, and will continue using their apps, but I can see myself migrating the hosting of my content to my own site in the future.

I could merge my Micro.blog posts into the notes on my own site and then syndicate future posts to the Micro.blog timeline, and for Micro.blog users nothing will seem to have changed, only where my content is hosted.

My feed might even get better, as I could filter out posts that I know the Micro.blog community wouldn’t be interested in.

This isn’t a remark against Micro.blog by the way - I think it’s an excellent service - I just believe that I was destined to outgrow it, since I always intended on working on my own site. I think of it more as graduating as a socially-capable indie website, and because Micro.blog is part of the indieweb I can stay part of its community.

I would be missing out on lots of features that Micro.blog has that I don’t yet support, so it wouldn’t be a seamless transition, but after implementing all the above ideas my site should be capable of hosting all of my post kinds in one place.

A documentation site for the infrastructure that runs paultibbetts.uk.

This is easier said than done, and there are lots of different ways of doing it.

This is what I did.

As a web developer

There are three paths to getting your own site.

Service

You could use an existing service like Micro.blog to host your site.

I already do this for my microblog because it comes with a bunch of features out of the box and gets me onto the IndieWeb, even while I don’t yet support all the IndieWeb features on my main site.

CMS

An alternative path is to use an existing content management system and add on IndieWeb features with plugins.

I’ve done this in the past with WordPress but I moved on from the WordPress world a while ago.

Self-starter

I decided I was more comfortable writing and doing it myself.

What it needs to do

Before I wrote any code I made sure to cover the basics.

Information about me

The homepage of my site needs to include a h-card with my name, an icon, and rel-me links to my social network profiles.

This is not only useful for humans but I can also use it to sign in to other sites using IndieAuth .

I used IndieWebify.me to check I’d done it correctly.

Publish content

My posts should be marked up using h-entry so that others can understand my content.

The original site design had words with titles, which makes them technically “articles”, although that could change in the fture.

How the site works

There are lots of different ways to do this.

In fact there are too many, so I kept it as simple as I could.

Static site generator

I want to write my content in Markdown , I would prefer doing that on my laptop instead of my phone, and I’m ok running commands to publish things.

Which means I can use a static site generator like Hugo to turn my markdown files into HTML.

Hosting

One of the best parts about using a static site generator is that it makes hosting simpler.

Once you have generated a static site you can upload the files to a web host and you’re done.

And you can automate it, so all you do is update it and it gets deployed automatically.

GitHub pages

I host copies of my code on GitHub so that others can view the source and I was planning on doing the same with my site.

This meant I could use one of GitHub’s other features, which is free hosting for static content .

All I would need to do is add a workflow for GitHub Actions to perform each time the code gets updated and the site gets deployed automatically.

IndieMark

There’s no official measure of a site’s “IndieWebness” but the closest right now is the still-in-development IndieMark which would score me a level 1.

Level 0 involves owning your own domain, something I have written about before , and having a personal site at that domain.

Level 1 involves:

• identity, I’ll be using this at my primary domain
• authentication using rel-me links to my external social network profiles
• posts with permalinks, h-entry markup and other microformats
• searchable by allowing robots to index my site, my content is written in HTML and no JavaScript is required to read it

View source

You can view the source code to see how I’ve abused Hugo and TailwindCSS into creating my own site, hosted on GitHub Pages.

I’ve already got one, so I thought I’d explain how I got it.

Ruler

Years ago I registered my name as my domain.

I’m not a company, so I didn’t want .com, but there weren’t many options, and so to make me “Paul Tibbetts from the UK” I went with .co.uk.

Some time later .uk was made available and to make it fair to the .co.uk owners who wanted to drop the .co you had to also own the .co.uk version to register it, so for a while I owned both.

This was all before the newer extensions like .blog and .dev came out. When they did I considered changing but decided against it.

Registrar

I registered my domain with Heart Internet because that’s who we used at work and I didn’t have any kind of preference.

They don’t expose my personal data when you run a whois query on the domain so I haven’t found a reason to move away from them.

Renewals are £9.99 per year.

Management

For a while I managed the domain using the interface on Heart Internet but since then I’ve moved it to Cloudflare .

To do this I changed the nameservers that the domain uses from Heart Internet’s to Cloudflare’s.

Records

There aren’t that many records right now.

@

The apex domain, as in the bare one without any subdomains (https://paultibbetts.uk), points to a really small landing page I made for myself.

I’ll be redoing this soon so I won’t talk about it yet.

www

I don’t use the www subdomain.

I know there are people who think this is wrong but growing up sharing links with others the moment I discovered you could get rid of it I did and haven’t looked back.

Maybe one day I will revisit this.

micro

micro.paultibbetts.uk is powered by Micro.blog .

I could run my main domain with Micro.blog but I want to have a go at doing that myself.

I followed the Micro.blog guide to set up a custom domain and used a CNAME on my domain to point micro to https://paultibbetts.micro.blog.

Emails

Once upon a time I hosted my own email server.

The company I worked at, Sixth Story, had an email address iwanttowork @ sixthstory that I thought was clever, so I wanted hire @ paultibbetts for myself. Applying for jobs as a web developer I thought it would help me stand out.

Even after all the work though I still found myself using my regular Apple email address because I knew it was more stable, and less likely to get marked as spam, so when Apple announced you can use custom domains with iCloud mail I got rid of my email server and used Apple’s instead.

This means I have some MX and TXT records to allow that to work.

In review

I have always been jealous of others with better domains than me.

Difficult to spell

I have trouble getting people to spell my surname correctly.

I don’t blame them, there’s lots of Bs and Ts, and saying “technically there’s 3 Ts” isn’t helpful when they’re typing the double T towards the end.

Potential fix

Aral’s ar.al domain is much better than mine. It’s short and easy to spell.

Maybe I could find a short domain and set it up to redirect?

Time for another disappointing trip to IWantMyName to see all the good domains have been taken.

Did you mean the other one?

I share a name with someone way more famous than me.

It’s spelt a little different but search engines will assume you meant the other Paul.

Potential fix

There are a few ways I can improve my search engine rankings.

I’m going to try writing lots of content to go on my domain, hoping that does it.

I will not do what the other guy did.

dot UK

My .uk address works whilst I live here but it wouldn’t if I moved.

Potential fix

I don’t have any immediate plans to move abroad so I’m not too concerned with this.

If I ever did I can setup redirects.

Not a cool internet name

Jeremy Keith’s adactio.com domain regularly reminds me I’m not creative enough to come up with a cool internet name.

Potential fix

Maybe another decade of thinking about it will help.

Reposted

This was originally posted on my microblog before this site existed and I wanted a copy of it here.

There were also a few real technical difficulties starting a blog, which were more frustrating because usually I was the one who had caused them, but they were fixed pretty quickly.

No, the biggest problem came instead from me, not getting past the awkward part and making it a regular habit.

I made a slight effort earlier this year publishing a “plan” on Micro.blog but apparently it wasn’t the right time and I didn’t follow it up.

I was already aware of it, and making an effort to fix it, but I was burnt out.

What I didn’t write in my “plan” was that I would be taking some time off work for a while to recover. It’s not like I was stuck in bed, unable to move, but I had lost interest in coding and computers, which isn’t great when that’s what you do for money.

So I handed in my notice and took a break.

Two months later and I’m definitely feeling better.

The fact you are reading this at all is a testament to my newly rediscovered ability to sit down at a computer and not hate it.

I’ve also had the time to work on my homelab, on which I’ve made more progress in the last two weeks than I have in the last two years.

So maybe now is a good time to start blogging.