docs: polish and update

This commit is contained in:
Jacky Zhao 2022-06-29 16:57:36 -07:00
parent 200c605142
commit 8a100edeb8
8 changed files with 159 additions and 96 deletions

View File

@ -11,17 +11,16 @@ Host your second brain and [digital garden](https://jzhao.xyz/posts/networked-th
5. Support for both Markdown Links and Wikilinks 5. Support for both Markdown Links and Wikilinks
## Get Started ## Get Started
> 📚 [Setup your own digital garden using Quartz](notes/setup.md) > 📚 Step 1: [Setup your own digital garden using Quartz](notes/setup.md)
Not convinced yet? Look at some [community digital gardens](notes/showcase.md) built with Quartz, or read about [why I made Quartz](notes/philosophy.md) to begin with. Not convinced yet? Look at some [community digital gardens](notes/showcase.md) built with Quartz, or read about [why I made Quartz](notes/philosophy.md) to begin with.
## Content Lists Returning user? Figure out how to [[notes/updating|update]] your existing Quartz garden.
If you prefer browsing the contents of this site through a list instead of a graph, you can find content lists here too:
- [All Notes](/notes) ### Content Lists
- [Setup-related Notes](/tags/setup) If you prefer browsing the contents of this site through a list instead of a graph, you see a list of all [setup-related notes](/tags/setup).
## Troubleshooting ### Troubleshooting
- 🚧 [Troubleshooting and FAQ](notes/troubleshooting.md) - 🚧 [Troubleshooting and FAQ](notes/troubleshooting.md)
- 🐛 [Submit an Issue](https://github.com/jackyzha0/quartz/issues) - 🐛 [Submit an Issue](https://github.com/jackyzha0/quartz/issues)
- 👀 [Discord Community](https://discord.gg/cRFFHYye7t) - 👀 [Discord Community](https://discord.gg/cRFFHYye7t)

View File

@ -2,6 +2,7 @@
title: "Configuration" title: "Configuration"
tags: tags:
- setup - setup
weight: 5
--- ---
## Configuration ## Configuration
@ -10,13 +11,49 @@ Quartz is designed to be extremely configurable. You can find the bulk of the co
The majority of configuration can be be found under `data/config.yaml`. An annotated example configuration is shown below. The majority of configuration can be be found under `data/config.yaml`. An annotated example configuration is shown below.
```yaml ```yaml
name: Your name here! # Shows in the footer # The name to display in the footer
enableToc: true # Whether to show a Table of Contents name: Jacky Zhao
enableLinkPreview: true # whether to render card previews for links
description: Page description to show to search engines
page_title: Quartz Example Page # Default Page Title
links: # Links to show in footer # whether to globally show the table of contents on each page
# this can be turned off on a per-page basis by adding this to the
# front-matter of that note
enableToc: true
# whether to by-default open or close the table of contents on each page
openToc: false
# whether to display on-hover link preview cards
enableLinkPreview: true
# whether to try to process Latex
enableLatex: true
# whether to enable single-page-app style rendering
# this prevents flahses of unstyled content and overall improves
# smoothness of quartz. More info in issue #109 on GitHub
enableSPA: true
# whether to render a footer
enableFooter: true
# whether backlinks of pages should show the context in which
# they were mentioned
enableContextualBacklinks: true
# whether to show a section of recent notes on the home page
enableRecentNotes: false
# page description used for SEO
description:
Host your second brain and digital garden for free. Quartz features extremely fast full-text search,
Wikilink support, backlinks, local graph, tags, and link previews.
# title of the home page (also for SEO)
page_title:
"🪴 Quartz 3.2"
# links to show in the footer
links:
- link_name: Twitter - link_name: Twitter
link: https://twitter.com/_jzhao link: https://twitter.com/_jzhao
- link_name: Github - link_name: Github
@ -24,14 +61,6 @@ links: # Links to show in footer
``` ```
### HTML Favicons ### HTML Favicons
A Favicon is most commonly seen as the **image preceding the URL in a browser**.
Some other examples include (but are not limited to) bookmarks, search history,
and app icons (i.e. "save page to home screen" on mobile devices).
[File format support](https://en.wikipedia.org/wiki/Favicon#File_format_support)
and the [use of favicons](https://en.wikipedia.org/wiki/Favicon#Use_of_favicon)
differ across the combination of platforms and browsers.
If you would like to customize the favicons of your quartz-based website, you If you would like to customize the favicons of your quartz-based website, you
can add them to the `data/config.yaml` file. The **default** without any set can add them to the `data/config.yaml` file. The **default** without any set
`favicon` key is: `favicon` key is:
@ -50,11 +79,7 @@ favicon:
# - { ... } # Repeat for each additional favicon you want to add # - { ... } # Repeat for each additional favicon you want to add
``` ```
In this format, the following keys are available: In this format, the keys are identical to their HTML representations.
- `rel`: The `rel` attribute of the `<link>` tag.
- `type`: The `type` attribute of the `<link>` tag.
- `href` (optional): The `href` attribute of the `<link>` tag.
- `sizes` (optional): The `sizes` attribute of the `<link>` tag.
If you plan to add multiple favicons generated by a website (see list below), it If you plan to add multiple favicons generated by a website (see list below), it
may be easier to define it as HTML. Here is an example which appends the may be easier to define it as HTML. Here is an example which appends the
@ -71,17 +96,6 @@ webpage to the home screen of their Apple device. If you are interested in more
information about the current, and past, standards of favicons, you can read information about the current, and past, standards of favicons, you can read
[this article](https://www.emergeinteractive.com/insights/detail/the-essentials-of-favicons/). [this article](https://www.emergeinteractive.com/insights/detail/the-essentials-of-favicons/).
Some websites that **generate favicons** for you (ordered alphabetically) include:
- [`favicon.io`](https://favicon.io/)
- [`realfavicongenerator.net`](https://realfavicongenerator.net/)
- [`www.favicon.cc`](https://www.favicon.cc/)
These sites will take a base image and generate a set of favicons for you,
one of which will be, for example, the `apple-touch-icon` favicon. These sites
will often **also provide the HTML** for the favicon, which can be simply
added to the `data/config.yaml` using the HTML format of the `favicon`
argument.
**Note** that all generated favicon paths, defined by the `href` **Note** that all generated favicon paths, defined by the `href`
attribute, are relative to the `static/` directory. attribute, are relative to the `static/` directory.
@ -89,11 +103,50 @@ attribute, are relative to the `static/` directory.
To customize the Interactive Graph view, you can poke around `data/graphConfig.yaml`. To customize the Interactive Graph view, you can poke around `data/graphConfig.yaml`.
```yaml ```yaml
enableLegend: false # automatically generate a legend # if true, a Global Graph will be shown on home page with full width, no backlink.
enableDrag: true # allow dragging nodes in the graph # A different set of Local Graphs will be shown on sub pages.
enableZoom: true # allow zooming and panning the graph # if false, Local Graph will be default on every page as usual
depth: -1 # how many neighbours of the current node to show (-1 is all nodes) enableGlobalGraph: false
paths: # colour specific nodes path off of their path
### Local Graph ###
localGraph:
# whether automatically generate a legend
enableLegend: false
# whether to allow dragging nodes in the graph
enableDrag: true
# whether to allow zooming and panning the graph
enableZoom: true
# how many neighbours of the current node to show (-1 is all nodes)
depth: 1
# initial zoom factor of the graph
scale: 1.2
# how strongly nodes should repel each other
repelForce: 2
# how strongly should nodes be attracted to the center of gravity
centerForce: 1
# what the default link length should be
linkDistance: 1
# how big the node labels should be
fontSize: 0.6
# scale at which to start fading the labes on nodes
opacityScale: 3
### Global Graph ###
globalGraph:
# same settings as above
### For all graphs ###
# colour specific nodes path off of their path
paths:
- /moc: "#4388cc" - /moc: "#4388cc"
``` ```
@ -110,7 +163,7 @@ More info about partials on [Hugo's website.](https://gohugo.io/templates/partia
Still having problems? Checkout our [FAQ and Troubleshooting guide](notes/troubleshooting.md). Still having problems? Checkout our [FAQ and Troubleshooting guide](notes/troubleshooting.md).
## Multilingual ## Language Support
[CJK + Latex Support (测试)](notes/CJK%20+%20Latex%20Support%20(测试).md) comes out of the box with Quartz. [CJK + Latex Support (测试)](notes/CJK%20+%20Latex%20Support%20(测试).md) comes out of the box with Quartz.
Want to support languages that read from right-to-left (like Arabic)? Hugo (and by proxy, Quartz) supports this natively. Want to support languages that read from right-to-left (like Arabic)? Hugo (and by proxy, Quartz) supports this natively.

View File

@ -2,29 +2,18 @@
title: "Editing Content in Quartz" title: "Editing Content in Quartz"
tags: tags:
- setup - setup
weight: 1
--- ---
## Editing ## Editing
Quartz runs on top of [Hugo](https://gohugo.io/) so all notes are written in [Markdown](https://www.markdownguide.org/getting-started/). Quartz runs on top of [Hugo](https://gohugo.io/) so all notes are written in [Markdown](https://www.markdownguide.org/getting-started/).
### Obsidian
I recommend using [Obsidian](http://obsidian.md/) as a way to edit and grow your digital garden. It comes with a really nice editor and graphical interface to preview all of your local files.
This step is **highly recommended**.
🔗 [How to setup your Obsidian Vault to work with Quartz](notes/obsidian.md)
### Ignoring Files
Only want to publish a subset of all of your notes? Don't worry, Quartz makes this a simple two-step process.
❌ [Excluding pages from being published](notes/ignore%20notes.md)
### Folder Structure ### Folder Structure
Here's a rough overview of what's what. Here's a rough overview of what's what.
**All content in your garden can found in the `/content` folder.** To make edits, you can open any of the files and make changes directly and save it. You can organize content into any folder you'd like. **All content in your garden can found in the `/content` folder.** To make edits, you can open any of the files and make changes directly and save it. You can organize content into any folder you'd like.
**To edit the main home page, open `/content/_index.md`.* **To edit the main home page, open `/content/_index.md`.**
To create a link between notes in your garden, just create a normal link using Markdown pointing to the document in question. Please note that **all links should be relative to the root `/content` path**. To create a link between notes in your garden, just create a normal link using Markdown pointing to the document in question. Please note that **all links should be relative to the root `/content` path**.
@ -40,6 +29,8 @@ Example image (source is in content/notes/images/example.png)
![Example Image](/content/notes/images/example.png) ![Example Image](/content/notes/images/example.png)
``` ```
You can also use wikilinks if that is what you are more comfortable with!
### Front Matter ### Front Matter
Hugo is picky when it comes to metadata for files. Make sure that your title is double-quoted and that you have a title defined at the top of your file like so. You can also add tags here as well. Hugo is picky when it comes to metadata for files. Make sure that your title is double-quoted and that you have a title defined at the top of your file like so. You can also add tags here as well.
@ -48,22 +39,28 @@ Hugo is picky when it comes to metadata for files. Make sure that your title is
title: "Example Title" title: "Example Title"
tags: tags:
- example-tag - example-tag
enableToc: false # do not show a table of contents on this page
--- ---
Rest of your content here... Rest of your content here...
``` ```
### Obsidian
I recommend using [Obsidian](http://obsidian.md/) as a way to edit and grow your digital garden. It comes with a really nice editor and graphical interface to preview all of your local files.
This step is **highly recommended**.
> 🔗 Step 3: [How to setup your Obsidian Vault to work with Quartz](notes/obsidian.md)
## Previewing Changes ## Previewing Changes
This step is purely optional and mostly for those who want to see the published version of their digital garden locally before opening it up to the internet. This is *highly recommended* but not required. This step is purely optional and mostly for those who want to see the published version of their digital garden locally before opening it up to the internet. This is *highly recommended* but not required.
👀 [Preview Quartz Changes](notes/preview%20changes.md) > 👀 Step 4: [Preview Quartz Changes](notes/preview%20changes.md)
For those who like to live life more on the edge, viewing the garden through Obsidian gets you pretty close to the real thing. For those who like to live life more on the edge, viewing the garden through Obsidian gets you pretty close to the real thing.
## Publishing Changes ## Publishing Changes
Now that you know the basics of managing your digital garden using Quartz, you can publish it to the internet! Now that you know the basics of managing your digital garden using Quartz, you can publish it to the internet!
🌍 [Hosting Quartz online!](notes/hosting.md) > 🌍 Step 5: [Hosting Quartz online!](notes/hosting.md)
Having problems? Checkout our [FAQ and Troubleshooting guide](notes/troubleshooting.md). Having problems? Checkout our [FAQ and Troubleshooting guide](notes/troubleshooting.md).

View File

@ -2,6 +2,7 @@
title: "Deploying Quartz to the Web" title: "Deploying Quartz to the Web"
tags: tags:
- setup - setup
weight: 4
--- ---
## GitHub Pages ## GitHub Pages
@ -41,7 +42,7 @@ Note: we specifically push to the `hugo` branch here. Our GitHub action automati
### Setting up the Site ### Setting up the Site
Now let's get this site up and running. Never hosted a site before? No problem. Have a fancy custom domain you already own or want to subdomain your Quartz? That's easy too. Now let's get this site up and running. Never hosted a site before? No problem. Have a fancy custom domain you already own or want to subdomain your Quartz? That's easy too.
Here, we take advantage of GitHub's free page hosting to deploy our site. Change `baseURL` in `/config.toml`. Here, we take advantage of GitHub's free page hosting to deploy our site. Change `baseURL` in `/config.toml`.
Make sure that your `baseURL` has a trailing `/`! Make sure that your `baseURL` has a trailing `/`!
@ -51,7 +52,7 @@ Make sure that your `baseURL` has a trailing `/`!
baseURL = "https://<YOUR-DOMAIN>/" baseURL = "https://<YOUR-DOMAIN>/"
``` ```
If you are using this under a subdomain (e.g. `<YOUR-GITHUB-USERNAME>.github.io/quartz`), include the trailing `/`. If you are using this under a subdomain (e.g. `<YOUR-GITHUB-USERNAME>.github.io/quartz`), include the trailing `/`. **You need to do this especially if you are using GitHub!**
```toml ```toml
baseURL = "https://<YOUR-GITHUB-USERNAME>.github.io/quartz/" baseURL = "https://<YOUR-GITHUB-USERNAME>.github.io/quartz/"
@ -75,10 +76,15 @@ Please note that the `cname` field should *not* have any path `e.g. end with /qu
Have a custom domain? [Learn how to set it up with Quartz ](notes/custom%20Domain.md). Have a custom domain? [Learn how to set it up with Quartz ](notes/custom%20Domain.md).
### Ignoring Files
Only want to publish a subset of all of your notes? Don't worry, Quartz makes this a simple two-step process.
❌ [Excluding pages from being published](notes/ignore%20notes.md)
--- ---
Now that your Quartz is live, let's figure out how to make Quartz really *yours*! Now that your Quartz is live, let's figure out how to make Quartz really *yours*!
🎨 [Customizing Quartz](notes/config.md) > Step 6: 🎨 [Customizing Quartz](notes/config.md)
Having problems? Checkout our [FAQ and Troubleshooting guide](notes/troubleshooting.md). Having problems? Checkout our [FAQ and Troubleshooting guide](notes/troubleshooting.md).

View File

@ -2,6 +2,7 @@
title: "Obsidian Vault Integration" title: "Obsidian Vault Integration"
tags: tags:
- setup - setup
weight: 2
--- ---
## Setup ## Setup
@ -27,3 +28,5 @@ Inserting front matter everytime you want to create a new Note gets annoying rea
**If you decide to overwrite the `/content` folder completely, don't remove the `/content/templates` folder!** **If you decide to overwrite the `/content` folder completely, don't remove the `/content/templates` folder!**
Head over to Options > Core Plugins and enable the Templates plugin. Then go to Options > Hotkeys and set a hotkey for 'Insert Template' (I recommend `[cmd]+T`). That way, when you create a new note, you can just press the hotkey for a new template and be ready to go! Head over to Options > Core Plugins and enable the Templates plugin. Then go to Options > Hotkeys and set a hotkey for 'Insert Template' (I recommend `[cmd]+T`). That way, when you create a new note, you can just press the hotkey for a new template and be ready to go!
> 👀 Step 4: [Preview Quartz Changes](notes/preview%20changes.md)

View File

@ -1,5 +1,6 @@
--- ---
title: "Preview Changes" title: "Preview Changes"
weight: 3
--- ---
If you'd like to preview what your Quartz site looks like before deploying it to the internet, here's exactly how to do that! If you'd like to preview what your Quartz site looks like before deploying it to the internet, here's exactly how to do that!
@ -12,12 +13,6 @@ This step will generate the list of backlinks for Hugo to parse. Ensure you have
```shell ```shell
# Install and link `hugo-obsidian` locally # Install and link `hugo-obsidian` locally
$ go install github.com/jackyzha0/hugo-obsidian@latest $ go install github.com/jackyzha0/hugo-obsidian@latest
# Navigate to your local Quartz folder
$ cd <location-of-your-local-quartz>
# Scrape all links in your Quartz folder and generate info for Quartz
$ hugo-obsidian -input=content -output=assets/indices -index -root=.
``` ```
If you are running into an error saying that `command not found: hugo-obsidian`, make sure you set your `GOPATH` correctly! This will allow your terminal to correctly recognize hugo-obsidian as an executable. If you are running into an error saying that `command not found: hugo-obsidian`, make sure you set your `GOPATH` correctly! This will allow your terminal to correctly recognize hugo-obsidian as an executable.
@ -32,7 +27,9 @@ Hugo is the static site generator that powers Quartz. [Install Hugo with "extend
$ cd <location-of-your-local-quartz> $ cd <location-of-your-local-quartz>
# Start local server # Start local server
$ hugo server $ make serve
# View your site in a browser at http://localhost:1313/ # View your site in a browser at http://localhost:1313/
``` ```
> 🌍 Step 5: [Hosting Quartz online!](notes/hosting.md)

View File

@ -2,6 +2,7 @@
title: "Setup" title: "Setup"
tags: tags:
- setup - setup
weight: 0
--- ---
## Making your own Quartz ## Making your own Quartz
@ -26,33 +27,6 @@ $ git clone https://github.com/YOUR-USERNAME/quartz
## Editing ## Editing
Great! Now you have everything you need to start editing and growing your digital garden. If you're ready to start writing content already, check out the recommended flow for editing notes in Quartz. Great! Now you have everything you need to start editing and growing your digital garden. If you're ready to start writing content already, check out the recommended flow for editing notes in Quartz.
✏️ [Editing Notes in Quartz](notes/editing.md) > ✏️ Step 2: [Editing Notes in Quartz](notes/editing.md)
Having problems? Checkout our [FAQ and Troubleshooting guide](notes/troubleshooting.md). Having problems? Checkout our [FAQ and Troubleshooting guide](notes/troubleshooting.md).
## Updating
Haven't updated Quartz in a while and want all the cool new optimizations? On Unix/Mac systems you can run the following command for a one-line update! This command will show you a log summary of all commits since you last updated, press `q` to acknowledge this. Then, it will show you each change in turn and press `y` to accept the patch or `n` to reject it. Usually you should press `y` for most of these unless it conflicts with existing changes you've made!
```shell
make update
# or, if you don't want the interactive parts and just want the update
make update-force
```
Or, manually checkout the changes yourself.
> ⚠️ **WARNING** ⚠️
>
> If you customized the files in `data/`, or anything inside `layouts/`, your customization may be overwritten!
> Make sure you have a copy of these changes if you don't want to lose them.
```shell
# add Quartz as a remote host
git remote add upstream git@github.com:jackyzha0/quartz.git
# index and fetch changes
git fetch upstream
git checkout -p upstream/hugo -- layouts .github Makefile assets/js assets/styles/base.scss assets/styles/darkmode.scss config.toml data
```

34
content/notes/updating.md Normal file
View File

@ -0,0 +1,34 @@
---
title: "Updating"
aliases:
- update
---
Haven't updated Quartz in a while and want all the cool new optimizations? On Unix/Mac systems you can run the following command for a one-line update! This command will show you a log summary of all commits since you last updated, press `q` to acknowledge this. Then, it will show you each change in turn and press `y` to accept the patch or `n` to reject it. Usually you should press `y` for most of these unless it conflicts with existing changes you've made!
```shell
make update
```
Or, if you don't want the interactive parts and just want to force update your local garden (this assumed that you are okay with some of your personalizations been overriden!)
```shell
make update-force
```
Or, manually checkout the changes yourself.
> ⚠️ **WARNING** ⚠️
>
> If you customized the files in `data/`, or anything inside `layouts/`, your customization may be overwritten!
> Make sure you have a copy of these changes if you don't want to lose them.
```shell
# add Quartz as a remote host
git remote add upstream git@github.com:jackyzha0/quartz.git
# index and fetch changes
git fetch upstream
git checkout -p upstream/hugo -- layouts .github Makefile assets/js assets/styles/base.scss assets/styles/darkmode.scss config.toml data
```