Introduction

Openblog is an elegant, simple, and user-friendly blog template built with Astro and designed for optimal accessibility, SEO, and performance. This template provides a solid foundation for creating a modern, fast-loading blog with a focus on user experience and search engine visibility. It combines powerful features with a clean design, making it an excellent choice for developers and content creators looking to establish a professional online presence.

Main Features

• Minimal styling for a clean, professional look
• Mobile-responsive design
• Perfect 100/100 Lighthouse performance score
• SEO-friendly with canonical URLs and OpenGraph data
• Sitemap and RSS Feed support
• Markdown and MDX content support
• Syntax highlighting for code blocks
• Image optimization
• Table of contents for easy navigation
• Dark mode support
• Reading time estimation
• Pagefind static search library integration
• Related posts functionality
• Social media sharing for posts (LinkedIn, Twitter)
• Draft mode for unpublished content
• Copy code block functionality
• Integrated CMS using Tina CMS
• Pagination support
• View Transitions for smooth page changes

Installation Steps

1. Clone the repository:

   git clone https://github.com/danielcgilibert/blog-template.git my-blog
   

2. Navigate to the project directory:

   cd my-blog
   

3. Install dependencies:

   pnpm install
   

4. Run the development server:

   pnpm dev
   

Usage Instructions

1. Configuration:

   • Edit src/data/site.config.ts for basic blog metadata
   • Update astro.config.mjs with your domain
   • Modify files in the /public folder (favicon, robots.txt, open-graph images)
   • Edit social network links in src/components/Header.astro

2. Adding Categories:

   • Add new categories in src/data/categories.ts

3. Creating Posts:

   • Add .md or .mdx files to src/content/blog
   • Use the filename to create the post's slug/URL

4. Frontmatter:

   • Required: title, description, pubDate, heroImage, category
   • Optional: draft, tags

5. Draft Mode:

   • Add draft: true to the frontmatter to prevent a post from being displayed

6. Using Tina CMS:

   • Access the CMS to create and edit posts visually

7. Build for production:

   pnpm run build
   

8. Preview the production build:

   pnpm run preview
   

Important Notes

1. The template uses Tailwind CSS for styling, providing utility-first CSS capabilities.

2. Zod is used for schema validation, ensuring post frontmatter is correctly formatted.

3. The template includes ESLint and Prettier for code formatting and linting.

4. Tina CMS integration is optional and can be removed if not needed.

5. The project uses TypeScript for improved type safety and developer experience.

6. View Transitions are implemented for smooth page navigation, enhancing user experience.

7. The template is optimized for SEO with features like canonical URLs and OpenGraph data.

8. Regular updates to dependencies are recommended to maintain security and performance.

9. Customization options are available for colors, post authors, and internationalization in future updates.

10. The project is open-source and welcomes contributions, with a roadmap for future enhancements.