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.

Github

1. First I created an account at GitHub and configured under Settings and Account security two-factor authentication.

Tip: I use [[ Vaultwarden ]] to store my passwords. Vaultwarden is a self-hosted installation of Bitwarden. With this software it is also possible to generate TOTP codes for two-factor authentication which can be used with GitHub and other websites.

1. Go to the template repository and click the green Use this template button. I entered fictionbecomesfact as repository name. Furthermore, I initially chose Private.

2. Then I installed GitHub Desktop:

   • Link the GitHub account.
   • Choose Clone a repository from the Internet.... Under the GitHub.com tab, 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: \\192.168.x.xx\archive\github\fictionbecomesfact

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 _config.yml file

Obsidian

1. Start Obsidian and choose Open folder as vault. Browse to the Local Path you just set up within GitHub Desktop and then select the _notes folder. In my case the url is: \\192.168.x.xx\archive\github\fictionbecomesfact\_notes

2. 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).

Open the _pages folder as vault to edit the start page: index.md
The notes and the pages use a different layout. You can adjust the layouts in the _layout folder

1. After changes have been made, you can make the changes final within your repository via GitHub Desktop. For example, enter first commit as summary and click Commit to master. Click Push origin to push the commit from the local repository to your remote repository on GitHub.

2. If Netlify or Cloudflare Pages is linked to GitHub, the changes will automatically be visible on the website.
   

Hosting with Cloudflare Pages

I considered using Github Pages or Netlify, but in the end I chose Cloudflare Pages. But I did install Netlify, this was also very interesting.

It is fairly easy to start using CloudFlare Pages:

1. Within your dashboard, go to Pages
2. Link your GitHub repository
3. In my case I choose Jekyll as framework deployed the website
4. Wait until the deployment is finished, then you can turn on the Web Analytics section under Settings so 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
5. Now the website can be visited, in my case the URL is: https://fictionbecomesfact.pages.dev
6. Then I linked a custom domain: https://fictionbecomesfact.com and 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