命名页面发布指引

从 /practice/ 升级到自己的项目 URL

你的 Runtime： jayho80.homelinked.tech

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

1. 今天的新要求

每个人发布一个自己命名的项目 / 产品 / 作品页面。

页面必须包含：

• 一张图片
• 一个标题
• 一段文字描述
• 一个视频区域
• 至少一个可下载附件，例如 PDF、TXT、DOCX、ZIP、图片等
• 一个自己命名的 URL
• 一条 JSONL Evidence

目标不是一次做完整网站，而是掌握更真实的发布能力。

2. 什么是自己命名的 URL

不要永远只用：

/practice/

你可以使用更有意义的 URL：

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

页面名建议使用英文小写和连字符，不要用空格，不要用中文目录名。

3. 什么是二级以上 URL

二级 URL 的意思是：URL 里面有类别和页面名。

一级：
/practice/

二级：
/projects/study-space/
/products/power-kit/
/portfolio/my-first-design/

今天不要求你一次完成全部，只要求先完成一个二级 URL。

4. 进入你的 Runtime

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

5. 准备目录

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

6. 准备图片、视频和附件

你需要准备：

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

如果暂时没有视频，可以先保留视频区域，之后再补 demo.mp4。

如果暂时没有 PDF，可以先用 TXT 附件代替：

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. 创建一个命名项目页面

下面例子会创建：

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

你可以之后把 study-space 改成自己的页面名。

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
    
  




English Version
This Named Page Publishing Guide is also available in English.
Open English Version




HTML

8. 发布到自己的命名 URL

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

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

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

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

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

然后打开：

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

9. 记录 JSONL Evidence

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

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

record = {
    "event": "named_page_created",
    "student": "jayho80",
    "category": os.environ.get("PROJECT_CATEGORY", "projects"),
    "slug": os.environ.get("PROJECT_SLUG", "study-space"),
    "url": os.environ.get("PROJECT_URL", "https://jayho80.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. 不需要一次完成所有类别

鼓励你以后发布多个项目或产品，例如：

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

但今天先完成一个。

11. 给设计同学的提醒

Figma 是视觉设计空间。

URL 是现实发布空间。

你可以先用 Figma 设计图片，再导出成 JPG / PNG，放进页面。

但最终一定要变成 URL。因为只有 URL 可以被别人打开、测试、扫码、写入 NFC、作为 Evidence 保存。

12. 成功标准

1. 有一个自己命名的 URL
2. URL 里面有图片
3. URL 里面有标题
4. URL 里面有文字描述
5. URL 里面有视频区域
6. URL 里面有至少一个可下载附件
7. 有一条 JSONL Evidence
8. 能解释这个页面代表什么能力

13. 鼓励

你们已经从“看不懂 Runtime”走到“能发布 URL”。这是很大的进步。

下一步不是一次做完整平台，而是一步步进入 Gen AI 工作模式：

观察现实
↓
用 AI 生成代码
↓
发布成 URL
↓
留下 Evidence
↓
让别人能打开、理解、测试、继续
↓
再连接 QR / NFC
↓
最后才进入能力交换和变现

先独立完成一页，再做第二页。先完成一个类别，再做第二个类别。

不要害怕简单。简单但真实发布，就是能力开始形成。

HSIMC Student Runtime · Named Page Guide · UTF-8