| | |
|---|
| | | > 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: |
|---|
| | | > |
|---|
| | | > - `-d` or `--directory`: the content folder. This is normally just `content` |
|---|
| | | > - `-v` or `--verbose`: print out extra logging information |
|---|
| | | > - `-o` or `--output`: the output folder. This is normally just `public` |
|---|
| | |
|---|
| | | ![[quartz-layout.png|800]] |
|---|
| | | |
|---|
| | | > [!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. |
|---|
| | | > 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. |
|---|
| | | |
|---|
| | | See [a list of all the components](./tags/component) for all available components along with their configuration options. |
|---|
| | | |
|---|
| | | ### Style |
|---|
| | | |
|---|
| | | 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. |
|---|
| | |
|---|
| | | 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| |
|---|
| | | |---|---| |
|---|
| | | | ---------------------- | ------------------ | |
|---|
| | | |Production branch|`v4-alpha`| |
|---|
| | | |Framework preset|`None`| |
|---|
| | | |Build command|`npx quartz build`| |
|---|
| | |
|---|
| | | Then, commit these changes by doing `npx quartz sync`. This should deploy your site to `<github-username>.github.io/<repository-name>`. |
|---|
| | | |
|---|
| | | ### Custom Domain |
|---|
| | | |
|---|
| | | Here's how to add a custom domain to your GitHub pages deployment. |
|---|
| | | |
|---|
| | | 1. Head to the "Settings" tab of your forked repository. |
|---|
| | |
|---|
| | | - `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`. |
|---|
| | | |
|---|
| | | |
|---|
| | | ![[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. |
|---|
| | | |
|---|
| | | |
|---|
| | | > [!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. |
|---|
| | | > |
|---|
