Welcome to Bear Blog

2026-02-19T00:00:00.000Z

Welcome to your new Bear Blog powered by Eleventy! This theme brings the minimalist philosophy of Bear Blog to the Eleventy static site generator.

What is Bear Blog?

Bear Blog is a blogging platform focused on:

Speed: Pages load in milliseconds
Privacy: No tracking, no analytics, no cookies
Simplicity: Clean, distraction-free reading experience
Accessibility: Semantic HTML, proper heading structure

Features

This Eleventy theme includes:

Ultra-Minimal CSS

Only ~2.3KB of CSS for the entire site. The CSS uses:

CSS variables for easy theming
Automatic dark mode detection
Responsive design with mobile-first approach
Clean typography with system fonts

Zero JavaScript

No JavaScript required for core functionality. The site is 100% static HTML and CSS.

Critical CSS Inlining

For optimal performance, critical CSS is inlined in the <head> while the full CSS file is loaded asynchronously. This ensures the fastest possible first paint.

Dark Mode Support

Automatic dark mode based on system preferences using prefers-color-scheme media query:

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #01242e;
    --text-color: #ddd;
    /* ... */
  }
}

RSS Feed

Automatic RSS feed generation at /feed.xml for readers who prefer feed readers.

SEO Optimized

Proper meta tags
OpenGraph support
Twitter Card support
Semantic HTML structure
Sitemap generation

Getting Started

Creating Posts

Create new markdown files in the blog content folder:

---
layout: post.njk
title: Your Post Title
description: Optional description for SEO
date: 2026-02-19
tags:
  - posts
  - your-tag
---

Your content here...

Customizing

Edit src/_data/site.js to:

Change site title and description
Enable/disable post navigation
Hide/show "Made with" footer line
Update author information

Add pages to navigation in src/_data/navigation.js:

export default [
  {
    text: "Home",
    url: "/",
    weight: 1
  }
];

Performance

This theme is optimized for speed:

Critical CSS inlined for fast first paint
Full CSS preloaded and loaded asynchronously
Minimal HTML markup
No external dependencies
Average page size: ~5KB

Philosophy

Bear Blog (and this theme) embrace constraints:

"Fewer distractions, faster loading, and more privacy are built-in."

By keeping things minimal, we achieve:

Faster load times - Less code = faster downloads
Better accessibility - Semantic HTML works everywhere
Easier maintenance - Less code = fewer bugs
Focused content - No distractions from what matters

What's Next?

Start writing! The theme is ready to use out of the box. Check out:

Blog archive - See all your posts
RSS feed - Subscribe to updates
GitHub - View source code

Happy blogging! 🐻

Markdown Syntax Guide

2020-01-03T00:00:00.000Z

For a quick cheatsheet, check out https://simplemde.com/markdown-guide.

This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.

Headings

The following HTML <h1>-<h6> elements represent six levels of section headings. <h1> is the highest section level while <h6> is the lowest.

H1

H2

H3

H4

H5

H6

Paragraph

Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.

Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.

Blockquotes

The blockquote element represents content that is quoted from another source.

Blockquote without attribution

Tiam, ad mint andaepu dandae nostion secatur sequo quae.

Note that you can use Markdown syntax within a blockquote.

Blockquote with attribution

Don't communicate by sharing memory, share memory by communicating.

— Rob Pike[^1]

[^1]: The above quote is excerpted from Rob Pike's talk during Gopherfest, November 18, 2015.

Tables

Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.

Name	Age

Bob | 27 Alice | 23

Inline Markdown within tables

Italics	Bold	Code
italics	bold	`code`

Code Blocks

Code block with backticks

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

Code block indented with four spaces

Example HTML5 Document

Test

Code block converted from Hugo's internal highlight shortcode

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

List Types

Ordered List

First item
Second item
Third item

Unordered List

List item
Another item
And another

Nested list

Fruit
- Apple
- Orange
- Banana
Dairy
- Milk
- Cheese

Hugo ʕ•ᴥ•ʔ Bear Blog