Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/pnvdev/nextjs-stablo-blog-custom

This project is a customized version of a blog built with Next.js, based on the minimalist Stablo theme, with integration to Sanity.io for managing content.
https://github.com/pnvdev/nextjs-stablo-blog-custom

Last synced: 27 days ago
JSON representation

This project is a customized version of a blog built with Next.js, based on the minimalist Stablo theme, with integration to Sanity.io for managing content.

Awesome Lists containing this project

README 

        
# Next.js Stablo Blog Custom



This project is a customized version of a blog built with Next.js, based on the minimalist [Stablo](https://github.com/anish-agi/stablo) theme, with integration to [Sanity.io](https://www.sanity.io/) for managing content.



## Features



- **Fast Performance:** Leveraging Next.js capabilities for a fast and efficient performance.

- **Sanity.io Integration:** Manage your content using Sanity's flexible and structured Portable Text format, allowing for rich content editing and easy management.

- **Minimalist Design:** A clean and modern design that keeps the focus on the content.



### New Features



In addition to the original features, I’ve added the following enhancements to improve the functionality and user experience of the blog:



- **Category Pages:** Dedicated pages for each category, allowing users to explore content grouped by different topics. These pages display a list of articles belonging to the selected category, enhancing content organization.

  

- **Author Pages:** Specific pages for each author where users can view all articles written by a particular author. This feature is especially useful in multi-author blogs, making it easier to navigate content by author.

  

- **Search Page:** A search functionality that enables users to find articles within the blog using keywords. The search is quick and efficient, helping users directly find the content they are looking for.



#### Template Preview



[![Next.js Front-end Preview](https://user-images.githubusercontent.com/1884712/169838344-e32b7426-621a-45a4-aba8-afedf3377e1f.jpeg)](https://web3templates.com/preview/stablo)



#### Sanity CMS Preview



![Backend Sanity CMS Preview](https://user-images.githubusercontent.com/1884712/170030678-c6e32d47-0b92-42b7-ac2d-f3cf800c0969.png)



# Installation



## Step 1: Deploy to Vercel



Use the Deploy Button below. It will let you deploy the starter using Vercel as well as connect it to your Sanity Studio using the Sanity Vercel Integration.



[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/web3templates/clone?demo-title=Stablo%20%E2%80%93%20Minimal%20Blog%20Template&demo-description=A%20minimal%20blog%20website%20template%20built%20with%20Next.js%2C%20TailwindCSS%20%26%20Sanity%20CMS%0A&demo-url=https%3A%2F%2Fstablo-template.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F6p72KDrdJ8SjyvOBrgRbnr%2F0760db43f2cb08504a2f67601e74d986%2FCleanShot_2022-07-15_at_16.54.17.png&project-name=Stablo%20%E2%80%93%20Minimal%20Blog%20Template&repository-name=stablo-blog&repository-url=https%3A%2F%2Fgithub.com%2Fweb3templates%2Fstablo&from=templates&integration-ids=oac_hb2LITYajhRQ0i4QznmKH7gx)



**The above deploy will automatically configure the following:**



- Create new Repository in Github

- Create a Sanity Project

- Install Sanity Integration in Vercel

- Add required CORS & API settings in the project

- Deploy Frontend to Vercel



Alternatively, you can deploy to other services such as Netlify or Cloudflare Pages or AWS Amplify.



[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/web3templates/stablo/)



## Step 2: Set up the project locally.



Once you have deployed the website, it will look like empty or not configured properly. This is expected. We need to do few more steps to make it as seen on the demo.



First, clone the github repository vercel created into your local machine. Use the following command structure. Make sure the terminal is on the right folder before executing this command.



```bash

git clone https://github.com/pnvdev/nextjs-stablo-blog-custom.git

```



Once cloned, run the following command from the project's root directory. This will link your vercel project.



```bash

npx vercel link

```



Now, run the following command to pull the `.env` variables to your local system.



```bash

npx vercel env pull

```



Now you can see that a new `.env.local` file has been created. If this doesn't work, you can also rename the `.env.local.example` to `.env.local` and add the Sanity Project ID manually.



Now, you can open your code editor (if not already) we prefer VSCode. The run the command in the integrated terminal inside the code editor.



```bash

npm install

# or

yarn install

# or

pnpm install

```



We prefer `pnpm` to save your disk space.



## Step 3: Import Demo Data (Optional)



To look like what you have seen in the demo, with all the content and images, follow the below steps:



1. if you have not installed `@sanity/cli` install it globally first.



```bash

npm install -g @sanity/cli

# or

pnpm install -g @sanity/cli

```



Then login to sanity using `sanity login` command



```

sanity login

```



Now, you will be able to import demo content by running the `sanity-import` command. The files are located at `/lib/sanity/data/production.tar.gz` and will load automatically by running the below command.



```bash

npm run sanity-import

# or

pnpm sanity-import

```



## Step 4: Finish it up!



Now, run your project using the below command.



```bash

npm run dev

# or

pnpm dev

```



Now your project should be up and the Next.js frontend will be running on http://localhost:3000.



Sanity Studio can be accessed using http://localhost:3000/studio or you can run it on a separate https://localhost:3333 server using the following command.



```bash

npm run sanity

# or

pnpm sanity

```



## Step 5. Redploy



Once all of the above changes is made, make sure to redeploy to vercel once again to see all of your changes in production.



You can `git push` the changes and it should automatically trigger a new deployment. If not, you can also deploy to vercel using the following command.



```

npx vercel --prod

```



# Manual Installation



We recommend you to use the one-click deploy option above. For some reason, if you cannot, use the following steps to install it manually.



## Step 1. Clone the Repo



Clone the github repo or use the downloaded files in your local machine.



## Step 2. Setup `.env` Variables.



Open the project folder and rename `.env.local.example` placed in the root folder into `.env.local` and add your sanity project ID. You can create a new project by visiting this link: https://www.sanity.io/get-started/create-project



If you already have a project, copy the project ID from https://sanity.io/manage



```

NEXT_PUBLIC_SANITY_PROJECT_ID=xxyyzz

```



## Step 3. Allow CORS Origins



To make the studio work properly, you must add CORS origin in Sanity. This is usually setup automatically if you are using the Vercel Deploy. Visit `https://www.sanity.io/manage/personal/project//api` in your browser to add CORS origin.



Click `Add CORS origin` button and enter the URL as `http://localhost:3000` and check the Allow credentials checkbox.



## Step 4 Continue from above steps



Now, you will be able continue from the above instructions to import the demo data and running the project locally.



## Help and Support



Something's not working as expected? Raise a github issue. If you need personalized support or help, please consider purchasing the Pro version and we will assist you over email.