Named Page Publishing Guide

Upgrade from /practice/ to Your Own Project URL

Your Runtime: benny18.homelinked.tech

/projects/study-space/
/products/power-kit/
/portfolio/my-design/
/cases/my-first-user/

1. Today’s New Requirement

Each student should publish one named project / product / portfolio page.

The page must include:

• one image
• one title
• one text description
• one video area
• at least one downloadable attachment, such as PDF, TXT, DOCX, ZIP, image, or another file
• one named URL
• one JSONL Evidence record

The goal is not to build a complete website at once. The goal is to learn a more realistic publishing workflow.

2. What Is a Named URL?

Do not always use:

/practice/

Use a more meaningful URL:

/projects/study-space/
/products/nfc-cable/
/portfolio/angela-space-design/
/cases/kwun-tong-material/

Use lowercase English words and hyphens. Do not use spaces. Do not use Chinese folder names.

3. What Is a Second-Level URL?

A second-level URL means the URL has both a category and a page name.

Level 1:
/practice/

Level 2:
/projects/study-space/
/products/power-kit/
/portfolio/my-first-design/

You do not need to finish all categories today. Today, complete one second-level URL first.

4. Enter Your Runtime

cd /opt/workspaces/benny18
source venv/bin/activate

5. Prepare Folders

mkdir -p exports assets media downloads jsonl
mkdir -p /var/www/benny18/projects
mkdir -p /var/www/benny18/products
mkdir -p /var/www/benny18/portfolio
mkdir -p /var/www/benny18/cases
mkdir -p /var/www/benny18/assets
mkdir -p /var/www/benny18/media
mkdir -p /var/www/benny18/downloads

6. Prepare Image, Video and Attachment

You need to prepare:

assets/project.jpg
media/demo.mp4
downloads/attachment.txt

If you do not have a video yet, keep the video area first and replace demo.mp4 later.

If you do not have a PDF yet, use a TXT attachment first:

cat > downloads/attachment.txt <<'TEXT'
My Project Attachment

This is a downloadable attachment for my named project page.

Later I can replace this with a PDF, DOCX, ZIP, product sheet, evidence file, design file, or project brief.
TEXT

7. Create a Named Project Page

The following example creates:

https://benny18.homelinked.tech/projects/study-space/

You can later replace study-space with your own page name.

PROJECT_CATEGORY="projects"
PROJECT_SLUG="study-space"
PROJECT_TITLE="StudySpace in a Bag"
PROJECT_DESC="A portable study setup for students who need better phone support, lighting, power and organization."

mkdir -p exports

cat > exports/named-page.html <<'HTML'











  
  

    projects

    
StudySpace in a Bag

    
One-line description: A portable study setup for students who need better phone support, lighting, power and organization.

    

      
Problem I Observed
      
Many students have real space, power, organization, learning or mobility problems. This page describes one practical capability I want to build.
    

    

      
Capability I Want to Build
      
This project turns a real problem into a capability that can be shown, tested, shared, improved and later connected to QR / NFC.
    

    

      
Video
      
If the video file is ready, it will play below. If not, replace /media/demo.mp4 later.
      
    

    

      
Download Attachment
      
This page includes at least one downloadable attachment.
      
Download Attachment
    

    

      
Next Step
      
The next step is to connect this named URL with QR and NFC, so a physical object can open this page directly.
    

    

      AI-to-Code → Code-to-URL → URL-to-Evidence → Evidence-to-Offer
    
  




HTML

8. Publish to Your Named URL

PROJECT_CATEGORY="projects"
PROJECT_SLUG="study-space"

mkdir -p /var/www/benny18/${PROJECT_CATEGORY}/${PROJECT_SLUG}

if [ -f assets/project.jpg ]; then
  cp assets/project.jpg /var/www/benny18/assets/project.jpg
elif [ -f assets/practice.jpg ]; then
  cp assets/practice.jpg /var/www/benny18/assets/project.jpg
fi

if [ -f media/demo.mp4 ]; then
  cp media/demo.mp4 /var/www/benny18/media/demo.mp4
fi

cp downloads/attachment.txt /var/www/benny18/downloads/attachment.txt
cp exports/named-page.html /var/www/benny18/${PROJECT_CATEGORY}/${PROJECT_SLUG}/index.html

Then open:

https://benny18.homelinked.tech/projects/study-space/

9. Record JSONL Evidence

PROJECT_CATEGORY="projects"
PROJECT_SLUG="study-space"
PROJECT_URL="https://benny18.homelinked.tech/${PROJECT_CATEGORY}/${PROJECT_SLUG}/"

python3 - <<'EVIDENCE'
import json, datetime, os
from pathlib import Path

record = {
    "event": "named_page_created",
    "student": "benny18",
    "category": os.environ.get("PROJECT_CATEGORY", "projects"),
    "slug": os.environ.get("PROJECT_SLUG", "study-space"),
    "url": os.environ.get("PROJECT_URL", "https://benny18.homelinked.tech/projects/study-space/"),
    "required_components": ["image", "title", "description", "video", "download_attachment", "named_url"],
    "status": "created",
    "next_step": "connect QR and NFC",
    "ts": datetime.datetime.utcnow().isoformat() + "Z"
}

p = Path("jsonl/named_pages.jsonl")
p.parent.mkdir(parents=True, exist_ok=True)

with p.open("a", encoding="utf-8") as f:
    f.write(json.dumps(record, ensure_ascii=False) + "\n")

print("Evidence written:", p)
EVIDENCE

10. You Do Not Need to Finish All Categories at Once

You are encouraged to publish multiple projects or products later, for example:

/projects/study-space/
/projects/learning-object/
/products/nfc-cable/
/products/power-kit/
/portfolio/my-design-v1/
/cases/my-first-user/

But today, complete one first.

11. Note for Design Students

Figma is a visual design space.

URL is a reality publishing space.

You can use Figma to design the image first, then export it as JPG / PNG and place it into the page.

But the final result must become a URL, because only a URL can be opened, tested, scanned, written into NFC, and preserved as Evidence.

12. Success Standard

1. You have one named URL.
2. The URL includes an image.
3. The URL includes a title.
4. The URL includes a text description.
5. The URL includes a video area.
6. The URL includes at least one downloadable attachment.
7. You have one JSONL Evidence record.
8. You can explain what capability this page represents.

13. Encouragement

You have moved from “not understanding Runtime” to “being able to publish a URL”. This is real progress.

The next step is not to build a complete platform at once. The next step is to enter the Gen AI working mode step by step:

Observe reality
↓
Use AI to generate code
↓
Publish as URL
↓
Leave Evidence
↓
Let others open, understand, test and continue
↓
Connect QR / NFC
↓
Then move toward capability exchange and monetization

Complete one page independently, then build the second page. Complete one category first, then add another category.

Do not be afraid of simplicity. A simple page that is truly published is the beginning of real capability.

HSIMC Student Runtime · Named Page Guide · English UTF-8