A versatile micro.blog theme by Doug Hatcher
Dotcom is a multi-purpose theme designed to power different types of micro.blog sites with the same codebase. Whether you need a microblog, a publication site, or a one-page portfolio, Dotcom adapts to your needs through configuration alone.
One theme, multiple personalities. Dotcom transforms based on your configuration - no code changes required. Just adjust the settings in your config.json to switch between layouts and modes.
A modern two-column layout perfect for personal microblogging:
- Sidebar with profile, avatar, bio, and social links
- Main content area with centered posts
- Micropost detection (< 280 characters get special styling)
- Timeline-style presentation
- Tag and syndication link support
Transform your site into a professional publication:
- Header navigation instead of sidebar
- Featured posts and article listings
- Reading time and word count
- Category-focused organization
- Professional typography
Create a portfolio or landing page:
- Single scrolling page layout
- Section-based design
- Perfect for personal portfolios
- About, work, and contact sections
- Minimal, focused presentation
- ✨ Highly Configurable: Switch modes and styles via config.json
- 📱 Fully Responsive: Works beautifully on all devices
- 🌙 Dark Mode Support: Automatic theme switching
- 🎨 CSS Custom Properties: Easy color and style customization
- ⚡ Smart Content Centering: Adapts to content height
- 🏷️ Micropost Detection: Special styling for short posts
- 🔗 Social Media Integration: Support for all major platforms
- 📊 Publication Features: Word count, reading time, categories
- 🎯 SEO Optimized: Proper meta tags and structured data
- Go to your micro.blog Design settings
- Click "Edit Custom Theme"
- Upload or clone this repository
- Configure your desired mode in
config.json
git clone https://github.com/doughatcher/micro.blog.git themes/dougieAdd to your config.json:
{
"params": {
"theme_mode": "microblog", // Options: "microblog", "publication", "onepage"
"show_avatar": true,
"show_bio": true,
"show_social_links": true,
"sidebar_width": "400px"
}
}{
"params": {
"theme_mode": "microblog",
"author": {
"name": "Your Name",
"avatar": "https://your-avatar-url.jpg",
"username": "yourusername"
},
"bio": "Your bio here",
"show_avatar": true,
"show_bio": true,
"show_social_links": true,
"show_word_count": false,
"show_reading_time": false,
"posts_per_page": 20,
"twitter_username": "yourhandle",
"github_username": "yourhandle",
"mastodon_url": "https://mastodon.social/@you"
}
}{
"params": {
"theme_mode": "publication",
"publication_name": "Your Publication",
"show_word_count": true,
"show_reading_time": true,
"show_categories": true,
"show_featured": true,
"posts_per_page": 10
}
}{
"params": {
"theme_mode": "onepage",
"sections": ["about", "work", "contact"],
"show_nav": true,
"hero_title": "Your Name",
"hero_subtitle": "What you do"
}
}The theme uses CSS Custom Properties for easy customization. Edit static/css/main.css:
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--primary: 221.2 83.2% 53.3%;
/* ... and many more */
}Add your custom styles to static/custom.css - this file is loaded after the main stylesheet.
Dougie uses a modern design system inspired by shadcn/ui:
- Typography: Inter for sans-serif, JetBrains Mono for monospace
- Colors: HSL-based color system for easy theming
- Spacing: Consistent rem-based spacing scale
- Components: Reusable, well-structured component classes
- Chrome/Edge (latest 2 versions)
- Firefox (latest 2 versions)
- Safari (latest 2 versions)
- Mobile browsers (iOS Safari, Chrome Mobile)
Contributions are welcome! Please feel free to submit a Pull Request.
- Created by: Doug Hatcher (@hatcher)
- Based on: theme-blank by Micro.blog
- Design inspiration: shadcn/ui design system
- Named after: Absolutely nobody - Doug doesn't go by Dougie
This theme uses GitHub Actions for automated deployment to Micro.blog when template files change.
Changes to theme files automatically trigger deployment:
layouts/**- Template filesstatic/**- CSS, JavaScript, imagestheme.toml- Theme configurationplugin.json- Plugin configuration
The workflow:
- Authenticates to Micro.blog via email (using cached session cookie)
- Triggers theme reload from GitHub
- Rebuilds your site
- Monitors completion (~1-2 minutes)
Required GitHub Secrets & Variables:
Secrets (encrypted):
GMAIL_APP_PASSWORD- Gmail app password for authentication
Variables (configuration):
GMAIL_EMAIL- Gmail address for receiving sign-in emailsMICROBLOG_EMAIL- Your Micro.blog account emailMICROBLOG_SITE_ID- Your Micro.blog site IDMICROBLOG_THEME_ID- Your theme ID
Step-by-step setup:
-
Get Gmail App Password:
- Enable 2-factor auth at https://myaccount.google.com/security
- Create app password at https://myaccount.google.com/apppasswords
- Name it "Micro.blog Theme Deploy"
-
Find Your Micro.blog IDs:
- Site ID: Visit https://micro.blog/account, check site settings URL
- Theme ID: Go to Design → Edit Custom Themes, check theme URL
-
Configure GitHub Secrets:
- Go to your repo Settings → Secrets and variables → Actions
- Add secret:
GMAIL_APP_PASSWORD - Add variables:
GMAIL_EMAIL,MICROBLOG_EMAIL,MICROBLOG_SITE_ID,MICROBLOG_THEME_ID
-
Test Deployment:
- Make a small change to a template file
- Commit and push to
mainbranch - Check Actions tab for workflow status
Manual Deployment:
Trigger deployment manually from the Actions tab → "Deploy to Micro.blog" → "Run workflow"
For more details, see .github/deploy/README.md.
MIT License - See LICENSE for details
- Issues: GitHub Issues
- Micro.blog: @hatcher
- Website: doughatcher.com
Built with ❤️ for the Micro.blog community