Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

21 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Astro Blog

A minimalist, fast blog on Astro with Markdown, search, RSS, and SEO support.

πŸš€ Project Structure

/
β”œβ”€β”€ 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

πŸ“ Adding a New Post

  1. Create a new .md file in src/content/posts/
  2. Add frontmatter:
---
title: "Post Title"
description: "Short description"
date: 2025-01-28
tags: ["javascript", "astro"]
---

## Your content here

Write your post in Markdown...
  1. Commit and push changes to GitHub

πŸ› οΈ Commands

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

🎨 Color Scheme

  • Primary (Background, text): #2C3E4F β€” dark blue/charcoal
  • Accent: #D4A76A β€” sand/gold
  • Background: #1a252f β€” dark background
  • Text: #e4e4e4 β€” light text

πŸ”§ Pre-deployment Setup

  1. In astro.config.mjs change site to your domain:
export default defineConfig({
  site: 'https://yourdomain.com',
  // ...
});
  1. Add favicon to public/favicon.svg
  2. Add og-image to public/og-image.jpg for social networks

🏠 Deploying to Home Server

Method 1: Nginx (recommended)

1. Build the project

npm run build

This will create the dist/ folder with all static files.

2. Nginx configuration

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;
}

3. Activate configuration

sudo ln -s /etc/nginx/sites-available/blog /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

4. SSL with Let's Encrypt (optional, but recommended)

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

Method 2: Automatic Deploy from GitHub

Deploy script

Create 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_DIR

The blog includes:

  • βœ… Semantic HTML
  • βœ… Meta tags (title, description)
  • βœ… Open Graph for social networks
  • βœ… Twitter Cards
  • βœ… RSS feed (/rss.xml)
  • βœ… Sitemap (generated automatically)
  • βœ… Clean URLs

⚑ Performance

  • Static generation β€” instant loading
  • Zero JavaScript (except search)
  • Image optimization β€” use WebP
  • CSS inlining β€” critical styles
  • Gzip compression β€” via Nginx

πŸ“± Responsiveness

The design is fully responsive for all devices.

🎯 Further Improvements

  • Comments via Giscus
  • Analytics (e.g., Plausible)
  • Dark/Light mode
  • Table of contents for posts
  • Reading time
  • Related posts
  • Pagination

πŸ“„ License

MIT

🀝 Contributing

Pull requests are welcome!

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages