Code Monkey home page Code Monkey logo

usmanhaider15 / vice-news-clone Goto Github PK

View Code? Open in Web Editor NEW
3.0 1.0 0.0 3.83 MB

This project offers a statically generated newspaper website that leverages Next.js 13 for the frontend and Sanity.io for content management. The included Sanity Studio provides a native authoring experience with features like real-time collaboration, instant content previews, and easy editing.

Home Page: https://newspaper-pro.vercel.app

TypeScript 98.31% JavaScript 1.48% CSS 0.21%

vice-news-clone's Introduction

Next.js Newspaper Website with Native Authoring Experience

This project offers a statically generated newspaper website that leverages Next.js for the frontend and Sanity.io for content management. The included Sanity Studio provides a native authoring experience with features like real-time collaboration, instant content previews, and easy editing.

Your newspaper site can connect to Sanity Content Lake, giving you hosted content APIs with a flexible query language, on-demand image transformations, powerful patching, and more. This project is perfect for starting a professional newspaper or media website.

Features

  • A high-performance static newspaper website with editable articles and sections
  • A native and customizable authoring environment, accessible at yournewspaperwebsite.com/studio
  • Real-time and collaborative article editing with detailed revision history
  • Instant content preview across your entire site
  • Support for block content and advanced custom fields for media and content embedding
  • Incremental Static Revalidation, allowing instant publishing of new content without a rebuild
  • Free Sanity project with unlimited admin users, free content updates, and pay-as-you-go for API overages
  • TypeScript and Tailwind.css integration for a developer-friendly experience

Table of Contents

Project Overview

Newspaper Website Studio
Newspaper Website Sanity Studio

Configuration

Step 1. Set up the environment

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

[Deploy with Vercel

Step 2. Set up the project locally

Clone the repository that was created for you on your GitHub account. Once cloned, run the following command from the project's root directory:

npx vercel link

Download the environment variables needed to connect Next.js and the Studio to your Sanity project:

npx vercel env pull

Step 3. Run Next.js locally in development mode

npm install && npm run dev

When you run this development server, the changes you make in your frontend and studio configuration will be applied live using hot reloading.

Your personal website should be up and running on http://localhost:3000! You can create and edit content on http://localhost:3000/studio.

Step 4. Deploy to production

To deploy your changes to production you use git:

git add .
git commit
git push

Alternatively, you can deploy without a git hosting provider using the Vercel CLI:

npx vercel --prod

vice-news-clone's People

Contributors

usmanhaider15 avatar

Stargazers

 avatar  avatar  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.