The Return of the Creative Spark
After migrating my blog to GitHub Pages, I felt a long-lost surge of creative desire. The reason is simple: Jekyll, the engine behind GitHub Pages, perfectly aligns with my philosophy of software and life.
As a developer who has spent two decades in the Linux trenches and countless hours in Emacs, I don’t want to be bogged down by database migrations, VPS maintenance, or clunky web editors. I want to write.
Here is why Jekyll won me over:
Zero Infrastructure: No databases, no servers. Everything lives on GitHub. It’s free, stable, and "set and forget."
Markdown + CSS Synergy: I get the zen-like simplicity of Markdown combined with the total control of CSS. I can fine-tune every detail—from zebra-striped tables to the exact border-radius of a code block.
Content-First Workflow: Once the theme is defined, my workflow is just: write -> git push. That’s it.
Local Real-time Preview: One command—jekyll serve—and I can see exactly how my thoughts look in the browser.
Emacs Integration: This is the deal-breaker. I don't need a browser-based editor. I write everything in Emacs. It’s fluid, fast, and familiar.
My Custom CSS Hacks for a Modern Static Blog
To make a static blog feel modern and professional, you don't need heavy frameworks. You just need a few clever CSS rules. Here are the snippets I use to polish my reading experience:
1. Responsive Image Scaling
Screenshots and photos come in all sizes. To prevent them from breaking the layout, I force them to scale gracefully with the page width:
CSS
li > img, p > img {
margin: 0 auto;
display: block;
max-width: 90%;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 2em;
margin-right: 2em;
border-radius: 5px;
}
2. Elegant Centered Tables
Standard Markdown tables are often left-aligned and look awkward. Centering them makes the page feel balanced:
CSS
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #AAA;
margin-left: auto;
margin-right: auto;
}
3. Zebra-Striped Rows
Reading large tables is a nightmare without visual cues. A subtle zebra stripe makes data much more digestible:
CSS
tbody tr:nth-child(even) {
background-color: #F5F5F5;
}
4. "Soft" Code Blocks
Code is the soul of a developer's blog. Default sharp corners create visual tension. Adding a small border-radius makes the code area feel more natural and easier on the eyes:
CSS
div.highlight, pre.highlight {
border-radius: 5px;
}
For me, Jekyll is more than just a static site generator. It’s about creating a focused writing environment.
It allows me to achieve visual perfection with minimal overhead while maintaining maximum editing efficiency. It’s fluent, comfortable, and keeps me in the zone.
How about you? Are you still fighting with WordPress or Medium, or have you embraced the "Git-based" blogging lifestyle? If you are an Emacs user like me, I'd love to hear about your blogging setup in the comments!
About the Author:
I am Yong Wang, a 20-year Linux veteran, Emacs lover, and former CTO of Deepin. I’m currently exploring the intersection of AI Agents and private computing with my new project.
