Tailwind Resources Logo Tailwind Resources
Ev0 Astro Theme screenshot

Ev0 Astro Theme

Author Avatar Theme by Gndx
Updated: 3 Nov 2024
188 Stars

EV0 Astro Theme is a free and open-source serverless blog template, built with Astro, Tailwind CSS, and TypeScript.

Github Live Preview

Categories

Astro React Blog

Overview

EV0 Astro Theme is a free and open-source serverless blog template built with Astro, Tailwind CSS, and TypeScript. It serves as a starting point for creating personal portfolio websites or showcasing projects online. The template is open-source and released under the MIT license, allowing for free use, modification, and distribution for personal or commercial purposes.

Features

  • Minimal styling (Tailwind CSS): Provides a simple and clean design aesthetic.
  • 100/100 Lighthouse performance: Optimized for fast loading times and high performance.
  • SEO-friendly with canonical URLs and OpenGraph data: Helps improve search engine visibility and social media sharing.
  • Dark Mode: Offers a dark color scheme for improved readability in low-light situations.
  • Sitemap support: Automatically generates a sitemap to improve search engine indexing.
  • RSS Feed support: Allows visitors to subscribe to blog updates through an RSS feed.
  • Markdown & MDX support: Supports writing content in both Markdown and MDX formats.
  • View Transitions: Provides smooth transitions between pages for a better user experience.
  • PWA-ready: Fully compatible with Progressive Web App (PWA) standards.
  • Fully responsive: Adjusts to different screen sizes and devices for a seamless experience.
  • Robots.txt & Humans.txt: Includes files for managing search engine crawling and providing information about the site.
  • TypeScript support: Utilizes TypeScript for improved code quality and tooling.
  • Syntax highlighting: Highlights code snippets for improved readability.
  • YouTube Integration: Allows for integrating a YouTube channel to showcase videos.
  • CLI for adding new posts: Offers a command-line interface for adding new blog posts easily.

Installation

To get started with EV0 Astro Theme, follow these steps:

  1. Clone this repository to your local machine using Git.
  2. Run npm install to install dependencies.
  3. Use npm run dev to start the local development server at localhost:4321.
  4. Use npm run build to build your production site to ./dist/.
  5. Use npm run preview to preview your build locally before deploying.
  6. Use npm run youtube to fetch the latest YouTube channel videos.
  7. Use npm run newpost to generate a new blog post Markdown entry.

Additionally, you can edit the HTML files in the src/pages directory to add your projects, experiences, and personal information. To configure your blog, edit the src/config/config.json file. The configuration options for the menu and social networks can be found in the respective JSON files under src/config.

To integrate your YouTube channel, create a new file called .env in the root directory of your project and add the CHANNEL_ID and API_KEY values to fetch the latest videos from your YouTube channel. Note that the YouTube API is not used in production, and you can disable the YouTube integration by modifying the src/config/config.json file.

To add a new post, run the command npm run newpost and follow the instructions. This will generate a new Markdown file in the src/content/blog directory. Edit the file to add your post content.

Summary

EV0 Astro Theme is a serverless blog template that provides a minimal and stylish design. It offers various features such as SEO optimization, dark mode, sitemap support, and YouTube integration. The template is easy to install and configure, with support for Markdown and MDX formats. With its PWA readiness and responsive design, EV0 Astro Theme offers a great starting point for creating personal portfolio websites or showcasing projects online.