Webtrotion

Notion Integration

Webtrotion allows users to create a website using content stored in their Notion workspace. This eliminates the need for separate content management systems and streamlines the content creation process.

Astro Framework

Webtrotion uses Astro, a static site generator that's known for its speed and performance. Astro renders pages on the server, making them load quickly and efficiently for users.

Blog Features

Webtrotion provides the capability to create a blog with features like post authoring, category organization, and commenting.

Customizable Themes

Webtrotion offers customizable themes that allow users to tailor the look and feel of their website to match their brand and preferences.

Open Source

Webtrotion is open-source, which means that its code is publicly available and can be modified or extended by developers. This allows users to customize the platform or contribute to its development.

• Bloggers: Use Webtrotion to build a website and streamline content creation directly from Notion, enhancing webtrition and blog management.
• Website Developers: Implement Webtrotion for rapid website prototyping using Astro and Notion CMS, improving webtrition and deployment workflows.
• Content Creators: Leverage Webtrotion's single file configuration and Notion integration to create SEO-friendly, responsive webtoon-style content.
• Small Businesses: Establish an online presence with Webtrotion, utilizing its cost-effective and configurable Astro-Notion CMS website builder.
• Open Source Enthusiasts: Contribute to and customize the Webtrotion project, extending its features and integrations for wider webtrition adoption.

What is Webtrotion?

Webtrotion is an open-source template that helps you build your own website or blog using Astro and Notion as a content management system (CMS). It uses Astro for its front-end and utilizes Notion as the source of your content, allowing you to write and edit your website directly within Notion.

How do I use Webtrotion?

You can find the source code for Webtrotion on GitHub. To use it, you'll need to clone the repository and set up a few things, like your Notion API key and other configurations. It's quite straightforward, and you can find detailed instructions in the README file within the repository.

What are the benefits of using Webtrotion?

Webtrotion offers a few key advantages:

• Simple Content Management: It allows you to manage your website content directly within Notion, which is user-friendly and familiar to many.
• Fast and Optimized: It's built using Astro, known for its performance and speed.
• Customization: You can customize the template to fit your brand and design preferences.

What kind of websites can I build with Webtrotion?

You can use Webtrotion for a variety of websites and blogs, including personal blogs, business websites, portfolio sites, and more.

How does Webtrotion compare to other website builders?

Webtrotion offers a different approach by utilizing Notion for content management, providing a seamless workflow between content creation and website display. Compared to traditional website builders, it offers a more developer-friendly experience with more flexibility. However, for those who prefer a drag-and-drop interface and are less familiar with code, traditional website builders might be a better fit.

Webtrotion is a starter website built with Astro and Notion, allowing users to create blogs and full websites. It integrates directly with Notion, using TailwindCSS and CSS variables for customization.

• First, deploy the Webtrotion template from the GitHub repository, ensuring you have an Astro environment set up. This action initializes the website.

• Configure the constants-config.json file to customize website settings. This includes TailwindCSS, site metadata, colors, and integration options for personalized control.

• Connect your Notion workspace by correctly setting up the Notion API integration. Input the Notion API key and database ID into your configuration file.

• Create and structure your website content within Notion, utilizing supported blocks for different content types. Structure pages and blog posts inside Notion databases.

• Run the local development server using npm run dev to preview your Webtrotion site. Check for layout and content integration issues during development.

• Customize TailwindCSS classes to match your brand, leveraging Notion color matching capabilities. Edit the Tailwind configuration file for specific adjustments.

• Enable features like Giscus or Bluesky comments via configuration to engage with your audience. Configure webmentions to track mentions of your site elsewhere.

• Build your static website using npm run build for optimized production files. This process generates the final website ready for deployment.

• Deploy your static files to hosting providers such as GitHub Pages or Netlify. Automate deployment via GitHub Actions for continuous integration and deployment.

• Regularly update your content in Notion; the changes should automatically reflect on the deployed Webtrotion site. Use Github Actions caching for quick rebuilds.