- NextJS - UI framework
- Vercel - Hosting and Deployment
- Sanity.io: Headless CMS and Content Lake
- TailwindCSS / CSS - Styling and UI
- Umami: Analytics
- PlanetScale: Database Storage for Analytics
- Next Themes: Color Theme
- React Refractor: Syntax Highlighting
Site | Studio |
---|---|
Follow this guide to get this site runnning locally:
git clone https://github.com/Evavic44/sergeivas.com.git
cd sergeivas.com
npm install
- Rename
.env.example
to.env
The secrets variables required to boot this project locally includes:
Project Id
Dataset
API Version
Access Token
These variables come from Sanity. To get them, you need to setup your own Sanity instance. Follow the steps below to do this:
Run the command below in a terminal to create a new Sanity project:
npm create sanity@latest -- --template clean --create-project "John Doe" --dataset production
- Create an account: If you already have a Sanity account, this will automatically connect to it, if not, select a login provider from the list of options, hit
Enter
and follow the prompt to create one. - Choose an Output path: Hit the
Enter
key to select the default path. - Install the dependencies with your preferred package manager
Once completed open up the studio directory.
cd john-doe
code .
- Navigate to the
sanity.config.ts
file in the root directory and copy theprojectId
. Now you can close the studio file.
Open up the cloned repository and do the following:
- Set
NEXT_PUBLIC_SANITY_PROJECT_ID
to the project id you copied earlier - Set
NEXT_PUBLIC_SANITY_DATASET
toproduction
or the dataset name you used. - Set
NEXT_PUBLIC_SANITY_API_VERSION
to your current date in YYYY-MM-DD format or leave as is - If you want to use an access token, visit sanity.io/manage > project name > API > Token to create one. Once generated, copy the token and set it to
NEXT_PUBLIC_SANITY_ACCESS_TOKEN
.
Warning If you don't want to use a token, comment it out in the env.api.ts file or else it will throw errors.
- Now run
npm run dev
and you can visit http://localhost:3000 to see the project live.
By default the UI will be blank. To start adding data to the site, visit your studio at http://localhost:3000/studio to create your own documents.
If you expereinced any issues or enquiries, please raise an issue to discuss it.
Need more guidiance, check out this tutorial that provides a step-by-step guide to setting up Sanity studio for your portfolio site.
npm run build
File(s) | Description |
---|---|
sanity.config.ts |
Config file for Sanity Studio |
sanity.client.ts |
Config file for Sanity CLI |
studio |
Where Sanity Studio is mounted |
schemas |
Where Sanity Studio gets its content types from |
sanity.query.ts |
Groq query for Sanity Schema data |