Forem: Defender

Host your Obsidian notebook on GitHub Pages for free

Defender — Sun, 06 Oct 2024 17:58:56 +0000

This tutorial walks you through how to publish your Obsidian notes as a website, hosted on GitHub pages. No coding required. The basic result will look like this: https://quartz.jzhao.xyz/. The look & feel is customizable but is outside the scope of this article. See quartz showcase examples.

The final workflow is shown below. You just write in Obsidian like you normally do, and run a command to publish (or configure it to automatically publish every time you save). Zero friction from idea to internet.

This doubles as an introduction to GitHub for the layperson.

(1) Create a GitHub account

We're using GitHub to host the source files, and to run the script that converts markdown into HTML (the tool that does this conversion is called Quartz, and it is open source).

(2) Fork the template

Open the template here: https://github.com/DefenderOfBasic/obsidian-quartz-template
Click "fork" to make a copy of it in your account:

Give it a name. This will be the name of the published URL: https://<USERNAME>.github.io/<REPO_NAME>

(3) Enable GitHub Actions

Every time you make a change & push it to GitHub, the "actions" will run the script to generate & publish the HTML.

Go to the settings page of your repo

Click on "Pages" in the sidebar

Change the deploy source to "GitHub Actions"

Go to the "Actions" page of your repo

Click the green button: "I understand my workflows, go ahead and enable them"

(Optional) Test that your site is up

At this point you can edit the files on GitHub.com in your browser and the website will be deployed. The rest of the article will be setting up the files locally so you can edit them in Obsidian.

To confirm everything so far is working, try editing the source/content/index.md file in your repo as shown below.

When you make an edit, you'll see a yellow pending circle that will turn green after a minute or so (might need to refresh).

Once it's green, see your website at https://<USERNAME>.github.io/<REPO_NAME>. You should see the words you just edited! 🎉

(4) Download the repository with GitHub desktop

In this step we'll use GitHub desktop to sync the repository from GitHub.com to your computer. This is like adding a Dropbox/Google Drive folder to your computer so you can move files back & forth from your computer to the server.

Download GitHub desktop: https://desktop.github.com/download/
Click Sign in to GitHub.com to connect it to your account
Click Clone a repository from the Internet...

Select the repository that you forked AND note the local path on your computer. You will open this folder in the next step.

Click Clone

(5) Open the Obsidian Vault

In Obsidian, click Open folder as vault

Navigate to the location of the repository from the previous step, and open the folder: source/content/

(in my case the full path is C:/Users/Defender/Documents/GitHub/obsidian-quartz-template/source/content)

Now you can edit this as a normal Obsidian vault. This should come configured with the Git community plugin. To push your changes:

Ctrl+P (or Cmd+P on macOS) then type Git sync to get the option

Go to GitHub.com, you'll see the yellow dot, and green arrow eventually

Thanks for reading! Please let me know if you have any questions/get stuck and we can improve this guide!

I really believe a lot of value in society is unlocked when the layperson understands the basics of working with technology. I think putting something on our species' planetary network is as basic of a need as using the telephone. I've written a couple things in service of this:

Get your own piece of internet real estate in 5 minutes -> how to host your website with Glitch.com and write basic HTML. Another good, free static hosting option that is as easy as editing a google doc.
Your first bookmarklet -> how to automate little actions in your workflow, especially now with ChatGPT generating the code so you don't even have to code, can just describe what you want & wire it up.

This Obsidian / Quartz template contains a source/raw_html folder that is copied into the final build. This means you can use this to deploy any arbitrary HTML, generate something from your favorite LLM and paste it here, or create a personal archive of web pages that are important to you.

Get your own piece of internet real estate in 5 minutes

Defender — Wed, 03 Jul 2024 21:08:14 +0000

There are tons of options out there for publishing content on our planet's global communication network: Instagram, Substack, Mastodon, YouTube, Reddit. These are all great, you should use whatever works, wherever you find your audience.

There is one way of putting stuff on the internet that is rarely advertised, because no one really makes money from it: making your own website.

You don't need to be a "coder" to have your own piece of the internet. If you can maintain a google doc, you can maintain a web page

I love Robin Sloan's philosophy on this. He talks about making software like making a home-cooked meal

People don’t only learn to cook so they can become chefs. Some do! But many more people learn to cook so they can eat better, or more affordably. Because they want to carry on a tradition. Sometimes they learn because they’re bored! Or even because they enjoy spending time with the person who’s teaching them.
...
This messaging app I built for, and with, my family, it won’t change unless we want it to change. There will be no sudden redesign, no flood of ads, no pivot to chase a userbase inscrutable to us. It might go away at some point, but that will be our decision. What is this feeling? Independence? Security? Sovereignty?

This last piece is really important. Websites that I made 20 years ago still work. The companies I used for hosting don't exist anymore, but I can easily move my website anywhere else (just like copying text out of one note app into note app!)

step 0: sign up to Glitch for web hosting

Glitch.com is one website I really like that gives us free web hosting.

I made this template for you:

step 1: copy this template

Open this template: https://glitch.com/edit/#!/personal-website-template-v2
Click "Remix to Edit" in the top right

step 2: edit the HTML

Change the title of the web page by editing the text. Text between <h1> tags is a "header". <p> stands for paragraph, etc.

step 3: share your website

Click "settings" on the left, then "Edit project details" to change the domain name of your website

Click "open in a new window" in the preview pane

congrats! that is your website link, anyone on the planet with that URL can read your words!!

That's it!

you can use this to collect links to all your work online
google or ask chatGPT "how do I do X in HTML", the sky is limit!
every website you've ever seen is HTML. You can just copy any part of it and put it on your website!!!
you can upload pictures (drag and drop them into the Assets tab), or embed youtube videos (click "share" then "embed")

For inspiration, see:

The other free web host I like to use is GitHub Pages. It's nice if you prefer editing your website files on your computer vs in the browser.

Your first bookmarklet

Defender — Fri, 24 May 2024 21:06:13 +0000

Bookmarklets are a great way to automate or tweak things across your web experience. I made one recently that allows me to click a button to show all my interactions with any given twitter user.

This tutorial will walk you through creating your first bookmarklet to edit a value inside a specific element on the page. It will insert a search term into the HackerNews search element.

We're going to:

Open the browser devtools to find the HTML element we want
Write some JavaScript code in the console to manipulate this element
Wrap this code into a bookmark so that when you click it, it runs the code, thus making a "bookmarklet" (a bookmark that runs your code snippet)

Step 1 - get the element with devtools

I'm going to use this page as an example: https://news.ycombinator.com/news

In Chrome, right click on the page and click "inspect" to open devtools

There's a lot of tools here. The important ones to notice are: (1) you can see the HTML, you can click on parts of the HTML to highlight the element on the page (2) you can use this little picker in the top left to click on any element visually, and it will show you where it is in the HTML.

Select the picker and then click on the search box as shown below.

Ok, now we have the HTML element. We need to get its "address" (or CSS selector) so we can get it with JavaScript and control it/do stuff with it.

Right click on the element and select "copy" > "copy selector"

It'll be something like this:

#hnmain > tbody > tr:nth-child(4) > td > center > form > input[type=text]

Step 2 - write JavaScript to control the element

Switch to the "console" tab. And paste in the following code and hit enter.

var selector = `#hnmain > tbody > tr:nth-child(4) > td > center > form > input[type=text]`
console.log("My element:", document.querySelector(selector))

The first line puts the selector into a variable. This snippet says "get the element, using this selector":

document.querySelector(selector)

Finally, console.log() prints whatever we put in.

Let's put the element into a variable instead of just printing it:

var element = document.querySelector(selector)
console.log(element)

At this point, you can ask ChatGPT what to do/google it. You have an HTML element, in javascript, and we want to do something with it.

In this case, I want to set a search string. To do that, google/chatgpt will tell you:

element.value = "your input here"

You now have a piece of code that does something! You can continue to tweak this as needed and interactively see if it works, line by line.

My personal process is usually to have a file to save all the "correct code so far" and in the console I'm just writing things line by line to test them. You can refresh to reset the state.

If you wanted another piece of code to submit the "search" so it goes to the search results page, you would get the HTML element of the form that this search bar lives inside, and then google "given an HTML form element, how to submit it with javascript", get the code for that, and test it.

Step 3 - wrap it into a bookmarklet

Now you have your code that does something. We're going to make it into a bookmark so you can run it on the page with a single button click.

Create a bookmark, like you normally would
Edit it, and instead of a URL, paste in your code, wrapped in:

javascript:(function() { 
// your code here
})();

(the only annoying thing right now is you need to add a semicolon at the end of each line for it to work. I might make a tool in the future to automate this part)

So my full code looks like this that I paste into my bookmark:

javascript:(function() { 

var selector = `#hnmain > tbody > tr:nth-child(4) > td > center > form > input[type=text]`;
var element = document.querySelector(selector);
element.value = "my search term";

})();

That's it!