A minimalist, fast blog on Astro with Markdown, search, RSS, and SEO support.
/
βββ public/ # Static files (favicon, images)
βββ src/
β βββ components/ # Astro components
β β βββ SEO.astro # SEO meta tags
β β βββ Search.astro # Client-side search
β βββ content/ # Content collections
β β βββ config.ts # Content schema
β β βββ posts/ # Markdown posts
β βββ layouts/ # Layouts
β β βββ Layout.astro # Main layout
β βββ pages/ # Pages and routes
β β βββ index.astro
β β βββ blog/
β β β βββ index.astro # Post list
β β β βββ [slug].astro # Single post
β β β βββ tags/[tag].astro # Tag filter
β β βββ rss.xml.js # RSS feed
β βββ styles/
β βββ global.css # Global styles
βββ astro.config.mjs
βββ package.json
βββ tsconfig.json
- Create a new
.mdfile insrc/content/posts/ - Add frontmatter:
---
title: "Post Title"
description: "Short description"
date: 2025-01-28
tags: ["javascript", "astro"]
---
## Your content here
Write your post in Markdown...- Commit and push changes to GitHub
| Command | Description |
|---|---|
npm install |
Install dependencies |
npm run dev |
Start dev server at localhost:4321 |
npm run build |
Build to ./dist/ |
npm run preview |
Preview the built site |
- Primary (Background, text):
#2C3E4Fβ dark blue/charcoal - Accent:
#D4A76Aβ sand/gold - Background:
#1a252fβ dark background - Text:
#e4e4e4β light text
- In
astro.config.mjschangesiteto your domain:
export default defineConfig({
site: 'https://yourdomain.com',
// ...
});- Add favicon to
public/favicon.svg - Add og-image to
public/og-image.jpgfor social networks
npm run buildThis will create the dist/ folder with all static files.
Create the file /etc/nginx/sites-available/blog:
server {
listen 80;
server_name yourdomain.com www.yourdomain.com;
root /var/www/blog;
index index.html;
# Compression
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_types text/plain text/css text/xml text/javascript
application/x-javascript application/xml+rss
application/javascript application/json;
# Static resource caching
location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# Clean URLs support
location / {
try_files $uri $uri/ $uri.html =404;
}
# Security
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-XSS-Protection "1; mode=block" always;
}sudo ln -s /etc/nginx/sites-available/blog /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginxsudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.comCreate a file deploy.sh in the project root:
#!/bin/bash
# Variables
REPO_URL="https://github.com/yourusername/blog.git"
DEPLOY_DIR="/var/www/blog"
TEMP_DIR="/tmp/blog-deploy"
echo "π Starting deploy..."
# Clone repository
echo "π¦ Cloning repository..."
rm -rf $TEMP_DIR
git clone $REPO_URL $TEMP_DIRThe blog includes:
- β Semantic HTML
- β Meta tags (title, description)
- β Open Graph for social networks
- β Twitter Cards
- β
RSS feed (
/rss.xml) - β Sitemap (generated automatically)
- β Clean URLs
- Static generation β instant loading
- Zero JavaScript (except search)
- Image optimization β use WebP
- CSS inlining β critical styles
- Gzip compression β via Nginx
The design is fully responsive for all devices.
- Comments via Giscus
- Analytics (e.g., Plausible)
- Dark/Light mode
- Table of contents for posts
- Reading time
- Related posts
- Pagination
MIT
Pull requests are welcome!