How to Update My Page

In this guide:

How it works
Connect to the file share
Install Claude on your computer
Make your first app
Make it look nice (manifest.json)
See your changes

1. How it works

The website runs on our home NAS (a Synology called RackStation, address 192.168.1.121). You don't log in to the NAS — instead you connect to its file share from your own computer, like plugging in a USB drive. Your folder on that share is your deploy location:

Build an app on your computer → save it into your folder on the share → refresh the Hub. That's the whole loop. No "publish" button, no uploading.

Your folder is named after you, and shows up on the web here:

On the share:   web / family / YourName
On the web:     https://localyolks.com/YourName/

Only change files inside your own folder.

2. Connect to the file share

Connect to the shared folder named web on the NAS. Sign in with your own NAS username and password when asked.

🪟 Windows

Open File Explorer, click the address bar, type this and press Enter:

\\192.168.1.121\web

Open family → your folder. (Tip: right-click the share → Map network drive to keep it handy as, say, drive Z:.)

🍎 Mac

In Finder, press ⌘K (Go → Connect to Server), type this and click Connect:

smb://192.168.1.121/web

It opens at /Volumes/web. Go into family → your folder.

🔑 If it won't let you in, your account may not have access to the web share yet. Ask Pat to grant it in DSM → Control Panel → Shared Folder → web → Edit → Permissions (give your user Read/Write).

3. Install Claude on your computer

Claude is an AI assistant that builds your apps for you. Install it once on your own computer (not the NAS):

🍎 Mac / 🐧 Linux

Open the Terminal app and run:

curl -fsSL https://claude.ai/install.sh | bash

🪟 Windows

Open PowerShell and run:

irm https://claude.ai/install.ps1 | iex

Then check it worked:

claude --version

💡 Already have Node.js? npm install -g @anthropic-ai/claude-code works on any system too. The first time you run claude it asks you to sign in — just follow the link.

4. Make your first app

The easy way — let Claude build it right in your folder

Open a terminal in your folder on the share, so anything Claude makes is saved straight to the website:

🍎 Mac

cd /Volumes/web/family/YourName
claude

🪟 Windows

(after mapping the share to Z:)

Z:
cd \family\YourName
claude

Then just say what you want, in plain English:

You type: “Make a tic-tac-toe game in a new folder called tic-tac-toe, and add it to my page.”

Claude creates tic-tac-toe/index.html in your folder and updates your manifest.json. Because the folder lives on the share, it's already deployed — just refresh the Hub.

The build-then-copy way

Prefer to work on your own computer first? Build the app anywhere (let Claude make a folder with an index.html in it), then drag that whole folder into family/YourName on the connected share. Done.

📦 Each app is just a folder with an index.html inside. Any such folder in your area shows up on the Hub automatically, titled after the folder name (my-game → "My Game"). Want a full example to copy? Look in family/_template/ on the share.

5. Make it look nice (manifest.json)

Your folder has a manifest.json file. It controls your emoji, color, and the titles of your apps on the Hub:

{
  "name": "Pat",
  "emoji": "🍳",
  "color": "#f59e0b",
  "tagline": "A short line about me",
  "home": "index.html",
  "projects": [
    {
      "title": "My App",
      "description": "A game I made!",
      "url": "my-app/index.html",
      "emoji": "🎮"
    }
  ]
}

emoji / color / tagline — how you look on the Hub.
home — your "About Me" page (your name links to it).
projects — one entry per app; url is the path inside your folder.

💡 Keep it valid: no trailing commas, straight quotes ", and every { } needs its partner. (If you let Claude add apps, it updates this file for you.)

6. See your changes

Once your files are saved in your folder on the share, just refresh the Family Hub in your browser. Your changes are already live. 🎉

← Back to the Family Hub