Lesson 5 of 5

Publishing & sharing

Your site is on f-r.space the moment you save a file. No deploy step. No build pipeline. No Vercel CLI. Save → live. That's the whole job.

This lesson is about what to do after you save: how to make your site discoverable, sharable, and yours.

Your URL

Your site lives at username.f-r.space. So if your FriendRewind username is daria, your site is at https://daria.f-r.space/.

Bookmark it. Put it in your bio everywhere. Print it on a sticker. This URL is yours for as long as your account is yours.

How URLs map to files

Three rules cover ~all of it:

  • / serves index.html from the root of your site. Always have one.
  • /about.html serves about.html from the root.
  • /blog/ serves blog/index.html. Folders work the same way the root does.

Capitalization matters — About.html and about.html are different files. Pick a convention and stick with it. Most folks use lowercase-with-hyphens.

The page <title> and meta tags

These are tiny — and they make a huge difference in how your site shows up in searches and link previews:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <title>Daria's place — books, art, dinner</title>
  <meta name="description" content="A small homepage by Daria. Reading log, sketches, recipes.">

  <!-- For when someone shares your link in chat / on social -->
  <meta property="og:title" content="Daria's place">
  <meta property="og:description" content="Books, art, recipes, vibes.">
  <meta property="og:image" content="https://daria.f-r.space/cover.png">
  <meta property="og:url" content="https://daria.f-r.space/">
</head>

The og:image is the picture that pops up when someone pastes your URL into a chat. Make it 1200x630px-ish for the best fit.

The "Made with FriendRewind" badge

The starter index.html we gave you ships with a small link in the bottom corner pointing back to your FR profile. We strongly encourage keeping it — it's how visitors discover that the FR community made the site they're looking at, and it's the polite thing to do for a free service.

But it's your site. If you want to remove it, replace it with your own footer, or just style it to match — that's your call.

Get listed in the FR gallery

The /sites/ gallery on FriendRewind lists every public site, sortable by newest, most-visited, and most-followed. In the Settings tab:

  • Make sure Public is checked.
  • Set a title and a description — these are what shows up under your tile.
  • Add 2-5 tags like art, fanfic, blog, photography.

We auto-take a screenshot of your site for the gallery tile. Update it whenever you make a major redesign.

Tell people about it

This is the part most makers forget — building it isn't enough. Three quick wins:

  1. Post a link on your FriendRewind feed and your blog. Add it to your bio.
  2. Trade links with friends. Add a "links" page on your site that points to other people's sites you like. They'll do the same. The personal web is a webring with extra steps.
  3. If you make something specific (recipe, sketch, album of photos), post a thumbnail on social with the link. Direct traffic beats SEO when you're starting out.

Common things that go wrong

  • "My CSS isn't loading." Open the page, View Source, look at the <link> tag. Is the path right? Capital letters? Probably a typo.
  • "My page works in the editor preview but not at the URL." Make sure you saved (Ctrl-S in the editor). The preview drawer cache-busts on save; the public URL doesn't auto-refresh in your browser — hit Ctrl-Shift-R.
  • "Images aren't showing." Check the filename matches exactly — including the extension. .JPG and .jpg are different files on Linux servers.
Stuck? The browser's developer tools (F12, or right-click → Inspect) shows you exactly what's wrong — a red error in the Console tab almost always tells you what to fix.

What's next, for real

You've made a thing. Now use it. Treat it like a sketchbook: tear pages out, draw new ones, redesign it three times this year. Look at other people's sites in the gallery. Trade links. Make something weird.

The personal web is whatever you make it. Welcome.


Want to keep going? FriendRewind has a blog with deeper writeups, and the /sites/ gallery is a good source of inspiration. Or just go build the next thing.