Get your development portfolio off the ground with this deployment-ready Gatsby + Sanity CMS Starter. This project ships with everything you need built into Gatsby and Sanity, just plug in your Sanity API credentials, commit, and deploy your Gatsby and Sanity site!
This starter also utilizes TailwindCSS, SCSS, and Typescript.
These instructions assume you already have a development environment set up with Gatsby and Sanity installed. If not, please follow their set up instructions here: Gatsby and Sanity.
-
Clone the repository and install dependencies
Using the command line:
# clone the repository git clone https://github.com/jneterer/gatsby-sanity-developer-portfolio.git # install dependencies cd gatsby-sanity-developer-portfolio npm install cd sanity-developer-portfolio npm install
-
Configure Sanity
Now you are going to set up your Sanity CMS and start its local instance.
# ensure you're in the sanity-developer-portfolio directory sanity init # it might ask you if you want to override the existing configuration, type 'y' for yes # name your project # use the default dataset configuration: 'y' for yes # deploy your graphql schema sanity graphql deploy # you can optionally enable the graphql playground but this is not required # start your local Sanity CMS instance sanity start # go to http://localhost:3333 and login
If you want to go ahead and deploy your Sanity instance, you can do the following:
# ensure you're in the sanity-developer-portfolio directory sanity deploy # provide your studio host name, can be the same as your project name # once Sanity has completed deploying your studio, it will give you your production sanity url
-
Create content for your porfolio
Here, you will create some basic content for your portfolio.
- Go into the About section
- Click the + sign to create a new About and fill out the fields
- Title - something like: "I'm a developer!"
- Description - provide a short bio about yourself, what you like to do, frameworks you use, etc.
- Main Image - this can be a self portrait or any other image you want to display in your About section
- Publish your new About
- Go to the Tag section
- Click the + sign to create a new Tag and fill out the fields
- Title - the title of the tag, something like: "Gatsby" or "Sanity"
- Description - this is a non-user facing field. Provide any description for the tag that you find helpful
- Selected - you can toggle this property to set whether a tag is by default selected as a filter on the home page. This should, at a minimum, be used in conjunction with the Is View All property.
- Is View All - defines whether a tag is the view all tag. Only one tag should have this property set to true.
- Publish your new Tag
- Go to the Project section
- Click the + sign to create a new Project and fill out the fields
- Title - the title of the project
- Slug - choose generate once having provided the title. This will create a url based on the title to /project/{slug}
- Description - a short description of the project. This will display on the project's card in the Projects section of the home page
- Body - a long description of the project. This will display on the project's page
- Github Url - the url to your project's github repo
- Site Url - the url to your project's site
- Main Image - a screenshot of your project. I recommend using the same size image for each project
- Tags - any tags associated with the project
- Publish your new Project
-
Configure Gatsby
In this section, you are going to connect your Gatsby project with your Sanity CMS.
-
Rename your
.env-examplefile to.env -
Replace
{your-sanity-project-id}with your project id and{your-dataset-name}with your dataset name. These can both be found in thesanity-developer-portfolio/sanity.jsonfile under theapiproperty. -
Optional - set up Sanity draft previews in your Gatsby site
- Login to Sanity: Login
- Choose your Sanity project
- Go to settings > API
- Scroll to Tokens and Add New Token
- Give your token a label like: "Unpublished Changes Viewer" with Read permissions and Add New Token
- Copy the token and replace the
{your-sanity-read-token}with your new read token in your.envfile
-
Start Gatsby!
gatsby develop
Your site is now running at
http://localhost:8000!Note: You'll also see a second link:
http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial. -
.
└── sanity-developer-portfolio
├── schemas
└── sanity.json
└── src
├── components
├── contracts
├── hooks
├── pages
└── templates
├── gatsby-config.js
└── gatsby-node.js
-
/sanity-developer-portfolio: This directory contains your sanity CMS code./schemas: This directory contains all schemas for your project, including the About, Project, and Tag schemas..sanity.json: This file contains your sanity configuration, including your API credentials.
-
/src: This directory contains all of the modules of code that your project depends on./componentsThis directory contains any components that might be reused in either a page, template, or other component./contractsThese are typescript interface contracts that define types for graphql queries to sanity, component props, etc./hooksThis directory contains any reusableuseStaticQueryhooks to sanity./pagesThis directory contains any pages that are not created programmatically in our./gatsby-node.jsfile./templatesThis directory contains any templates for pages created in our./gatsby-node.jsfile.
-
.gatsby-config.js: This is the main configuration file for a Gatsby site. In this file we define the title and description of the project and any plugins we use including Typescript (gatsby-plugin-typescript), Sanity (gatsby-source-sanity), TailwindCSS and SASS (gatsby-plugin-sass). (Check out the config docs for more detail). -
.gatsby-node.js: This is where we build all of our project files dynamically on at build time. (Check out the docs for this file here Gatsby Node APIs).
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent