docs: update hosting.md with Vercel hosting instructions (#406)

* Update hosting.md with Vercel hosting instructions

* Update docs/hosting.md

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* Update docs/hosting.md

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* Run npm run format

---------

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
This commit is contained in:
Zane Helton 2023-08-23 18:14:23 -04:00 committed by GitHub
parent c707c0dc73
commit 6b6275c8f7
5 changed files with 54 additions and 10 deletions

View File

@ -116,3 +116,53 @@ See the [GitHub documentation](https://docs.github.com/en/pages/configuring-a-cu
> 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.
> >
> Make sure you save your changes to Git and sync it to GitHub by doing `npx quartz sync`. This will also make sure to pull any updates you may have made from other devices so you have them locally. > Make sure you save your changes to Git and sync it to GitHub by doing `npx quartz sync`. This will also make sure to pull any updates you may have made from other devices so you have them locally.
## Vercel
### Fix URLs
Before deploying to Vercel, a `vercel.json` file is required at the root of the project directory. It needs to contain the following configuration so that URLs don't require the `.html` extension:
```json title="vercel.json"
{
"cleanUrls": true
}
```
### Deploy to Vercel
1. Log in to the [Vercel Dashboard](https://vercel.com/dashboard) and click "Add New..." > Project
2. Import the Git repository containing your Quartz project.
3. Give the project a name (lowercase characters and hyphens only)
4. Check that these configuration options are set:
| Configuration option | Value |
| ----------------------------------------- | ------------------ |
| Framework Preset | `Other` |
| Root Directory | `./` |
| Build and Output Settings > Build Command | `npx quartz build` |
5. Press Deploy. Once it's live, you'll have 2 `*.vercel.app` URLs to view the page.
### Custom Domain
> [!note]
> If there is something already hosted on the domain, these steps will not work without replacing the previous content. As a workaround, you could use Next.js rewrites or use the next section to create a subdomain.
1. Update the `baseUrl` in `quartz.config.js` if necessary.
2. Go to the [Domains - Dashboard](https://vercel.com/dashboard/domains) page in Vercel.
3. Connect the domain to Vercel
4. Press "Add" to connect a custom domain to Vercel.
5. Select your Quartz repository and press Continue.
6. Enter the domain you want to connect it to.
7. Follow the instructions to update your DNS records until you see "Valid Configuration"
### Use a Subdomain
Using `docs.example.com` is an example of a subdomain. They're a simple way of connecting multiple deployments to one domain.
1. Update the `baseUrl` in `quartz.config.js` if necessary.
2. Ensure your domain has been added to the [Domains - Dashboard](https://vercel.com/dashboard/domains) page in Vercel.
3. Go to the [Vercel Dashboard](https://vercel.com/dashboard) and select your Quartz project.
4. Go to the Settings tab and then click Domains in the sidebar
5. Enter your subdomain into the field and press Add

View File

@ -43,9 +43,7 @@
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
transition: transition: opacity 0.3s ease, visibility 0.3s ease;
opacity 0.3s ease,
visibility 0.3s ease;
@media all and (max-width: $mobileBreakpoint) { @media all and (max-width: $mobileBreakpoint) {
display: none !important; display: none !important;

View File

@ -67,9 +67,7 @@
width: 100%; width: 100%;
border-radius: 5px; border-radius: 5px;
background: var(--light); background: var(--light);
box-shadow: box-shadow: 0 14px 50px rgba(27, 33, 48, 0.12), 0 10px 30px rgba(27, 33, 48, 0.16);
0 14px 50px rgba(27, 33, 48, 0.12),
0 10px 30px rgba(27, 33, 48, 0.16);
margin-bottom: 2em; margin-bottom: 2em;
} }

View File

@ -42,9 +42,7 @@ button#toc {
& > li > a { & > li > a {
color: var(--dark); color: var(--dark);
opacity: 0.35; opacity: 0.35;
transition: transition: 0.5s ease opacity, 0.3s ease color;
0.5s ease opacity,
0.3s ease color;
&.in-view { &.in-view {
opacity: 0.75; opacity: 0.75;
} }