• Stars
    star
    156
  • Rank 239,589 (Top 5 %)
  • Language Astro
  • License
    MIT License
  • Created about 1 year ago
  • Updated 6 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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.

EV0 Astro Theme

Built with Astro

๐Ÿ”ฅ DEMOS

Deploy to Netlify

๐Ÿ”ฅ 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

Lighthouse Score

๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป 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
Oscar Barajas Tavares

๐Ÿ“–
Jhon Achata Limachi
Jhon Achata Limachi

๐Ÿ› ๐Ÿค”
Erasmo Hernรกndez
Erasmo Hernรกndez

๐Ÿ›
Francisco Araujo
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

More Repositories

1

gndx-challenges

10 Projects for Web developers
234
star
2

gndx.io

A free Linktree alternative.
HTML
101
star
3

gndxdev-bot

A Twitch Bot
JavaScript
76
star
4

react-mailchimp-form

React subscribe form for Mailchimp
JavaScript
62
star
5

javascript-challenges

JavaScript
54
star
6

platzi-store

Curso de Pruebas unitarias con Jest
JavaScript
51
star
7

gndx-zsh-theme

An oh-my-zsh theme.
48
star
8

js-portfolio

CSS
47
star
9

react-base

Minimal project in React + Babel + Webpack
JavaScript
42
star
10

funny-initial-git-commit

Funny initial git commit messages
JavaScript
33
star
11

arepa.dev

Recursos en espaรฑol para aprender y dominar JavaScript.
31
star
12

javascript-challenge

JavaScript
31
star
13

gresume-react

Professional Resume CV Template in ReactJS
JavaScript
29
star
14

discord-gndxbot

JavaScript
28
star
15

GResume

Free HTML Professional Resume CV Template
HTML
26
star
16

pugstagram

CSS
26
star
17

react-form-firebase

Simple form with Firebase
JavaScript
25
star
18

portfolio-review

[gndx@stream]:~$ /dev/night-talk portfolio-reviews.js
23
star
19

react-eth-challenge

JavaScript
22
star
20

frontend-resources

Free Frontend Resources
19
star
21

cv.arepa.dev

Create a simple Curriculum Vitae with React Hooks & Styled Components
JavaScript
19
star
22

G404Error

Free 404 Error Page
CSS
17
star
23

svelte-quickstart

Svelte un nuevo framework de JavaScript para construir interfaces de usuario.
HTML
17
star
24

javascript-challenge-03

JavaScript
16
star
25

bebeloper

Bebeloper.com a simple Svelte site.
HTML
16
star
26

react-aws-s3-uploader

It provides an easy-to configure component to Uploading Photos to Amazon S3 from your React project.
JavaScript
16
star
27

gndx10m

JavaScript
14
star
28

react-challenge-01

JavaScript
14
star
29

ghost-on-heroku

JavaScript
13
star
30

javascript-challenge-02

JavaScript
12
star
31

eslint-config-platzi

JavaScript
12
star
32

svelte-base

Simple Svelte Configuration
JavaScript
12
star
33

react-gh-actions

JavaScript
12
star
34

js-challenges

JavaScript
11
star
35

svelte-verbs

Most Common English Verbs
Svelte
11
star
36

cv-react-hooks

Create a simple Curriculum Vitae with React Hooks
JavaScript
10
star
37

nextjs-ui

JavaScript
10
star
38

gndx.dev-v3

A simple blog created by Astro
MDX
10
star
39

react-linkedin-certification

Simply create an โ€œAdd to profileโ€ button and place it in your React Project
JavaScript
10
star
40

platzi-store-backend

JavaScript
7
star
41

cv-react-hooks-styled

Create a simple Curriculum Vitae with React Hooks & Styled Components
JavaScript
7
star
42

gndx.dev-old

JavaScript
7
star
43

metamask-login

JavaScript
7
star
44

curso-ecmascript-2022

JavaScript
7
star
45

100tifi.co

JavaScript
7
star
46

react-challenge-02

JavaScript
6
star
47

platziconf2020

HTML
6
star
48

alexa-quotes

JavaScript
6
star
49

gndx.dev

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

challenge-webpack-react

5
star
51

youTubeTranscribe

Python
5
star
52

live-coding-react-hooks

5
star
53

patitas.arepa.dev

Curso: React
JavaScript
5
star
54

RSVP-DEVC

RSVP Landing Page for Facebook Developer Circles Guadalajara
JavaScript
5
star
55

nextjs-dapp

Minimal configuration for nextjs-dapp
JavaScript
5
star
56

svelte-covid

Svelte + Covid API
Svelte
5
star
57

bebeloper.com

bebeloper.com
HTML
4
star
58

svelte-workshop

JavaScript
4
star
59

live-react-hooks

JavaScript
4
star
60

react-practico

JavaScript
4
star
61

platzi-react-redux

JavaScript
4
star
62

react-practico-vercel

JavaScript
4
star
63

react-quickstart

JavaScript
4
star
64

random-str-msg

Random String Messages
JavaScript
4
star
65

platzi-react-jest

JavaScript
4
star
66

gndx-dev

My Personal blog.
HTML
4
star
67

gndx.io-old

TypeScript
4
star
68

pugstagram-server

Pugstagram fake server
JavaScript
3
star
69

escuelajs-bots

JavaScript
3
star
70

platzibot

Simple Bot Messenger
JavaScript
3
star
71

pugpizza

JavaScript
3
star
72

facebook-live-hello-world

Facebook Developer Circles / Platzi - Clase en Vivo: Hola Mundo en ReactJS
JavaScript
3
star
73

gndx.dev2

3
star
74

platzi-master-quotes

JavaScript
3
star
75

consultorio.dev

Astro
3
star
76

gndx.live

JavaScript
3
star
77

astro-md-generator

Command-line interface (CLI) for adding new posts to your Astro project
JavaScript
3
star
78

travis-gh-pages

JavaScript
3
star
79

empoderatech

HTML
3
star
80

astro-curso

Astro
2
star
81

facebook-live-react-hooks

Clase en vivo โ€œTodo lo que necesitas saber de React Hooksโ€
JavaScript
2
star
82

streamquestions

JavaScript
2
star
83

platzi-jest

JavaScript
2
star
84

oscarbarajas.xyz

A simple LandingPage powered by Astro
Astro
2
star
85

blog-gndx

TypeScript
2
star
86

platzi-project

JavaScript
2
star
87

elmo.monster

Elmo Svelte Site
JavaScript
2
star
88

EpicWarzone

Astro
2
star
89

simple-bot-messenger

JavaScript
2
star
90

my-first-web-page

Clase en vivo: Crea tu primera pรกgina web
CSS
2
star
91

cryptotalks.nft

Platzi CryptoTalks Smart Contract
Solidity
2
star
92

nw-challenge

JavaScript
2
star
93

firebase-api

API con Firebase Cloud functions
JavaScript
2
star
94

ev1-ecommerce-astro

1
star
95

ladrillos.club

Astro
1
star
96

whatsapp-landing

HTML
1
star
97

platzi-express-jest

JavaScript
1
star
98

react-hooks

React Hooks Example
JavaScript
1
star
99

masteryoda

JavaScript
1
star
100

gh-react

1
star