112 lines
3.0 KiB
Markdown
112 lines
3.0 KiB
Markdown
# slashroot-cc
|
|
|
|
Welcom to my web blog deployment https://slashroot.cc
|
|
|
|
AMG Petronas green themed personal blog built with Astro.
|
|
|
|
## Stack
|
|
|
|
- **Astro 4** — static site framework
|
|
- **MDX** — blog posts in Markdown with component support
|
|
- **Content Collections** — typed blog frontmatter
|
|
- **GSAP** (optional) — parallax scroll
|
|
- Zero CSS frameworks — all custom, CSS variables
|
|
|
|
## Quick Start (WSL / Debian)
|
|
|
|
```bash
|
|
cd sysadmin-blog
|
|
npm install
|
|
npm run dev
|
|
# → http://localhost:4321
|
|
```
|
|
|
|
## File Structure
|
|
|
|
```
|
|
src/
|
|
├── components/
|
|
│ ├── ParallaxHero.astro ← rack corridor parallax landing hero
|
|
│ ├── RecentPosts.astro ← last 3 blog posts (auto-fetched)
|
|
│ └── HomelabStatus.astro ← live metrics widget (demo + real API)
|
|
│
|
|
├── content/
|
|
│ ├── config.ts ← blog collection schema
|
|
│ └── blog/
|
|
│ ├── day-001-*.md ← Day 1 entry
|
|
│ ├── day-002-*.md ← Day 2 entry
|
|
│ └── day-003-*.md ← Day 3 entry
|
|
│
|
|
├── layouts/
|
|
│ ├── BaseLayout.astro ← nav + footer wrapper
|
|
│ └── PostLayout.astro ← blog post with TOC sidebar
|
|
│
|
|
├── pages/
|
|
│ ├── index.astro ← landing (hero + posts + homelab)
|
|
│ ├── blog/
|
|
│ │ ├── index.astro ← all posts listing
|
|
│ │ └── [slug].astro ← dynamic post page
|
|
│ ├── homelab.astro ← architecture diagram + live metrics
|
|
│ ├── hardware.astro ← full hardware inventory
|
|
│ └── 404.astro
|
|
│
|
|
└── styles/
|
|
└── global.css ← all CSS variables, typography, base
|
|
```
|
|
|
|
## Writing a New Blog Post
|
|
|
|
Create `src/content/blog/day-NNN-your-title.md`:
|
|
|
|
```markdown
|
|
---
|
|
title: "Day 4 — Setting Up the Monitoring Stack"
|
|
description: "Netdata → VictoriaMetrics → Grafana"
|
|
pubDate: 2024-11-22
|
|
day: 4
|
|
tags: ["monitoring", "grafana", "victoriametrics", "netdata"]
|
|
---
|
|
|
|
Your content here...
|
|
```
|
|
|
|
The `day` field is optional — use it for the numbered series entries.
|
|
|
|
## Connecting Live Homelab Metrics
|
|
|
|
In `src/components/HomelabStatus.astro` and `src/pages/homelab.astro`:
|
|
|
|
1. Set `USE_DEMO = false`
|
|
2. Set `NETDATA_BASE` to your Netdata URL (e.g. `http://netdata.int.h0melab.uk`)
|
|
3. The fetch calls use the Netdata REST API v1 — adapt to your endpoint structure
|
|
|
|
For a custom FastAPI endpoint (like your FC Porto fixture scraper pattern):
|
|
|
|
```typescript
|
|
// Example: GET /api/homelab/status
|
|
const data = await fetch("https://api.h0melab.uk/homelab/status").then((r) =>
|
|
r.json(),
|
|
);
|
|
```
|
|
|
|
## Colour Variables
|
|
|
|
All theme colours live in `src/styles/global.css`:
|
|
|
|
```css
|
|
--petronas-teal: #00d2be --petronas-green: #00a19c --petronas-dark: #007a76
|
|
--bg-void: #050a0a;
|
|
```
|
|
|
|
## Deployment
|
|
|
|
```bash
|
|
npm run build # outputs to dist/
|
|
# Deploy dist/ to any static host: Cloudflare Pages, Netlify, Vercel, nginx
|
|
```
|
|
|
|
For Cloudflare Pages (recommended for rcosta.uk):
|
|
|
|
- Build command: `npm run build`
|
|
- Output directory: `dist`
|