A modern, minimal personal blog built with Jekyll and Tailwind CSS. Perfect for developers who want a clean, professional blog on GitHub Pages.
- Responsive Design - Beautiful dark theme, mobile-first approach
- Blog Posts - Markdown posts with pagination (10 per page)
- Projects Portfolio - Showcase your work
- Tags System - Organize posts by tags
- Table of Contents - Auto-generated TOC for long posts
- Social Sharing - Twitter, LinkedIn, Facebook, Reddit, Telegram
- SEO Optimized - Sitemap, meta tags, RSS feed
- Clean URLs - No
.htmlextensions - GitHub Actions - Automated deployment
- Docker Support - Run anywhere with zero setup
- Fast & Lightweight - Optimized performance
The fastest and easiest way to get your blog live:
- Click "Use this template" button at the top of this repository
- Create a new repository from the template
- Name it
yourusername.github.io(replace with your GitHub username) - Choose public
- Click "Create repository"
- Name it
- Configure permissions
- Go to Settings β Actions β General β Workflow permissions
- Select Read and write permissions and save
- Wait a few minutes for GitHub Actions to build your site
That's it! π Your blog is now live at https://yourusername.github.io
Want to customize locally? Use Docker for zero dependency hassles:
Prerequisites: Just install Docker Desktop
# Clone your repository
git clone https://github.com/yourusername/yourusername.github.io.git
cd yourusername.github.io
# Start with one command
make up
# Or using docker-compose
docker-compose upVisit http://localhost:4000 to see your blog! π
Changes auto-reload with LiveReload!
Available Commands:
make help # Show all commands
make up # Start development server
make down # Stop containers
make logs # View logs
make shell # Open shell in container
make dev # Start with live CSS watching
make prod # Build for production
make clean # Clean up everythingWhy Docker?
- β No Ruby, Node.js, or gem installation needed
- β Works identically on Windows, Mac, and Linux
- β No dependency conflicts
- β Clean system - everything in containers
- β Easy updates - just rebuild
See docs/INSTALL.md for detailed Docker instructions.
If you prefer installing dependencies locally:
Prerequisites:
- Ruby 3.0 or higher
- Node.js 18 or higher
- Bundler and npm
# Clone your repository
git clone https://github.com/yourusername/yourusername.github.io.git
cd yourusername.github.io
# Install dependencies
bundle install
npm install
# Build CSS
npm run build:css
# Run locally
bundle exec jekyll serveVisit http://localhost:4000 to preview! π
For detailed installation: See docs/INSTALL.md
Comprehensive guides to help you:
- Installation Guide - Docker & traditional setup, troubleshooting
- Customization - Make it yours
- Adding Content - Write posts and projects
- Features Guide - All features explained
- Deployment - Deploy to GitHub Pages, Netlify, and more
- FAQ - Common questions answered
Edit _config.yml:
# -----------------------------------------------------------------------------
# Site settings
# -----------------------------------------------------------------------------
title: Your Name
first_name: Your
last_name: Name
greeting: "Hi, I'm Your Name!"
email: your-email@example.com
url: "https://yourusername.github.io"
icon: βοΈ # emoji used as favicon
# Social Media
social:
- icon: fa-brands fa-github
link: https://github.com/yourusername
name: GitHub
- icon: fa-brands fa-x-twitter
link: https://twitter.com/your_twitter
name: Twitter / X
# Add more...
# Navigation
navigation:
- title: Articles
url: /articles
- title: Projects
url: /projects
- title: About
url: /aboutConfiguration is organized into clear sections with comments.
For more: See CUSTOMIZING.md
Create _posts/2025-01-15-my-first-post.markdown:
---
layout: post
title: "My First Post"
date: 2025-01-15 10:00:00 +0000
tags: [tutorial, getting-started]
excerpt: "A brief description for SEO and previews"
---
## Welcome!
Your content here in **Markdown** format.
### Code Example
\`\`\`python
def hello():
print("Hello, world!")
\`\`\`
### Images

**Easy!** πFor more details: See CONTENT.md
Quick reference for Docker users:
| Command | Description |
|---|---|
make up |
Start development server |
make down |
Stop all containers |
make restart |
Restart containers |
make logs |
Show container logs |
make shell |
Open bash in container |
make build |
Rebuild Docker image |
make clean |
Clean up everything |
make dev |
Start with live CSS watching |
make prod |
Build for production |
make install |
Install/update dependencies |
Or use docker-compose directly:
docker-compose up # Start
docker-compose down # Stop
docker-compose logs -f # View logs
docker-compose build # Rebuild-
Push to GitHub
git add . git commit -m "Initial commit" git push origin main
-
Enable GitHub Pages
- Go to Settings β Pages
- Select GitHub Actions as source
-
Configure Permissions
- Go to Settings β Actions β General
- Select Read and write permissions
-
Done! Your site deploys automatically on every push! π
Visit:
https://yourusername.github.io
For detailed deployment: See DEPLOYMENT.md
.
βββ _includes/ # Reusable components
β βββ header.html # Site header
β βββ share-buttons.html # Social sharing
β βββ social-icons.html # Social media icons
βββ _layouts/ # Page templates
β βββ default.html # Base layout
β βββ page.html # Static pages
β βββ post.html # Blog posts
β βββ project.html # Project pages
βββ _posts/ # Your blog posts (Markdown)
βββ _projects/ # Your projects (Markdown)
βββ assets/
β βββ css/
β β βββ input.css # Tailwind source (edit this)
β β βββ main.css # Compiled CSS (auto-generated)
β βββ images/ # Your images
βββ docs/ # Documentation
βββ _config.yml # Main configuration
βββ Dockerfile # Docker configuration
βββ docker-compose.yml # Docker Compose configuration
βββ Makefile # Convenient commands
βββ Gemfile # Ruby dependencies
βββ package.json # Node.js dependencies
βββ README.md # This file
# Start development
make up
# Edit files in your favorite editor
# Changes auto-reload at http://localhost:4000
# For CSS changes with live rebuild
make dev
# Build for production
make prodTerminal 1 - Jekyll Server:
bundle exec jekyll serve --livereloadTerminal 2 - CSS Watcher:
npm run watch:cssNow edit files - both content and styles auto-reload!
Edit assets/css/input.css:
:root {
--color-primary: #3b82f6; /* Your brand color */
--color-bg: #0a0a0a; /* Background */
--color-text: #e0e0e0; /* Text color */
}Then rebuild: npm run build:css
Edit _config.yml:
google_analytics: G-XXXXXXXXXX-
Create
CNAMEfile with your domain:yourdomain.com -
Configure DNS at your registrar:
A @ 185.199.108.153 A @ 185.199.109.153 A @ 185.199.110.153 A @ 185.199.111.153 -
Update
_config.yml:url: "https://yourdomain.com"
-
Enable in GitHub: Settings β Pages β Custom domain
See DEPLOYMENT.md for details.
Powered by these amazing tools:
- Jekyll - Static site generator
- Tailwind CSS - Utility-first CSS framework
- Font Awesome - Icons
- jekyll-paginate - Pagination
- GitHub Pages - Free hosting
- Docker - Containerization platform
Contributions are welcome! See CONTRIBUTING.md for guidelines.
Ways to contribute:
- π Report bugs
- π‘ Suggest features
- π Improve documentation
- π§ Submit pull requests
- β Share your blog (for inspiration)
MIT License - See LICENSE for details.
Free to use for personal and commercial projects.
- π Read the comprehensive documentation
- π Search existing issues
- π Ask questions in GitHub Discussions
- π Report bugs by opening an issue
If you find this template useful:
- β Star this repository to show your appreciation
- π΄ Fork it to create your own blog
- π’ Share it with others who might benefit
- π€ Contribute to make it even better
After setting up your blog:
- β Customize - Make it yours (CUSTOMIZING.md)
- β Write - Create your first post (CONTENT.md)
- β Deploy - Go live on GitHub Pages (DEPLOYMENT.md)
- β Share - Tell the world about your blog!
- β Maintain - Keep dependencies updated
Sites using this template:
- My Blog - Submit yours!
Using this template? Let us know and we'll feature you here!
Made with β€οΈ for developers by developers
β Star this repo if you find it useful!
π΄ Fork it to create your own blog!
π’ Share it with others!
π Report issues or contribute!