Skip to content

Add required validate.yml workflow and update the README #307

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 23, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions .github/workflows/validate.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
name: Validate Template
on: push

jobs:
validate:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Validate Sanity Template
uses: sanity-io/template-validator@v2
87 changes: 52 additions & 35 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ This starter is a statically generated personal website that uses [Next.js][next

The Studio connects to Sanity Content Lake, which gives you hosted content APIs with a flexible query language, on-demand image transformations, powerful patching, and more. You can use this starter to kick-start a personal website or learn these technologies.

[![Deploy with Vercel](https://vercel.com/button)][vercel-deploy]

## Features

- A performant, static personal website with editable projects
Expand All @@ -23,11 +21,16 @@ The Studio connects to Sanity Content Lake, which gives you hosted content APIs
- [Table of Contents](#table-of-contents)
- [Project Overview](#project-overview)
- [Important files and folders](#important-files-and-folders)
- [Configuration](#configuration)
- [Step 1. Set up the environment](#step-1-set-up-the-environment)
- [Step 2. Set up the project locally](#step-2-set-up-the-project-locally)
- [Step 3. Run Next.js locally in development mode](#step-3-run-nextjs-locally-in-development-mode)
- [Step 4. Deploy to production](#step-4-deploy-to-production)
- [ Getting Started](#configuration)
- [Step 1. Initialize template with Sanity CLI](#initialize-template-with-sanity-cli)
- [Step 2. Run app locally in development mode](#run-app-locally-in-development-mode)
- [Step 3. Open the app and sign in to the Studio](#open-the-app-and-sign-in-to-the-studio)
- [Adding content with Sanity](#adding-content-with-sanity)
- [Step 1. Publish your first document](#publish-your-first-document)
- [Step 2. Extending the Sanity schema](#extending-the-sanity-schema)
- [Deploying your application and inviting editors]()
- [Step 1. Deploy Next.js app to Vercel](#deploy-next.js-app-to-vercel)
- [Step 2. Invite a collaborator](#invite-a-collaborator)
- [Questions and Answers](#questions-and-answers)
- [It doesn't work! Where can I get help?](#it-doesnt-work-where-can-i-get-help)
- [How can I remove the "Next steps" block from my personal site?](#how-can-i-remove-the-next-steps-block-from-my-personal-website)
Expand All @@ -52,53 +55,67 @@ The Studio connects to Sanity Content Lake, which gives you hosted content APIs
| `/sanity/plugins` | Where the advanced Sanity Studio customization is setup |
| `/sanity/loader/loadQuery.ts`,`/sanity/loader/useQuery.ts` | Configuration for the Sanity Content Lake client |

## Configuration
## Getting Started

### Step 1. Set up the environment
### Installing the template

Use the Deploy Button below. It will let you deploy the starter using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-sanity-example) as well as connect it to your Sanity Content Lake using [the Sanity Vercel Integration][integration].
We will take a look at installing this template with the Sanity CLI, running locally, and lastly deploying to Vercel. If you'd rather start by deploying to Vercel, please instead reference the instructions in [`vercel-installation-instructions.md`](./vercel-installation-instructions.md)

[![Deploy with Vercel](https://vercel.com/button)][vercel-deploy]
#### 1. Initialize template with Sanity CLI

### Step 2. Set up the project locally
Run the command in your Terminal to initialize this template on your local computer.

[Clone the repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) that was created for you on your GitHub account. Once cloned, run the following command from the project's root directory:
See the documentation if you are [having issues with the CLI](https://www.sanity.io/help/cli-errors).

```bash
npx vercel link
```shell
npm create sanity@latest -- --template sanity-io/template-nextjs-personal-website
```

Download the environment variables needed to connect Next.js and the Studio to your Sanity project:
#### 2. Run app locally in development mode

Navigate to the template directory using `cd <your app name>`, and start the development servers by running the following command

```bash
npx vercel env pull
```shell
npm run dev
```

### Step 3. Run Next.js locally in development mode
#### 3. Open the app and sign in to the Studio

```bash
npm install && npm run dev
```
Open the Next.js app running locally in your browser on [http://localhost:3000](http://localhost:3000).

When you run this development server, the changes you make in your frontend and studio configuration will be applied live using hot reloading.
Open the Studio by navigating to the `/studio` route [http://localhost:3000/studio](http://localhost:3000/studio). You should now see a screen prompting you to log in to the Studio. Use the same service (Google, GitHub, or email) that you used when you logged in to the CLI.

Your personal website should be up and running on [http://localhost:3000][localhost-3000]! You can create and edit content on [http://localhost:3000/studio][localhost-3000-studio].
### Adding content with Sanity

### Step 4. Deploy to production
#### 1. Publish your first document

To deploy your changes to production you use `git`:
The template comes pre-defined with a schema containing `Page` and `Project` document types.

```bash
git add .
git commit
git push
```
From the Studio, click "+ Create" and select the `Project` document type. Go ahead and create and publish the document.

Alternatively, you can deploy without a `git` hosting provider using the Vercel CLI:
Your content should now appear in your Next.js app ([http://localhost:3000](http://localhost:3000)) as well as in the Studio on the "Presentation" Tab

```bash
npx vercel --prod
```
#### 2. Extending the Sanity schema

The schema for the `Post` document type is defined in the `studio/src/schemaTypes/post.ts` file. You can [add more document types](https://www.sanity.io/docs/schema-types) to the schema to suit your needs.

### Deploying your application and inviting editors

#### 1. Deploy Next.js app to Vercel

Your app is still only running on your local computer. It's time to deploy and get it into the hands of other content editors.

You have the freedom to deploy your Next.js app to your hosting provider of choice. With Vercel and GitHub being a popular choice, we'll cover the basics of that approach.

1. Create a GitHub repository from this project. [Learn more](https://docs.github.com/en/migrations/importing-source-code/using-the-command-line-to-import-source-code/adding-locally-hosted-code-to-github).
2. Create a new Vercel project and connect it to your Github repository.
3. Configure your Environment Variables.

#### 2. Invite a collaborator

Now that you’ve deployed your Next.js application and Sanity Studio, you can optionally invite a collaborator to your Studio. Open up [Manage](https://www.sanity.io/manage), select your project and click "Invite project members"

They will be able to access the deployed Studio, where you can collaborate together on creating content.

## Questions and Answers

Expand Down
59 changes: 59 additions & 0 deletions vercel-installation-instructions.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
# Deploying with Vercel

## Table of Contents

- [Configuration](#configuration)
- [Step 1. Set up the environment](#step-1-set-up-the-environment)
- [Step 2. Set up the project locally](#step-2-set-up-the-project-locally)
- [Step 3. Run Next.js locally in development mode](#step-3-run-nextjs-locally-in-development-mode)
- [Step 4. Deploy to production](#step-4-deploy-to-production)

## Deploying with Vercel

### Step 1. Set up the environment

Use the Deploy Button below. It will let you deploy the starter using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-sanity-example) as well as connect it to your Sanity Content Lake using [the Sanity Vercel Integration][integration].

[![Deploy with Vercel](https://vercel.com/button)][vercel-deploy]

### Step 2. Set up the project locally

[Clone the repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) that was created for you on your GitHub account. Once cloned, run the following command from the project's root directory:

```bash
npx vercel link
```

Download the environment variables needed to connect Next.js and the Studio to your Sanity project:

```bash
npx vercel env pull
```

### Step 3. Run Next.js locally in development mode

```bash
npm install && npm run dev
```

When you run this development server, the changes you make in your frontend and studio configuration will be applied live using hot reloading.

Your personal website should be up and running on [http://localhost:3000][localhost-3000]! You can create and edit content on [http://localhost:3000/studio][localhost-3000-studio].

### Step 4. Deploy to production

To deploy your changes to production you use `git`:

```bash
git add .
git commit
git push
```

Alternatively, you can deploy without a `git` hosting provider using the Vercel CLI:

```bash
npx vercel --prod
```

[vercel-deploy]: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsanity-io%2Ftemplate-nextjs-personal-website&project-name=nextjs-personal-website&repository-name=nextjs-personal-website&demo-title=Personal+Website+with+Built-in+Content+Editing&demo-description=A+Sanity-powered+personal+website+with+built-in+content+editing+and+instant+previews.+Uses+App+Router.&demo-url=https%3A%2F%2Ftemplate-nextjs-personal-website.sanity.build%2F&demo-image=https%3A%2F%2Fuser-images.githubusercontent.com%2F6951139%2F206395107-e58a796d-13a9-400a-94b6-31cb5df054ab.png&integration-ids=oac_hb2LITYajhRQ0i4QznmKH7gx&external-id=nextjs%3Btemplate%3Dtemplate-nextjs-personal-website
Loading