mirror of
https://github.com/alrayyes/wiki.git
synced 2024-11-26 05:19:01 +00:00
note formatting
This commit is contained in:
parent
3adc73a703
commit
075ac33474
5 changed files with 35 additions and 33 deletions
|
@ -18,6 +18,7 @@ Once you're happy with it, let's see how to [[hosting|deploy Quartz to the web]]
|
||||||
> For full help options, you can run `npx quartz build --help`.
|
> For full help options, you can run `npx quartz build --help`.
|
||||||
>
|
>
|
||||||
> Most of these have sensible defaults but you can override them if you have a custom setup:
|
> Most of these have sensible defaults but you can override them if you have a custom setup:
|
||||||
|
>
|
||||||
> - `-d` or `--directory`: the content folder. This is normally just `content`
|
> - `-d` or `--directory`: the content folder. This is normally just `content`
|
||||||
> - `-v` or `--verbose`: print out extra logging information
|
> - `-v` or `--verbose`: print out extra logging information
|
||||||
> - `-o` or `--output`: the output folder. This is normally just `public`
|
> - `-o` or `--output`: the output folder. This is normally just `public`
|
||||||
|
|
|
@ -101,15 +101,17 @@ These correspond to following parts of the page:
|
||||||
![[quartz-layout.png|800]]
|
![[quartz-layout.png|800]]
|
||||||
|
|
||||||
> [!note]
|
> [!note]
|
||||||
> There are two additional layout fields that are *not* shown in the above diagram.
|
> There are two additional layout fields that are _not_ shown in the above diagram.
|
||||||
|
>
|
||||||
> 1. `head` is a single component that renders the `<head>` [tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) in the HTML. This doesn't appear visually on the page and is only is responsible for metadata about the document like the tab title, scripts, and styles.
|
> 1. `head` is a single component that renders the `<head>` [tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) in the HTML. This doesn't appear visually on the page and is only is responsible for metadata about the document like the tab title, scripts, and styles.
|
||||||
> 2. `header` is a set of components that are laid out horizontally and appears *before* the `beforeBody` section. This enables you to replicate the old Quartz 3 header bar where the title, search bar, and dark mode toggle. By default, Quartz 4 doesn't place any components in the `header`.
|
> 2. `header` is a set of components that are laid out horizontally and appears _before_ the `beforeBody` section. This enables you to replicate the old Quartz 3 header bar where the title, search bar, and dark mode toggle. By default, Quartz 4 doesn't place any components in the `header`.
|
||||||
|
|
||||||
Quartz **components**, like plugins, can take in additional properties as configuration options. If you're familiar with React terminology, you can think of them as Higher-order Components.
|
Quartz **components**, like plugins, can take in additional properties as configuration options. If you're familiar with React terminology, you can think of them as Higher-order Components.
|
||||||
|
|
||||||
See [a list of all the components](./tags/component) for all available components along with their configuration options.
|
See [a list of all the components](./tags/component) for all available components along with their configuration options.
|
||||||
|
|
||||||
### Style
|
### Style
|
||||||
|
|
||||||
Most meaningful style changes like colour scheme and font can be done simply through the [[#General Configuration|general configuration]] options above.
|
Most meaningful style changes like colour scheme and font can be done simply through the [[#General Configuration|general configuration]] options above.
|
||||||
|
|
||||||
However, if you'd like to make more involved style changes, you can do this by writing your own styles. Quartz 4, like Quartz 3, uses [Sass](https://sass-lang.com/guide/) for styling.
|
However, if you'd like to make more involved style changes, you can do this by writing your own styles. Quartz 4, like Quartz 3, uses [Sass](https://sass-lang.com/guide/) for styling.
|
||||||
|
|
|
@ -12,12 +12,12 @@ However, if you'd like to publish your site to the world, you need a way to host
|
||||||
2. In Account Home, select **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**.
|
2. In Account Home, select **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**.
|
||||||
3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information:
|
3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information:
|
||||||
|
|
||||||
|Configuration option|Value|
|
| Configuration option | Value |
|
||||||
|---|---|
|
| ---------------------- | ------------------ |
|
||||||
|Production branch|`v4-alpha`|
|
| Production branch | `v4-alpha` |
|
||||||
|Framework preset|`None`|
|
| Framework preset | `None` |
|
||||||
|Build command|`npx quartz build`|
|
| Build command | `npx quartz build` |
|
||||||
|Build output directory|`public`|
|
| Build output directory | `public` |
|
||||||
|
|
||||||
Press "Save and deploy" and Cloudflare should have a deployed version of your site in about a minute. Then, every time you sync your Quartz changes to GitHub, your site should be updated.
|
Press "Save and deploy" and Cloudflare should have a deployed version of your site in about a minute. Then, every time you sync your Quartz changes to GitHub, your site should be updated.
|
||||||
|
|
||||||
|
@ -80,6 +80,7 @@ jobs:
|
||||||
Then, commit these changes by doing `npx quartz sync`. This should deploy your site to `<github-username>.github.io/<repository-name>`.
|
Then, commit these changes by doing `npx quartz sync`. This should deploy your site to `<github-username>.github.io/<repository-name>`.
|
||||||
|
|
||||||
### Custom Domain
|
### Custom Domain
|
||||||
|
|
||||||
Here's how to add a custom domain to your GitHub pages deployment.
|
Here's how to add a custom domain to your GitHub pages deployment.
|
||||||
|
|
||||||
1. Head to the "Settings" tab of your forked repository.
|
1. Head to the "Settings" tab of your forked repository.
|
||||||
|
@ -93,12 +94,10 @@ Here's how to add a custom domain to your GitHub pages deployment.
|
||||||
- `185.199.111.153`
|
- `185.199.111.153`
|
||||||
- If you are using a subdomain, navigate to your DNS provider and create a `CNAME` record that points your subdomain to the default domain for your site. For example, if you want to use the subdomain `quartz.example.com` for your user site, create a `CNAME` record that points `quartz.example.com` to `<github-username>.github.io`.
|
- If you are using a subdomain, navigate to your DNS provider and create a `CNAME` record that points your subdomain to the default domain for your site. For example, if you want to use the subdomain `quartz.example.com` for your user site, create a `CNAME` record that points `quartz.example.com` to `<github-username>.github.io`.
|
||||||
|
|
||||||
|
![[dns-records.png]]_The above shows a screenshot of Google Domains configured for both `jzhao.xyz` (an apex domain) and `quartz.jzhao.xyz` (a subdomain)._
|
||||||
![[dns-records.png]]*The above shows a screenshot of Google Domains configured for both `jzhao.xyz` (an apex domain) and `quartz.jzhao.xyz` (a subdomain).*
|
|
||||||
|
|
||||||
See the [GitHub documentation](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-a-subdomain) for more detail about how to setup your own custom domain with GitHub Pages.
|
See the [GitHub documentation](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-a-subdomain) for more detail about how to setup your own custom domain with GitHub Pages.
|
||||||
|
|
||||||
|
|
||||||
> [!question] Why aren't my changes showing up?
|
> [!question] Why aren't my changes showing up?
|
||||||
> There could be many different reasons why your changes aren't showing up but the most likely reason is that you forgot to push your changes to GitHub.
|
> There could be many different reasons why your changes aren't showing up but the most likely reason is that you forgot to push your changes to GitHub.
|
||||||
>
|
>
|
||||||
|
|
Loading…
Reference in a new issue