Notenote.link - Publish your Obsidian notes with Jekyll for free!

Share & showcase
1

Hi there !

Some of you may know the Jekyll template ‘Simply-Jekyll’ - well, it wasn’t so simple to use it with Obsidian.

After some tweaking, it is now 95% compatible (no inline-transclusion, yet !) : wikilinks work, wikilinks with alt-text work, Latex works, code is properly highlighted and indented, automatic table of content generation, text is larger, etc.

A demo is here : https://notenotelink.netlify.com

I’m transferring my notes to my site, and it works great as a CMS ! (in french :frog: but you can figure out the design)

Building is fast, I’ve got around 45 notes uploaded already, with lots of complex content (tables, Latex, code, images, etc.), and it takes 3-5 seconds to build.

Check it on Github, there’s even a “Deploy to Netlify” button :smiley: :

Deploy to Netlify

If you have any questions, please ask ! Jekyll is easy to boot and configure, but I know that it may be intimidating at the beginning, so do not hesitate. Besides, it will help me improve the explanations on the website.

image
image1265×507 39.9 KB

Ho, yeah, I’m looking for a job/internship as a Data Scientist/Analyst in the next months, so If you’ve got a need, do not hesitate to PM me.

34 Likes
2

This template has been featured on the topic dedicated to Jekyll integration with Obsidian.

You may find it here

Thanks a lot!
Tommi

1 Like
3

Does this template works with and supports the block referencing feature?

2 Likes
4

Obsidian is pushing its own proprietary markdown dialect, and [[page^blocknumber]] referencing is clearly against portability as the block referencing system isn’t open-source, which mean I can’t port this functionality.

However, you can take advantage of Kramdown’s auto-referencing of paragraphs, which also works in Obsidian - you just have to put the header name in lowercase and add ‘-’ between the words.

Anyway, good suggestion and I’ll check how I can implement a port of header-referencing that is Obsidian-friendly. :+1:

3 Likes
5

Hey there! I also made a fork of Simply Jekyll (https://github.com/brennanbrown/enjoyment-work) , and I’m looking to integrate with Obsidian. It’s really promising to see someone else working on a similar idea!

Is there anything specific you added to make it work? I’m very new to Obsidian but I’m super excited to start using it and figuring out how to make a Jekyll project where you can drag-and-drop your Vault and have it generate as intended.

4 Likes
6

Wow! It’s awesome! I featured you on the post on Jekyll forum and, when you’ll have implemented support for Obsidian, also in the thread about it on this forum:

1 Like
7

In fact, I did the same. But I am not sharing all my obsidian entire obsidian vault - journal and private notes are not synced with Github. Also, I was not able to use the Jekyll tags properly, so ended up creating context notes to serve as tags. https://notes.hiran.in/ has that. (Wish I waited for a week and copied your code, instead of hacking on Raghav’s code without knowing ruby!)

1 Like
8

Neat, I like your theme, it seems very mature. Congrats ! Check _includes/content.html for the code that allows [[wikilink|alt name]]. I’ll see if I can push code to your repo allowing you to do this later in the day.

You can read the article on notenote.link about Obsidian integration, too.

2 Likes
9

Hi everyone ! I recently updated the template so that you can now link headers : [[note#header|title]], which is done natively in Obsidian. Besides, there are now header links that appear on hover. As my notes get longer and longer, this functionnality became very necessary for meaningful linkings. If you see a bug, please open an issue about it !

2 Likes
10

I’m liking how this is looking so far! I’m trying to put together a note system that will still work for me many years from now. I think I’m happy to use Obsidian for many years, but don’t have confidence Obsidian Publish will last, so looked at some other ways to publish notes, and this looks the most robust of what I’ve seen :slight_smile: Looking forward to more updates - but even if there are none, this looks great the way it is :slight_smile:

1 Like
11

why don’t you think that Publish will last?

12

Is it possible to add a comment section like Disqus?

1 Like
13

Because online services are far far far more likely to die than make it past their 10th year. I’ve seen enough online services I use die that I’d rather not go through that again with something as important as this. Luhmann’s zettelkasten system lasted him 50 years - that kind of scale is what I’d like to move towards in my tooling. So I’d rather commit to something more long lasting now, than commit to something I know almost for sure will not last.

2 Likes
14

Comments you can do with Hyvor Talk (https://talk.hyvor.com/).

15

Is it possible to add a comment section like Disqus?

Check Utterances and Telegram comments, they are awesome and super easy to implement in Jekyll

16

Hey, I am new to Jekyll and online publishing altogether. I was wondering if it was possible to convert another template to work with Obsidian.

My original idea was to simply open a vault in that local Jekyll installation and push to Git via the plugin, but upon reading this post, I feel that its not that simple.

Any guidance towards maybe being able to convert the template is deeply appreciated!

The template I am looking at converting, if possible. GitHub - piharpi/jekyll-klise: Klisé is a minimalist Jekyll theme for running a personal site or blog, light & dark mode support. (https://klise.now.sh)

17

@Maxence apologies for possibly stupid question but can your script be adapted to publish to a private folder rather than netlify?

Thanks

Nick

18

A tip for those of you looking to adapt this wonderful template for a more blog-like format, or if you simply want to document the chronological progression of your notes.

As you may have noticed, the feed generated by feed.html is based on the file name. Changing which files it reads first is non-trivial. It is instead much easier to wrap that output in a flex and sort that flex.

Open post.html in /_layouts/ and replace {%- include feed.html -%} with the following:

            <div class="feed-wrapper">
                {%- include feed.html -%}
            </div>

Make sure that the div is indented the same as {%- include header.html -%} in the line above it.

This will wrap the output of the feed, so we can now apply sorting through css.

I use zettelkasten prefixes on files I publish in _notes, which means that newer files, by default, are below older files in the feed, due to the aforementioned alphanumeric processing of files and adding them to the feed. The following CSS snippet reverses that order, placing newer files at the top of the feed.

.feed-wrapper {
    display: flex;
    flex-direction: column-reverse;
}

In addition, you can use css to ‘pin’ a file to the top of the feed. Every entry in the feed is given a ‘data-url’ property, which we can target. As the order of the flex has been reversed, a larger order: property means pinning a message to the top. The data-url contains the file’s name, which we can target using the method in the snippet below. Assuming there are no other files you are ‘pinning’ with css, an order of 1 suffices, if you are pinning multiple files the target with the highest order value is place on top.

.feed-wrapper [data-url*="FILENAME"]{
    order: 1
}

For a file called 20210528-Modifying the notenote.link template the data-url would be: [data-url*="20210528-Modifying the notenote.link template"].

You can place this css in the main style.css file, but I instead recommend writing the css in another file, and importing it in style.css, like so @import "/assets/css/feed_sorting.css";.

2 Likes
19

folder _notes is not being pushed to git repo, i created a new folder that one did get pushed… im new to git pushing.

I just tried creating a new folder and file directly in the git repo and then pushed my local files and the new folder i created directly on github was removed.

Edit/reply: i tried the commandline instead of the gui, finally got the commit part working as it has to be “xxxxxx” not ‘xxxxxx’ and pushed it and now the folder is there. i suppose im doing it wrong in the gui.

20

im putting new notes into _notes and they are being pushed to git now, but they are not showing up on netlify. Chaning the folder name to notes pops alerts of depencie issues.

I managed to change the title of the front page etc and removed the howto notes, but getting new notes up there is fooling me. argh