Skip to content
Fiction Becomes Fact

Digital garden with GitHub and Cloudflare Pages setup

- Last update:

Introduction

While searching for a Obsidian Publish alternative I found out that static website generators like GatsbyJS or Jekyll and nowadays Astro Starlight worked out-of-box with the markdown syntax as used by Obsidian.

To set up the digital garden I 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.

Setup

GitHub

  1. Configure your GitHub account

    If you do not have a GitHub account, Sign up for a GitHub account and configure two-factor authentication.

  2. Add a (private) repository

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

  3. Install GitHub Desktop

    You can download GitHub Desktop here. After installation:

    • Link your GitHub account and choose Clone a repository from the Internet....
    • Under the GitHub.com tab, select the repository and choose 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: \\<IP address>\github\fictionbecomesfact.

Now you can easily modify the code in the repository and add notes with Obsidian.

Obsidian

  1. Open the Jekyll _notes folder as vault

    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 this is: \\<IP address>\github\fictionbecomesfact\_notes.

  2. Add or change a note

    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.

  3. Commit to master

    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 the button Commit to master. Click Push origin to 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

I did some testing with Netlify and considered Github Pages, but in the end I chose [[Static Website Hosting - GitHub Pages vs Netlify vs Cloudflare Pages|Cloudflare Pages]].

It is fairly easy to start using CloudFlare Pages:

  1. Within your dashboard, go to Pages
  3. In my case I choose Jekyll as framework
  4. Deploy the website

    Wait until the deployment is finished, then you can turn on the Web Analytics section under Settings so that you can, among other things, 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. Optional Link a custom domain

    In my case I did [[Cloudflare - Setup www DNS Record and Redirect|set up]] the custom domain: https://fictionbecomesfact.com.

Now your static website is running online.

Favorites

GitHub
Jekyll Template
Obsidian
Cloudflare Pages

Comments

    No comments found for this note.

    Join the discussion for this note on Github. Comments appear on this page instantly.

    Tags:
    Copyright 2021- Fiction Becomes Fact