Webtrotion

基于 Astro 和 Notion 的静态网站生成器

Webtrotion 是一款使用 Astro 和 Notion 搭建静态网站的工具。

使用 Notion 作为内容管理系统

Webtrotion 使用 Notion 作为内容管理系统，用户可以在 Notion 中创建和编辑网站内容，并通过 Webtrotion 将内容同步到网站。

基于 Astro 的静态网站生成

Webtrotion 使用 Astro 构建静态网站。Astro 是一种快速、高效的静态网站生成器，可以生成 SEO 友好、性能优化的网站。

支持自定义主题

Webtrotion 提供多种预设主题，也可以通过自定义代码来创建自己的主题。

支持多种功能

Webtrotion 支持多种功能，例如：

• 博客功能
• 页面路由
• 自定义组件
• SEO 优化
• 图片优化

易于使用

Webtrotion 易于使用，即使没有开发经验的用户也可以轻松创建自己的网站。

• 博客作者：使用 Webtrotion 构建网站，并直接从 Notion 简化内容创作，从而增强网站运营和博客管理。
• 网站开发者：实施 Webtrotion，利用 Astro 和 Notion CMS 快速进行网站原型设计，从而改善网站运营和部署工作流程。
• 内容创作者：利用 Webtrotion 的单文件配置和 Notion 集成来创建对 SEO 友好、响应迅速的网络漫画风格内容。
• 小型企业：使用 Webtrotion 建立在线形象，利用其经济高效且可配置的 Astro-Notion CMS 网站构建器。
• 开源爱好者：贡献和定制 Webtrotion 项目，扩展其功能和集成，以实现更广泛的网站运营应用。

Webtrotion 是什么？

Webtrotion 是一个基于 Astro 的网站生成器，它可以让你用 Notion 来构建网站，并发布到网络上。使用 Webtrotion，你不需要学习任何前端开发知识，就可以轻松创建自己的网站或博客。

如何使用 Webtrotion？

首先你需要在 Notion 中创建一个新的页面，然后使用 Webtrotion 的模板来创建你的网站结构。Webtrotion 会自动将你的 Notion 页面内容转换为静态网站，并发布到你的服务器上。

Webtrotion 的优势是什么？

Webtrotion 使用 Astro，这是一个快速、轻量级的网站生成器。使用 Notion 来管理你的内容，可以让你轻松地创建和更新你的网站。Webtrotion 也支持 SEO，可以帮助你的网站在搜索引擎中获得更好的排名。

Webtrotion 适合哪些人使用？

如果你想创建自己的网站或博客，但没有前端开发经验，Webtrotion 是一个不错的选择。Webtrotion 也适合那些希望使用 Notion 来管理网站内容的人。

Webtrotion 是一个使用 Astro 和 Notion 构建的入门级网站，允许用户创建博客和完整的网站。它直接与 Notion 集成，使用 TailwindCSS 和 CSS 变量进行自定义。

• 首先，从 GitHub 仓库部署 Webtrotion 模板，确保你已设置好 Astro 环境。此操作会初始化网站。

• 配置 constants-config.json 文件以自定义网站设置。这包括 TailwindCSS、站点元数据、颜色以及用于个性化控制的集成选项。

• 通过正确设置 Notion API 集成来连接你的 Notion 工作区。将 Notion API 密钥和数据库 ID 输入到你的配置文件中。

• 在 Notion 中创建和组织你的网站内容，利用支持的块用于不同的内容类型。在 Notion 数据库中组织页面和博客文章。

• 使用 npm run dev 运行本地开发服务器以预览你的 Webtrotion 站点。在开发过程中检查布局和内容集成问题。

• 自定义 TailwindCSS 类以匹配你的品牌，利用 Notion 颜色匹配功能。编辑 Tailwind 配置文件以进行特定调整。

• 通过配置启用 Giscus 或 Bluesky 评论等功能，以与你的受众互动。配置 Webmentions 以跟踪其他地方对你网站的提及。

• 使用 npm run build 构建你的静态网站，以获得优化的生产文件。此过程生成可供部署的最终网站。

• 将你的静态文件部署到 GitHub Pages 或 Netlify 等托管提供商。通过 GitHub Actions 自动化部署，以实现持续集成和部署。

• 定期在 Notion 中更新你的内容；更改应自动反映在已部署的 Webtrotion 站点上。使用 Github Actions 缓存以实现快速重建。