ev0-astro-theme
ev0-astro-theme copied to clipboard
EV0 Astro Theme is a free and open-source serverless blog template, built with Astro, Tailwind CSS, and TypeScript.
π EV0 Astro Theme - Blog Template
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 your personal portfolio website or showcasing your projects online. The template is open-source and released under the MIT license, meaning you are free to use, modify, and distribute it for personal or commercial purposes.
π₯ DEMOS
π₯ Features
- β Minimal styling (Tailwind CSS)
- β 100/100 Lighthouse performance
- β SEO-friendly with canonical URLs and OpenGraph data
- β Dark Mode
- β Sitemap support
- β RSS Feed support
- β Markdown & MDX support
- β View Transitions
- β PWA-ready
- β Fully responsive
- β Robots.txt & Humans.txt
- β TypeScript support
- β Syntax highlighting
- β YouTube Integration
- β CLI for adding new posts
β Lighthouse Score - PWA Ready
π¨π»βπ» VIP Support (optional) $25
Includes personalized assistance via messages/emails, customization of up to 1 feature, assistance for implementation in your hosting and deployment, and advice for future changes. Buy VIP Support.
π Getting Started
Clone this repository to your local machine using Git.
git clone https://github.com/gndx/ev0-astro-theme.git your-project-name
Command | Action |
---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:4321 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run youtube |
Fetches the Latest YouTube Channel Videos |
npm run newpost |
Generate a New Blogpost Markdown Entry |
Edit the HTML files in the src/pages
directory to add your projects, experiences, and personal information.
π Configuration Blog
To configure your blog, edit the src/config/config.json
file. This file contains the following options:
{
"site": {
"title": "EV0 Astro Theme",
"base_url": "https://ev0.gndx.dev/",
"base_path": "/",
"favicon": "/favicon.png",
"logo": "https://s3.amazonaws.com/gndx.dev/ev0-astro-logo.png",
"lang": "en",
"description": "EV0 is a free and open-source serverless blog template, built with Astro, Tailwind CSS, and TypeScript.",
"pageSize": 6
},
"features": {
"youtube": true
},
"metadata": {
"meta_author": "Oscar Barajas @gndx",
"meta_description": "EV0 is a free and open-source serverless blog template, built with Astro, Tailwind CSS, and TypeScript."
},
"author": {
"name": "Oscar Barajas Tavares @gndx",
"avatar": "https://s3.amazonaws.com/gndx.dev/gndx-astro-avatar.png",
"bio": "EV0 is a free and open-source serverless blog template, built with Astro, Tailwind CSS, and TypeScript."
}
}
The menu is configured in the src/config/menu.json
file. This file contains the following options:
[
{
"name": "Home",
"url": "/"
},
{
"name": "Blog",
"url": "/blog"
},
]
Social networks are configured in the src/config/social.json
file. This file contains the following options:
{
"name": "Instagram",
"url": "https://instagram.com/gndx"
"svg": "...."
}
π₯ YouTube Integration
To integrate your YouTube channel, you need to create a new file called .env
in the root directory of your project. Then add the CHANNEL_ID
and API_KEY
to get the latest videos from your YouTube channel in src/config/youtube.json
.
npm run youtube
Your YouTube API is not used in production.
Requires an API KEY for YouTube API V3 - Google Console
You can disable the youtube integration by modifying the src/config/config.json
.
"features": {
"youtube": false
},
π Adding New Posts
To add a new post, run the following command:
npm run newpost
Follow the instructions and this will generate a new markdown file in the src/content/blog
directory. Edit the file to add your post content.
π Project Structure
/
βββ public/
β βββ favicons/
β βββ fonts/
β βββ blog-placeholder.jpg
β βββ favicon.png
β βββ humans.txt
βββ scripts/
β βββ youtube.cjs
βββ src/
β βββ components/
β βββ config/
β βββ content/
β βββ layouts/
β βββ pages/
β βββ styles/
β βββ env.d.ts
βββ package.json
βββ astro.config.mjs
βββ tailwind.config.js
βββ tsconfig.json
βββ .gitignore
π» Contributing
Contributions to this project are welcome. If you find a bug or have a suggestion for improvement, please open an issue or submit a pull request.
Oscar Barajas Tavares π |
Jhon Achata Limachi π π€ |
Erasmo HernΓ‘ndez π |
Francisco Araujo π¨ π |
π License
This project is licensed under the MIT License. See the LICENSE
file for details.
β Support
If this project helped you learn something new, or if you're feeling particularly generous, you can buy me a coffee. It's greatly appreciated! π GitHub Sponsors