A walkthrough

Two commands to get a page online. After that everything happens in the browser: writing, pictures, video, your Nostr posts. Every screenshot below is the real thing, taken on a page like the one you are about to make. The controls it describes live on your page, not on this one.

01

Get your page online

This is the only part that happens in a terminal, and it is two commands. You need Node.js installed.

npx nsite-clay init mysite
npx nsite-clay deploy mysite --sec=nsec1…

The first command makes a folder with your page in it and prints a key. That key is the only thing that can ever change the page, and it is not stored anywhere, so copy it somewhere safe before you close the terminal. The second command puts the page online and prints its address.

Already have a Nostr key? Pass your npub to the first command instead, and the page belongs to you from the start:

npx nsite-clay init mysite --npub=npub1…

That is the last command you need. From here on, the page changes itself. You only come back to the terminal if you want to edit the file by hand.

02

Open it and sign in

Open the address the deploy printed. This is what anyone visiting sees: your page, and nothing to click.

A published page as a visitor sees it
A visitor sees the page. No editing controls, no login prompt.

Press Sign in in the corner. There are three ways in. Use the first one that applies to you.

The sign-in panel offering a browser extension, a remote signer, or pasting a key
Sign in with a browser extension, with Amber on your phone, or by pasting your key.
  • A browser extension such as Alby or nos2x. One click, nothing to type.
  • Amber, or another signer app. Press the button, scan the code with your phone, and approve each change there. Your key never touches the browser, which makes this the safest option.
  • Paste your key. Your nsec, or an encrypted ncryptsec with its password. It stays in the tab until you close it and is never saved anywhere.
The same page after signing in, with editing controls in the corner
Signed in as the owner. The corner now says who you are and offers Save.

Only your key can change the page. Anyone else who signs in gets the same read-only page a visitor sees.

03

Change the words

Click into any text and type. Press Enter for a new paragraph. Select some text and a small toolbar appears above it.

The formatting toolbar floating above selected text
The first control is the style menu. It turns whatever you are standing in into a heading, a list, a quote, or a code block.

The rest of the toolbar is bold, italic, strikethrough, bulleted and numbered lists, a link button, the three insert buttons covered below, and one to strip formatting back out.

⌘B ⌘I ⌘Ubold, italic, underline
⌘Kmake a link, or remove one
⌘⇧8bulleted list (⌘⇧7 numbered, ⌘⇧9 quote)
⌥1 ⌥2 ⌥3the three heading sizes, ⌥0 back to normal
# - > type these at the start of a line for the same thing

Pasting from a word processor is safe. The formatting gets cleaned up on the way in, so you do not end up with someone else's fonts in your page.

04

Add a picture

Put the cursor where you want it and press the picture button on the toolbar.

The insert image panel with a drop area, a grid of previously uploaded images, and fields for a URL, alt text and caption
Drag a file in, click one you have used before, or paste a web address.

Anything you upload is stored alongside the page itself, and everything you have uploaded before shows up in that grid, so you never have to hunt for the same picture twice.

Fill in the alt text. It is what people using a screen reader hear, and what shows if the image ever fails to load. A caption is optional and appears under the picture.

05

Add a video

The video button next to it takes a YouTube or Vimeo link, or a video file to upload.

The insert video panel with a YouTube link filled in
Paste the link you would normally share.
The video sitting in the page as a thumbnail with a play button
It lands as a thumbnail with a play button.

The player only loads if someone presses play. Until then your readers are not being tracked by YouTube, and the thumbnail still works as a link even for people browsing with JavaScript turned off.

06

Show your Nostr posts

The lightning button puts a feed of Nostr posts into the page. Choose whether you want short notes, long-form articles or picture posts, and whose.

The Nostr feed panel listing real posts, with one ticked to pin it
Their actual posts are listed underneath. Click any one to pin it to the top.

You can name more than one npub, so a page can show a whole group. The rest of the controls are how many posts to show, whether they sit in a list or a grid, a minimum length to filter out one-liners, and a tag to narrow it down to one topic.

An article and two notes rendered inside the page
The feed in place. It refreshes itself whenever the page is opened.

Post something new later and it turns up here on its own. You do not have to touch the page again.

07

Write a post

If the page can show your posts, it can write them too. Everything you have published is listed, and you can edit any article from here.

A list of published articles with edit and view buttons
Your articles and notes, with a Write button for a new one.
The article editor with title, address, summary, image, topics and body
Long-form posts take a title, a summary, an optional header image, topics, and the text itself.

The address is the part worth getting right. It is how your article is linked, and publishing again under the same address is how you edit it. Fix a typo, publish, and every Nostr app shows the corrected version at the same link. The original date stays put.

Short notes work the same way with one difference: they cannot be edited afterwards. The panel says so before you publish one.

Posts and pages are separate. Writing a note does not change your page, and saving your page does not touch your posts.

08

Save your changes

Press Save, or ⌘S. The dot in the corner turns green when it is done, and anyone opening your page from that moment sees the new version.

Saving takes about a second. If nothing has changed since the last save, it says so and does nothing, so pressing it twice is harmless.

Anyone still reading the old version gets told a newer one exists, and their page updates itself. Nobody has to know what a hard refresh is.

If a save fails, it says why rather than failing quietly. The usual cause is a signer app that has gone to sleep: wake it, approve, and press Save again.

09

Go back to an earlier version

Every save is kept. History lists them all.

The version history listing saves by date, each with a read button
Read any earlier version, or put it back.

Restoring an old version does not throw the current one away. It becomes just another entry in the list, so you can change your mind again.

10

Your page's address

Your page lives at your npub:

https://<your npub>.nsite.lol/

That address is yours because the key is yours. Nobody assigned it and nobody can take it away. Several gateways serve the same page from the same events, so if one is down you change the hostname and nothing else moves:

For a domain of your own, point a CNAME record at a gateway and your page answers there instead.

You can also have more than one page. Add --site=blog when you deploy and that one gets its own address, with the same key behind it.

read-only