Git Product home page Git Product logo

portfolio_react's Introduction

victoreke.com

My personal portfolio website

Tech Stack

Project Overview

Site Studio
Site Sanity Studio

Run Project Locally

Follow this guide to get this site runnning locally:

Clone Repository

git clone https://github.com/Evavic44/victoreke.com.git

cd victoreke.com

npm install

Get Env variables

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:

Create a new sanity project

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 the projectId. Now you can close the studio file.

Update Env Variables

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 to production 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 sanity.api.ts file or else it will throw errors.

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.

Additional Information

Need more guidiance, check out this tutorial that provides a step-by-step guide to setting up Sanity studio for your portfolio site.

Build

npm run build

Important files and folders

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

portfolio_react's People

Contributors

tcat221 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.