by svey
This repo is a template for the sites I build, it is designed to be highly flexible and customizable while providing a solid foundation to build on.
My sites are built to be managed by my clients. An important part of that is being able to easily update and maintain content. This template includes a block style padr editor I designed for Sanity to allow for easy control of page content and layout. In combination with Sanity's live preview functionality, and bespoke content dadhboards, it puts the clients in full control. Empowering the client to manage their own content without having to worry about ensuring proper standards and design consistency leads to improved workflows and more efficient content handling.
Similarly to old-school CMSs like Wordpress or Drupal, this template is built around a primary document type called articles. Articles have a set of core fields so that they can be easily displayed in any existing content block, but they also allow for easy extension. A project can have any number of unique articles; some example article types might include- news, projects, places, etc.
Archives are pages that have schemas automatically generated for them for each article. Archives are pages that are linked to an article. If an article doesn't have a custom archive the default archive page will be used. This change is recent, check the status of issue #25.
Each article will generate a matching taxonomy definition. Previously, each article had a unique taxonomy, that lead to a lot of developer overhead and limited the types of connections that could be made with taxonomies. Now a single taxonomy type is used across all documents and articles, allowing for more unique connections.
Even though this template makes heavy use of Tailwindcss for utility based classes it attempts to separate many of the styling options from the layout to allow for quick initial styling when starting a new project. Core files implement Tailwind layout classes. Read more.
Head to Sanity.io and create a new project from scratch; making sure to add the required api tokens and cors origin.
After cloning the repo the first step is to create a .env file with the following variables set:
.env
# required
SANITY_API_READ_TOKEN=''
SANITY_API_WRITE_TOKEN=''
NEXT_PUBLIC_SANITY_PROJECT_ID=''
# optional - defaults set in sanity/lib/api
NEXT_PUBLIC_SANITY_DATASET='production'
NEXT_PUBLIC_SANITY_API_VERSION='2024-10-14'
NEXT_PUBLIC_SANITY_CONFIG_STUDIO_NAME='studio'
NEXT_PUBLIC_SANITY_CONFIG_STUDIO_TITLE='studio'Then run a dev environment and navigate to the studio to add all the required fields.
Creating new articles, sections, and blocks all follow a similar process, steps for each are documented below.
Article schemas are kept in sanity/schemas/articles/. Once you have created your article be sure to add it to the imports and export of sanity/schemas/articles/index.ts. To enforce consistent naming and maintain strong typing when importing to the frontend the article types must be defined in sanity/schemas/articles/types.ts, and imported where needed.
On the frontend articles share a default singleton page but new singletons can be added for each article type. components/Pages/articles/ is the directory for creating new article pages; ensure that you add your page to components/Pages/ArticleRoute.tsx.
Block schemas are kept in sanity/schemas/pages/blocks/. Once you have created your block be sure to add it to the imports and export of sanity/schemas/pages/blocks/index.ts.
On the frontend blocks each have their own components located in components/Pages/blocks/. Ensure that you add your block to components/Pages/Blocks.tsx.
Since this template makes use of Nextjs server functionality the most straightforward deployment option is with Vercel. For more information on integrating Vercel deployments with your GitHub repo read here.
To enable deployment status previews in your GitHub repo ensure that the Vercel project is setup to integrate with your repo. Also ensure that you add all the necessary env variables to the Vercel project.
More info coming to this section
This template makes heavy use of Sanity's presentation, and live editing features. This approach makes editing a breeze with an intuitive, and likely familiar looking, block builder.
This is a living template intended to evolve and grow with each project and with changing web technologies.
For a full list of tools used check the package.json