paoloronco/paoloroncoit-website
GitHub: paoloronco/paoloroncoit-website
基于 Astro 5 和 Tailwind CSS 构建的个人作品集与双语技术博客，集成 WordPress 迁移、LLM 自动翻译及 AI 问答助手功能。
Stars: 0 | Forks: 0
# paoloronco.it
Paolo Ronco 的个人作品集与技术博客 —— Deloitte（企业云与 AI 安全团队）网络安全分析师。
**在线访问：** [paoloronco.it](https://paoloronco.it)
## 技术栈
| 层级 | 技术 |
|---|---|
| 框架 | [Astro 5](https://astro.build) —— 静态优先，默认 0 JS |
| 样式 | [Tailwind CSS v4](https://tailwindcss.com) —— 设计 token 位于 `src/styles/global.css` |
| 内容 | Astro Content Collections（Markdown/MDX）—— 文章与项目存储于 Git |
| 部署 | [Vercel](https://vercel.com) —— 边缘部署，静态输出并带有按需 API 路由 |
| i18n | 内置 Astro i18n —— 意大利语（默认）+ 英语，根据设备语言自动检测 |
| 分析 | CookieYes + Google Analytics + Microsoft Clarity（均需授权同意） |
## 项目结构
```
src/
├── data/
│ ├── site.ts # central profile, nav, domains — single source of truth
│ ├── skills.ts # skill categories with proficiency levels and tools
│ └── certs.ts # certifications data
├── content/
│ ├── writing/ # 130+ articles (it/ and en/)
│ └── work/ # project case files (it/ and en/)
├── layouts/
│ └── Base.astro # base layout — SEO, JSON-LD, hreflang, lang auto-redirect
├── components/
│ ├── views/ # one view component per page
│ └── ... # SiteHeader, SiteFooter, CommandPalette, Terminal, ChatWidget
├── pages/ # thin page files that import view components
│ └── api/ # on-demand API routes (ask proxy)
└── i18n/
├── ui.ts # all UI strings in IT and EN
└── utils.ts # getLangFromUrl, useTranslations, localizePath
public/
├── llms.txt # LLM-optimized site context
├── robots.txt
├── humans.txt
└── .well-known/
└── security.txt
```
## 快速开始
```
npm install
npm run dev # dev server → http://localhost:4321
npm run build # static build → dist/
npm run preview # preview the build locally
npm run check # Astro type-check
```
## 环境变量
在 Vercel 的 **Project Settings → Environment Variables**（或在本地 `.env`）中进行设置：
```
# Analytics（均为可选 —— 若缺失，该 provider 只是在构建中被排除）
PUBLIC_COOKIEYES_ID=your-cookieyes-client-id
PUBLIC_GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX
PUBLIC_MICROSOFT_CLARITY_ID=your-clarity-project-id
# AI assistant proxy —— /api/ask 转发至自托管的 n8n webhook
N8N_WEBHOOK_URL=https://your-n8n-instance/webhook/ask
```
## 内容迁移脚本
`scripts/` 中的脚本涵盖了完整的 WordPress → Astro 迁移 pipeline：
```
# 1. 从 WordPress XML 导入文章 → writing/it/ 中的 Markdown 文章
node scripts/import-wordpress.mjs "path/to/export.xml"
# 2. 将远程文章图片下载到本地 → public/posts//
node scripts/download-post-images.mjs
# 3. 通过 LLM 将 IT 文章翻译为 EN（writing/en/）
# 使用本地 Ollama 免费运行：
LLM_BASE_URL=http://localhost:11434/v1 LLM_MODEL=qwen2.5:7b node scripts/translate-articles.mjs
# 或使用 OpenAI：
LLM_API_KEY=sk-... LLM_MODEL=gpt-4o-mini node scripts/translate-articles.mjs
# 选项：LIMIT=10（仅前 N 项），FORCE=1（重新翻译已有内容）
```
## 添加内容
**新文章：** 复制 `src/content/writing/_template.md.txt`，将其放置于 `writing/it/.md`（及可选的 `writing/en/.md`），并填写 frontmatter。
**新项目：** 复制 `src/content/work/_template.md.txt`，将其放置于 `work/it/.md` 和 `work/en/.md`。
这两个集合均使用在 `src/content.config.ts` 中定义的相同 schema。
## 许可证
代码：[MIT](./LICENSE)
内容（文章、项目）：© Paolo Ronco —— 保留所有权利。
标签：AI风险缓解, Astro, Tailwind CSS, 个人作品集, 技术博客, 静态网站