Bliss is a single-column blog template for Eleventy static site generator with strong focus on simplicity without sacrificing functionality.
It is a modified and improved version of the theme running my personal blog.
- light / dark mode switcher + honoring browser color scheme preference
- sharing buttons for popular social media (including Mastodon!) + copying post URL to clipboard
- Mastodon integration: generating
.well-known/webfinger
file + automatic generation of<link rel="me">
tags for site ownership verification - translation ready (support for custom language tags + separate file with static phrases)
- manifest file for PWA
- automatic OpenGraph image generation
- code syntax highlighting with PrismJS using Eleventy syntax highlighting plugin
- HTML, JS, JSON, CSS optimizations
- RSS, JSON, Twtxt.txt feeds + JSON-LD data
- accessibility features
- HSL color palette and CSS variables for straightforward personalization
- modular CSS augmented with SASS
- custom disclaimers alongside post content
- and more
https://eleventy-bliss.lkmt.us/
git clone https://github.com/lwojcik/eleventy-template-bliss
cd eleventy-template-bliss
npm install
npm run dev # to launch the project for modifications
npm run build # to build production version
Netlify:
Vercel:
Render:
Follow the steps below:
- Fork the repository to your GitHub account.
- In
package.json
, find the following line:
{
"scripts": {
// ...
"build-gh-pages": "npm run build:sass; npm run build:eleventy -- --pathprefix=/eleventy-template-bliss/",
//...
}
}
Replace eleventy-template-bliss
with the name of your repository.
- In your repository, make sure GitHub Pages are set up in the Pages tab of your repository settings:
- Source - should be set up to GitHub Actions
- In
Actions > General
section of your repository's settings, under the Workflow permissions sub-section, selectRead and write permissions
- Go to
Actions
tabs of your repository. From the list of actions selectBuild and deploy to GitHub Pages
- Click
Run workflow
. - If the workflow runs successfully, your page will be available at
https://yourusername.github.io/your-repo-name
.
By default, the GitHub action workflow for publishing on GitHub Pages is set to be run manually. If you want it to run on each push to main
branch, open .github/workflows/build-to-gh-pages.yml
and edit on
section as follows:
on:
workflow_dispatch: # This enables the action to be launched manually from GitHub Actions tab
push:
branches: ['main'] # This makes the action run on each push to main branch
See siteConfig.js
. Inline documentation is available in the file.
See phrases.js
for the list of translatable static phrases.
Non-exhaustive list of steps to make the template your own. Some of them are optional, others are highly recommended:
- Fill in all relevant information in
siteConfig.js
- site title, description, custom logo, author information, etc. - Modify production URL - either by hardcoding it in
siteConfig.js
or viaprocess.env.URL
environment variable - Replace site logo or remove the existing one to use site title as text in your header
- Modify color palette to your liking - edit relevant variables in
_variables.scss
- If you changed the color palette - modify theme color and background color for PWA manifest - see
siteConfig.js
- If you changed the color palette - modify base color for RSS XSL stylesheet - see
siteConfig.js
- Enable automatic OpenGraph image generation - note that they only work for pages and posts
- Add your own posts - use the existing placeholder posts as a reference
- If you use post disclaimers at the beginning of your posts - consider using the built-in disclaimer feature - see
06-10-sample-post-33-disclaimer.md
or05-31-sample-post-32-linked-disclaimer.md
for reference - Add your own pages - use one of the existing placeholder pages as a reference
- Add / remove meta pages in the footer - see
siteConfig.js
- Replace favicon files (
favicon.svg
,favicon.ico
,apple-touch-icon.png
,icon-192.png
,icon-512.png
) with your own - Update
manifest.webmanifest
file with data relevant to your site - Replace OpenGraph images with ones relevant to your site
- Decide if you want to use automated OpenGraph image generation + consider modifying their appearance to suit your taste (see
siteConfig.js
for more info) - Copy your existing static assets to
assets
folder. Note that the top ofassets
folder corresponds to the root directory of your site (_site
) - Modify anything else you don't like about the theme to match your preferences
- Enjoy! ๐
By default, the template assumes each post and each page to have a title and generates a permalink out using a slugify
function. In other words, it converts A title like this!
into a-title-like-this
.
If you want your posts to have no title, open content/posts/posts.json
file and modify the following line:
"permalink": "{% if customPermalink %}{{ customPermalink }}{% else %}/{{ title | slugify }}/{% endif %}",
into the following:
"permalink": "{% if customPermalink %}{{ customPermalink }}{% else %}/{{ page.fileSlug }}/{% endif %}",
You can do the same for pages by modifying content/pages/pages.json
file.
Until version 2.4.0 Bliss was bundled with a favicon generation plugin. Due to unresolved bugs this plugin is no longer included with the template.
If you want to reimplement it yourself, change history from this pull request may be helpful.
Contributions of the following kind are welcome:
- bug reports / fixes
- documentation improvements
- improvements of existing features
I consider the project complete and apart from specific exceptions, no new features are planned.
Before contributing be sure to read Code of Conduct.
Licensed under the MIT license.