Obsidian - Setup a Digital Garden with GitHub and Cloudflare Pages
Here I describe my search for a static website generator.
While searching for a alternative for Obsidian Publish I found that static website generators like GatsbyJS or Jekyll work out-of-box with the markdown language. The same language used for the notes within Obsidian.
Through this search I also found out that I actually wanted to set up a digital garden!
To set up the digital garden I partly followed this post by Maxime Vaillancourt and also made my own choices such as using the Jekyll Docker container and the GitHub Desktop app. I also added the Paginate V2 plugin to the website as soon as possible.
- First I created an account at GitHub and configured under
Account securitytwo-factor authentication.
Go to the template repository and click the green
Use this templatebutton. I entered
fictionbecomesfactas repository name. Furthermore, I initially chose
Then I installed GitHub Desktop:
- Link the GitHub account.
Clone a repository from the Internet.... Under the
GitHub.comtab, select the repository and choose the
Local Path. By default, the Local Path is set to
C:\Users\YourName\Documents\GitHub\digital-garden-jekyll-template. If necessary, you can change the path here to, for example, a network location that Jekyll (see below) can also access. In my case the Local Path is:
Now you can easily modify the code in the repository and add notes with Obsidian.
You can change the name of the website in the
Start Obsidian and choose
Open folder as vault. Browse to the
Local Pathyou just set up within GitHub Desktop and then select the
_notesfolder. In my case the url is:
Now you see the sample notes. In this folder you can get started with your notes. In any case, make a change by adding some text to a sample note (so that Git has a change).
_pagesfolder as vault to edit the start page:
The notes and the pages use a different layout. You can adjust the layouts in the
After changes have been made, you can make the changes final within your repository via GitHub Desktop. For example, enter
first commitas summary and click
Commit to master. Click
Push originto push the commit from the local repository to your remote repository on GitHub.
If Netlify or Cloudflare Pages is linked to GitHub, the changes will automatically be visible on the website.
Hosting with Cloudflare Pages
It is fairly easy to start using CloudFlare Pages:
- Within your dashboard, go to
- Link your GitHub repository
- In my case I choose
Jekyllas framework deployed the website
- Wait until the deployment is finished, then you can turn on the
Web Analyticssection under
Settingsso that you can, among other things, can see how often your website is visited. As far as I’m concerned, this is one of the big pluses of Cloudflare Pages
- Now the website can be visited, in my case the URL is:
- Then I linked a custom domain:
https://fictionbecomesfact.comand set up the www subdomain.
Jekyll Installation (optional)
Before committing the changes, I wanted to see the changes locally in the browser. This is possible, for example, by installing the Jekyll Docker container yourself.
Because Docker runs on an Ubuntu VM for me, I placed the website in a shared folder where it can be accessed by GitHub desktop, Obisidian and Jekyll (via docker).
On docker hub little is described for the Jekyll image but the description on GitHub and the Jekyll configuration options helped me further.
Read other notes
No comments found for this note.
Join the discussion for this note on this ticket. Comments appear on this page instantly.
Notes mentioning this note
- Digital Garden - What is it and the use of Obsidian
For a while I jotted down my thoughts in Google Keep and documented my home IT projects in Google Docs....
- Jekyll - Setup Font Awesome Icons
The icons from Font Awesome are great to use within a website.
- Netlify - Setup with GitHub
Here I describe the setup of Netlify Static Website Hosting in combination with GitHub.
- Obisidian - Alternatives for Obsidian Publish
Because of the high price (my personal opinion of course) of Obsidian Publish I knew I had to look for...
- Static Website Hosting - GitHub Pages vs Netlify vs Cloudflare Pages
Here I describe my search for the right static website hosting.
- Cloudflare - Setup www DNS Record and Redirect
Here’s a quick note about setting up my www subdomain within Cloudflare.
- Jekyll - Setup Paginate V2 plugin
Here I describe how I added the Paginate V2 plugin
- Docker - Jekyll Container Setup
Here I describe my setup of the Jekyll container.
- Jekyll - Setup Markdown Note Tags
I use Obsidian to make markdown notes. I put the tags in the front matter. On this Jekyll website (my...