Giter Club home page Giter Club logo

strapi-starter-next-blog's Introduction

Strapi Starter Next Blog

Next starter for creating a blog with Strapi.

This starter allows you to try Strapi with Next.js with the example of a simple blog. It is fully customizable and due to the fact that it is open source, fully open to contributions. Do not hesitate to add new features etc ...

You may want to know how to develop such a starter by your own! This starter is actually the result of this tutorial

screenshot image

Deploy the backend

To deploy this Strapi instance you'll need:

Once you have created these accounts you can deploy your instance by clicking on this button

Deploy

Deploy the frontend

Vercel

  • Log in to Vercel by installing now CLI:

npm i -g now

  • Secure your API_URL with now by running the following command:

now secret add api-url <https://your-strapi-instance.herokuapp.com>

You can deploy your app and for this you have two options. But for each one of them, just press enter when the root directory of your code is asked.

  • Execute now

  • Or you can simply click on the following button

Deploy with ZEIT Now

Netlify

To deploy this Strapi instance you'll need:

Once you have created your account you can deploy your instance by clicking on this button.

Deploy

  • Select a repository name and fill API_URL with the url of your Strapi instance on Heroku (eg: https://your-app.herokuapp.com) without the trailing slash

Features

  • 2 Content types: Article, Category
  • 2 Created articles
  • 3 Created categories
  • Permissions set to true for article and category
  • Responsive design using UIkit

Pages

  • "/" display every articles
  • "/article/:id" display one article
  • "/category/:id" display articles depending on the category

Getting started

Clone the repository and install dependencies

git clone https://github.com/strapi/strapi-starter-next-blog.git
cd strapi-starter-next-blog

# Using yarn
yarn setup:yarn

# Using npm
npm run setup:npm

Scaffold your project

This command will launch both of your backend and frontend servers and do a data migration in your backend server

# Using yarn
yarn build:yarn
yarn develop:yarn

# Using npm
npm run build:npm
npm run develop:npm

Alternatively, you can still start your servers separately:

Start the backend server

cd backend

# Using yarn
yarn build
yarn develop

# Using npm
npm run build
npm run develop

Start the frontend server

cd frontend

# Using yarn
yarn develop

# Using npm
npm run develop

Next server is running here => http://localhost:3000 Strapi server is running here => http://localhost:1337

Enjoy this starter

strapi-starter-next-blog's People

Contributors

mcastres avatar

Watchers

James Cloos 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.