Green Web Template

This Jekyll template is a way to organize and publish your thoughts from Obsidian to the web, complete with backlinks, notes graph, and wikilink support. This template was modified by Megumi Tanaka in 2021. Here's how to install this template. View this template on Github.

Based on the Jekyll digital garden template by Maxime Vaillancourt.

How is this different?

New Features

Obsidian embeds! Yes, images formatted ![[like this]] will render automatically with the correct asset path!
Categories! (not clickable yet)
Emoji favicons! Configure at site level or page level with favicon: variable
Archive Page! An index of all notes, date updated, category, and excerpt.
Obsidian Templates! Easily create a new note or page with the proper front matter variables.
Green Bok Choy Theme! This is the public version of the theme I'll be using for my personal site megu.space

What makes this a green template?

🥬 The theme is literally green
♻️ Webhost and deployments run on renewable energy—green web hosting!
🚀 Jekyll is a flat file system, meaning pages load faster with less demand on server resources
🖥️ Obsidian is an offline Markdown editor. Your edits happen on your local computer instead of using cloud autosave functions, so writing content has a reduced computing cost
🪴 Borrowing from gardening as a metaphor, this publishing system is built with the principles of digital gardening in mind.

Why not Netlify?

I'm on a mission to build carbon-neutral websites, and unfortunately Netlify hasn't made any statements on this front. I'm in the process of switching all my web projects to Krystal UK. Even though Netlify is really easy to use and I love their mission to make a faster, flat-file web, I'm going to go about it in a different way.

Green Web Hosting

Krystal UK is powered by 100% renewables, meaning 🌊 hydro, 😎 solar, and 🍃 wind powered energy. On top of that, they invest in tree replanting and other environmental campaigns.

DeployHQ is owned by Krystal UK and runs on the same 100% renewable cloud services. It's very easy to connect Git Repositories to any server and automatically deploy.

Dreamhost is technically carbon neutral through purchasing carbon credits and sourcing some of its energy from renewable sources. I use them for domain registration.

Github hasn't made a statement either, but parent company Microsoft's Azure Cloud runs on 60% renewable energy and is committed to 100% renewables by 2025.

But you can still use Netlify

If you want to use this template on Netlify, just remove .htaccess and delete it from _config.yml

More great nerdy changes

New Obsidian Embed plugin also handles standard MD Images and adds path to Jekyll assets folder, including title and alt. New plugin is called obsidian_images_generator.rb
Brackets inside code blocks are now [[ignored]] by the bidirectional link generator! Check my updates to bidirectional_links_generator.rb regex
Automatic Title Generation from title: variable! Renders as <h1> heading at the top of the page, so you don't need to type it manually for _pages anymore.
Permalink /:slug by default for all notes and pages, so you don't need to specify permalink: anymore! By default, all pages will be built in the root directory.
Responsive code blocks! Enabled horizontal scroll for codeblocks on narrow browsers.
Updated metadata in head.html with way more conditional logic based on site configuration, stripped extra whitespace from descriptions, and made sure absolute URLs for OpenGraph are rendering properly
Notes graph uses primary theme color variable from style.css
Privacy focused. No external calls to scripts, instead they're all saved in assets/js

See more about theme updates at Style & Theme.

PHP/Python Server Support

You can use this with any cheap Shared Hosting plan, since they mostly use LAMP servers (Linux, Apache, MySQL, PHP/Python/Perl).

DeployHQ (free for 1 project) builds and serves this Jekyll site to the server via ssh or ftp. You can replace the server with whatever LAMP setup you want. I've configured .htaccess so that this template will work without the need for any extra configuration.

Here are the nerdy details:

Created .htaccess file for custom 404 page routing
Enabled .html extension by default and added throughout site with conditional statements - If you want to disable this, you can do so in _config.yml, but you should also set your .htaccess to allow your server to recognize pages without the extension. I've set up a link rel="canonical" to show once you disable this feature
Timezones in _config.yml so the remote build process adds the right timestamp for the Last Modified plugin

Why not Wordpress?

You might be wondering why I don't just use PHP based software on a PHP server. Well, Wordpress is a database system, so each post gets saved to a MySQL database and requires more computing power than a flat file system like Jekyll.

Wordpress also hinders my ability to write—not only because the editor is slow, but also the emotion I get when I open up a draft. Something about the process actually dampens my motivation to write down an idea.

I'm teaching myself Jekyll, Ruby, and Liquid to modify this digital garden template because I believe it's the best organization system for the way my mind works. And it makes me excited to open Obsidian and write things!

Read more about digital gardening on Maggie Appleton's repo.

Template Quirks

Interesting errors I've encountered:

Your file path must not have any spaces in it or your bundle command will fail!
Plugins are not compatible with Github Pages instance of Jekyll, so you have to build your site locally and reconfigure output to docs folder. I have a similar setup in this github pages repository
This template only works for apex and subdomains. If you build your site in a /directory, you may have to reconfigure the relative links throughout the template.
~~Bidirectional link generator converts double bracket links inside codeblocks too~~ Fixed!
Does not yet support Obsidian Heading Links in this format [[page#Heading]], although each heading automatically generates an id= so you can create anchor links manually with HTML
Emoji is not unicode, so they might not display properly in all browsers and operating systems
Footnotes automatically open in new tab, even if they're internal links
D3.js graph zooms when you scroll, so I disabled the graph by default
Excerpts on archive page truncate weirdly. I wish there was a way to exclude headings. There probably is if I get deeper into Nokogiri documentation.

License

Original Jekyll template by Maxime Vaillancourt is available under the MIT license. Buy Maxime a coffee! ☕️

This "Green" version by Megumi Tanaka is publicly available on Github and you are free to edit as you wish! Buy Megumi a tea! 🍵

pi43r/log