Eleventy Themes Logo Eleventy Themes
Eleventy Template Bliss screenshot

Eleventy Template Bliss

Author Avatar Theme by Lwojcik
Updated: 20 Jan 2025
91 Stars

Single-column blog template for Eleventy focused on simplicity without sacrificing functionality

Github

Categories

Scss Blog Templates & themes

Overview

Bliss is a single-column blog template designed for use with the Eleventy static site generator. It emphasizes simplicity without sacrificing functionality. This theme, which is a modified and improved version of a theme used on the Offbeat Bits blog, offers a range of features including light/dark mode switching, sharing buttons for social media platforms, Mastodon integration, translation support, code syntax highlighting, and accessibility features. It also provides options for personalization and customization.

Features

  • Light / Dark Mode Switcher: Allows users to switch between light and dark modes, and also honors the browser color scheme preferences.
  • Sharing Buttons: Provides sharing buttons for popular social media platforms, including Mastodon, as well as the option to copy the post URL to the clipboard.
  • Mastodon Integration: Generates a .well-known/webfinger file and automatically generates <link rel="me"> tags for site ownership verification on Mastodon.
  • Translation Ready: Supports custom language tags and includes a separate file with static phrases for easy translation.
  • Automatic Favicon Generation: Generates the favicon automatically during the build process.
  • PWA Support: Includes a manifest file for Progressive Web App support.
  • Code Syntax Highlighting: Uses PrismJS and the Eleventy syntax highlighting plugin for code syntax highlighting in HTML, JS, JSON, and CSS.
  • RSS Feeds and JSON-LD Data: Provides RSS and JSON feeds, as well as JSON-LD data for enhanced search engine optimization.
  • Accessibility Features: Includes accessibility features to ensure a more inclusive user experience.
  • HSL Color Palette and CSS Variables: Offers a straightforward way to personalize the theme with a HSL color palette and CSS variables.
  • Modular CSS and SASS: Uses modular CSS augmented with SASS for ease of customization.
  • Custom Disclaimers: Allows for the inclusion of custom disclaimers alongside post content.

Installation

To install the Bliss blog theme for Eleventy, follow these steps:

  1. Clone or download the theme repository.
  2. Copy the contents of the repository to your Eleventy project directory.
  3. Open the siteConfig.js file and fill in the relevant information, including the site title, description, custom logo, author information, etc.
  4. If necessary, modify the production URL either directly in the siteConfig.js file or via the process.env.URL environment variable.
  5. Customize the color palette by editing the relevant variables in the _variables.scss file.
  6. If you changed the color palette, modify the theme color and background color for the PWA manifest in the siteConfig.js file.
  7. If you changed the color palette, modify the base color for the RSS XSL stylesheet in the siteConfig.js file.
  8. Enable automatic OpenGraph image generation if desired.
  9. Add your own posts, using the existing placeholder posts as a reference.
  10. Consider using the built-in disclaimer feature if you use disclaimers at the beginning of your posts.
  11. Add your own pages, using one of the existing placeholder pages as a reference.
  12. Customize the meta pages in the footer as needed.
  13. Replace the favicon file (favicon.svg) with your own. Note that only one file is needed, as the remaining ones will be generated during the build process.
  14. Replace the OpenGraph images with ones that are relevant to your site.
  15. Decide whether to use automated OpenGraph image generation and modify their appearance to suit your preferences.

Summary

Bliss is a well-designed and versatile blog theme for the Eleventy static site generator. It offers a range of useful features, including light/dark mode switching, social media sharing buttons, Mastodon integration, translation support, and code syntax highlighting. The theme also provides options for personalization and customization, allowing users to easily modify the color palette, include custom disclaimers, and add their own posts and pages. With its accessibility features and support for various feed formats and JSON-LD data, Bliss is a great choice for bloggers looking for a stylish and functional theme for their Eleventy-powered blogs.