digital garden project — Home

Digital Garden Project

Parent Note (Up)

Digital Garden

At this stage, we want to ensure that whatever has been learned so far doesn't just remain very theoretical, but is also of practical value. To this end, we shall pick up a project which relies on what we have learned so far, but also helps draw in some concepts which we will explore shortly. Most importantly, this will also serve as a way for us to use what little we have learned and build out a very useful space for us to start storing our notes, and all of our knowledge for much easier future reference.
This video runs through what a digital garden is. This is roughly the output that we're looking to create for ourselves through this project.
- Digital Gardens - Our own space on the internet, to share our thoughts, ideas and knowledge. These ideas may not be complete, but are still growing and are a work in progress.
- Benefits - Learning in Public (and all associated benefits), creates a template and environment for any new learning and work.
- vs Blogs - Navigation (idea-links instead of chronology), less refined and complete than blogs.
- Tools - Notion, Github/Netlify, Obsidian Publish.

Now that we have a rough idea of what we're trying to create, why and he tools that can help us get there, we can get started with how we'll do it. Rather than trying to build this from scratch, we shall use an online tutorial and try to replicate their work.
This helps us move faster than if we built from the ground up. We will employ this technique often and is a central part to how we will leverage open source technology. It is important to understand the code that we are borrowing, even though we haven't written each line. When we choose to customise and build upon borrowed code, this will prove to be useful.

Digital Garden Using Obsidian

This video gives a run through of how obsidian can be used for free to operate a digital garden.
- Obsidian publish costs ~$20/month, so we'll try using a workaround instead.
- We aim to sync our notes on our laptop with a website (digital garden) that we will create.
- Obsidian notes are stored in the form of markdown files, which are a great format for direct upload to webpages.
  - For this we will use Jekyll. Jekyll is a static site generator. Written in Ruby by Tom Preston-Werner, GitHub's co-founder, it is distributed under the open source MIT license.
- To this end, we'll use Maxime Vaillancourt's git repo .
- Github - Will hold all of our files (notes and website enabling).
- Netlify - Static website hosting services. Will automatically update along with github updates.
- We will run an entire local version of the jekyll app. In this project it won't make a difference whether we locally store a copy or whether we just update our markdown files. However, later on, we will aim to improve upon this jekyll app, and so we begin maintaining our local copy now.
- Through obsidian we will create a "vault" which is the same folder as our github repo (folder) and jekyll app (folder). Any work in progress that we don't want to be published will therefore be maintained on OneNote instead of Obsidian (my working space before I copy paste to obsidian and clean up a bit). We will thus not be using Hazel.

Step 1

- Navigate to the git repo on your browser.
- Click on the green button "Use this template".
- Enter "digital-garden" as the repository name (or any other suitable repo name).
- Provide a brief and useful description.
- Select "Private". So that all the working files are private, and only what is published is publically available.
- Do not select "Include all branches".
- Click on the green button "Create repository from template". This will create a copy of all of the files from the template as a new repository in your github account.

Step 2

- Navigate to netlify & get started for free.
- Sign-up with github and authorise Netlify.
- Fill in the personal details.
- Select "Import from Git" and then "GitHub".
- Once again authorise Netlify.
- Select "All repositories".

Step 3

- At this stage visit netlify again (we are taking a step back, to understand how this process would work now that we have a netlify account installed in our github. Login to your account on netlify.
- Click on "Import from Git" and "GitHub".
- Select the "digital-garden" repository.
- Stick with the pre-filled values of "master", "Base directory", "jekyll build --trace" and "_site".
- Click "Deploy site".
- This will provide a default domain such as "hungry-jepsen-acd955". This would make the website URL "hungry-jepsen-acd955.netlify.app".

Step 4

- Open Visual Studio Code and select the explorer from the activity bar.
- Then click on "Clone Repository", "Clone from GitHub", "Allow", "Continue", "Allow" & "Open".
- Now search for your git repository (such as "shreyas-harish/digital-garden"), click on it and select a location for the repository.
- As long as one is now able to open the git folder and navigate through the files in _notes, _pages etc, the project is complete. It is recommended to select the "digital-garden" (full repo) folder as the vault. This will later make it easy to sync changes with github.

Note that by editing .md files in the _notes and _pages folders, we can make live updates to actual notes hosted on the web (live).

End of Note

Notes mentioning this note