green-web-template
green-web-template copied to clipboard
Start your own digital garden using this green Jekyll template π±
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
andalt
. New plugin is calledobsidian_images_generator.rb
- Brackets inside code blocks are now
[[ignored]]
by the bidirectional link generator! Check my updates tobidirectional_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 specifypermalink:
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
Powered by: Github --> DeployHQ --> Dreamhost
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 alink 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 anid=
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! π΅