快速开始指南

欢迎使用 CannedRocket 静态网站生成器!这是一个现代化、简洁易用的静态网站构建工具。

CannedRocket 示例

📋 准备工作

确保你已经安装了:

🚀 开始使用

1. 安装依赖

npm install

2. 创建你的第一个页面

www/source/ 目录下创建 about.md:

---
title: 关于我们
description: 了解更多
---

# 关于我们

这是一个关于页面的示例。

![示例图片](../static/images/sample.png)

3. 启动开发服务器

npm run dev

在浏览器中打开 http://localhost:8000

📝 编写内容

Markdown 格式

支持标准 Markdown 语法:

# 标题 1
## 标题 2
### 标题 3

**粗体文本**
*斜体文本*
`代码片段`

- 列表项 1
- 列表项 2

> 引用文本

![图片描述](../static/images/image.png)

[链接文本](https://example.com)

前置元数据(Frontmatter)

在 Markdown 文件顶部添加 YAML 元数据:

---
title: 页面标题
description: 页面描述
author: 作者名称
date: 2025-01-01
---

🖼️ 添加图片

  1. 将图片放在 www/static/images/ 目录
  2. 在 Markdown 中使用相对路径:
![描述](../static/images/filename.png)

📡 静态 API

api/ 目录下创建 .json 文件:

{
  "status": "success",
  "data": [
    { "id": 1, "name": "项目 1" }
  ]
}

访问 /api/filename.json 来获取数据。

🏗️ 构建

完整构建

npm run build

仅构建网站

npm run build:www

仅构建 API

npm run build:api

🌐 部署到 Cloudflare

使用 Cloudflare Pages(推荐)

npm run deploy:pages

使用 Cloudflare Workers

npm run deploy

需要提供以下环境变量:

export CLOUDFLARE_API_TOKEN=your_token

📚 更多文档

💡 常见问题

Q: 如何修改网站样式? A: 编辑 scripts/build-www.js 中的 CSS 样式部分。

Q: 可以使用自定义域名吗? A: 可以。部署后在 Cloudflare 仪表板中配置。

Q: 支持动态内容吗? A: 这是纯静态网站。复杂功能可以使用 Cloudflare Workers。


开始创建你的精彩网站吧!🚀