A personal blog built with Astro and a brutalist theme, migrated from Ghost CMS to a modern static site generator.
A blog where I talk to myself to answer my own questions about tech, engineering, and working with people. This site was migrated from a Ghost blog running on Digital Ocean to a static Astro site for better performance, lower costs, and easier maintenance.
- Astro - Static site generator
- UnoCSS - Atomic CSS engine (TailwindCSS compatible)
- Brutal UI - Brutalist design system
- TypeScript - Type safety
- pnpm - Package manager
- asdf - Version management
This blog is built on the Brutal neobrutalist Astro theme, which provides:
- Neobrutalist Design - Minimalistic and functional aesthetic
- No JavaScript by default - Pure static generation approach
- UnoCSS Integration - Utility-first CSS with TailwindCSS compatibility
- Built-in SEO - Automatic sitemap, RSS feed, and image optimization
- 16 Color Palette - Predefined brutalist colors (red, blue, green, yellow, pink, purple, orange, teal, cyan, lime, emerald, fuchsia, violet, rose, sky, amber)
We've significantly evolved the base theme with these improvements:
| Base Theme | Our Enhanced Version | Benefits |
|---|---|---|
| Basic Astro setup | TypeScript integration | Full type safety and better DX |
| Simple markdown posts | Advanced content management | Structured blog with tags, metadata |
| Basic image handling | OG image generation | Automatic social media previews |
| Standard RSS feed | Enhanced RSS + sitemap | Better SEO and content discovery |
| Basic styling | Custom brutalist components | Unique design system |
| No version management | asdf + pnpm setup | Consistent development environment |
| Basic deployment | GitHub Actions + Firebase ready | Automated CI/CD pipeline |
| Ghost migration | Complete CMS migration | Preserved content and SEO |
| Security baseline | Regular security updates | Astro 4.16.19 with latest patches |
-
Clone the repository
git clone https://github.com/ephbaum/ephbaumdotdev.git cd ephbaumdotdev -
Install dependencies
pnpm install
-
Start development server
pnpm run dev
-
Open your browser Navigate to http://localhost:4321
Based on the original Brutal theme with our enhancements:
| Command | Action | Notes |
|---|---|---|
pnpm run dev |
Start local dev server at localhost:4321 |
Enhanced with TypeScript support |
pnpm run build |
Build production site to ./dist/ |
Includes OG image generation |
pnpm run preview |
Preview build locally before deploying | Test production build |
pnpm run astro |
Run Astro CLI commands | Full CLI access |
pnpm run astro --help |
Get help using the Astro CLI | Documentation |
src/
├── components/ # Reusable UI components
│ ├── blog/ # Blog-specific components (from base theme)
│ ├── errors/ # Error pages like 404 (from base theme)
│ ├── generic/ # Reusable components (from base theme)
│ ├── home/ # Homepage components (from base theme)
│ └── layout/ # Header, footer, head sections (from base theme)
├── content/ # Blog posts and content
│ └── blog/ # Markdown blog posts with frontmatter
├── layouts/ # Page layouts
│ ├── Default.astro # Base layout with props system
│ └── BlogPost.astro # Blog-specific layout
├── pages/ # File-based routing
│ ├── blog/ # Blog listing and individual posts
│ ├── v1/generate/ # OG image generation (custom addition)
│ ├── feed.xml.js # RSS feed (from base theme)
│ └── index.astro # Homepage
└── styles/ # Global styles and UnoCSS config
Following the base theme's structure with our enhancements:
components/blog/- Blog listing, content, sidebar componentscomponents/errors/- 404 page and error handlingcomponents/generic/- Reusable components like RecentBlogPostscomponents/home/- Homepage-specific componentscomponents/layout/- BaseHead, BaseNavigation, BaseFooter
- Static Site Generation - Fast, secure, and SEO-friendly
- Brutalist Design - Bold, functional, and distinctive UI
- Responsive Layout - Works on all devices
- OG Image Generation - Automatic social media previews
- RSS Feed -
/feed.xmlfor subscribers - Sitemap - Automatic SEO sitemap generation
- Image Optimization - Automatic WebP conversion and optimization
- TypeScript - Full type safety throughout
The theme includes 16 predefined brutalist colors that can be used throughout the site:
Primary Colors: red, blue, green, yellow, pink, purple, orange, teal
Secondary Colors: cyan, lime, emerald, fuchsia, violet, rose, sky, amber
These colors are used in:
- Background sections (
bg-pink,bg-green,bg-blue, etc.) - Component styling
- Page layouts and visual hierarchy
- Maintaining the brutalist aesthetic
Blog posts are written in Markdown and stored in src/content/blog/. Each post includes:
- Frontmatter with metadata (title, date, tags, etc.)
- Markdown content
- Automatic OG image generation
- SEO optimization
This project is regularly updated to address security vulnerabilities:
- Astro 4.16.19 - Latest stable version with security fixes
- Regular dependency updates - Automated security patches
- Static site - No server-side vulnerabilities
- Audit workflow - Regular security scanning
The site is designed to be deployed as a static site using:
- GitHub Actions - Automated CI/CD pipeline
- Firebase Hosting - Fast, global CDN
- Custom Domain -
ephbaum.dev
pnpm run buildThis generates optimized static files in the dist/ directory, ready for deployment.
- Create Firebase project for
ephbaum.dev - Enable Firebase Hosting
- Configure custom domain mapping
- Set up Firebase service account with minimal permissions
- Create
.github/workflows/deploy.yml - Configure GitHub Secrets:
FIREBASE_SERVICE_ACCOUNT- Service account JSON keyFIREBASE_PROJECT_ID- Firebase project ID
- Set up automatic deployment on push to
mainbranch
- Configure Firebase service account with hosting-only permissions
- Set up proper CORS and security headers
- Configure redirects and rewrites for SEO
- Test deployment pipeline
- Configure custom domain
ephbaum.dev - Set up SSL certificate (automatic with Firebase)
- Configure DNS settings
- Test live deployment
Why This Setup is Safe:
- ✅ Static site only - No server-side code execution
- ✅ Public content - Blog posts are meant to be public
- ✅ No secrets in build - Firebase tokens stored in GitHub Secrets
- ✅ Minimal permissions - Service account restricted to hosting only
- ✅ Encrypted secrets - GitHub Secrets are encrypted at rest
What We're Protecting:
- 🔐 Firebase service account credentials
- 🔐 Project configuration
- 🔐 Deployment tokens
- 🔐 Any future API keys (if needed)
graph LR
A[Push to main] --> B[GitHub Actions]
B --> C[Install dependencies]
C --> D[Build Astro site]
D --> E[Deploy to Firebase]
E --> F[Live at ephbaum.dev]
Automated Process:
- Code Push → Triggers GitHub Actions
- Build →
pnpm install→pnpm run build - Deploy → Upload
dist/to Firebase Hosting - Live → Site available at
ephbaum.dev
This blog was migrated from Ghost CMS, which involved:
- Database export - MySQL dump to Markdown conversion
- Image migration - Asset optimization and organization
- URL preservation - Maintaining existing permalinks
- SEO preservation - Keeping search engine rankings
This is a personal blog, but suggestions and improvements are welcome:
- Fork the repository
- Create a feature branch
- Make your changes
- Submit a pull request
This project's code, configuration files, and documentation are licensed under the MIT License - see the LICENSE file for details.
IMPORTANT: All blog content, articles, and written material on this site are copyrighted by Eph Baum and are NOT covered by the MIT license. This includes:
- Blog posts and articles
- Personal writings and opinions
- Original images and graphics created by the author
- Any other creative content
Any copyrighted material from third parties (images, quotes, references, etc.) used on this site is used under fair use standards for commentary, criticism, education, and news reporting purposes.
You may not reproduce, distribute, or use the blog content without explicit written permission from the copyright holder.
- Live Site: ephbaum.dev
- Repository: github.com/ephbaum/ephbaumdotdev
- Author: Eph Baum
Built with ❤️ using Astro and deployed with Firebase