Coder Social home page Coder Social logo

oval-ant's Introduction

✨ Starter Nextjs Theme ✨

This is Stackbit's "Starter" theme built with Next.js and powered by content stored in files.

Click the button below to create a new website from this theme using Stackbit:

Create with Stackbit

Live Site Demo

The theme can be used to create a static website that is hosted by a serverless deployment platform such as Netlify. The contents of the website are stored in git with the rest of the site's code.

When deploying the website, Sourcebit reads the site's contents from files and provides it to Next.js. Once Next.js finishes generating the static website, Netlify pushes the static files to its CDN.

Sourcebit and its plugins, specifically sourcebit-source-filesystem and sourcebit-target-next, are used to read the site's contents from files, normalize it, and provide it to Next.js pages. It also sets up live updates in development mode allowing you to update the content files and instantly see your updates in the browser.

Quick Start 🏎

Create a site from this theme using Stackbit.

Stackbit will execute following steps for you

  • Create a new GitHub repository with the contents of this repository.
  • Create Netlify site connected to the GitHub repo
  • Deploy the Netlify site.
  • Create a "commit" webhook in GitHub that will trigger Netlify deployment as soon as new commit is pushed to GitHub.
  • Create a Stackbit project that will allow you edit your website via on-page visual editing experience.

Editing Content 📝

Once Stackbit creates a site, you can start editing the content using the free on-page editing experience provided by the Stackbit Studio.

Here's a few resources to get you started:

If you need a hand, make sure to check the Stackbit support page.

Develop Locally

  1. Create a site from this theme using Stackbit.

  2. Once finished, you will be redirected to Stackbit Studio where you will be able to edit the content using the free on-page editing experience, and publish new versions of your site.

  3. To further develop your site, clone the generated repository.

  4. Install dependencies

    npm install
    
  5. Start the Next.js local development server:

     npm run develop
    
  6. Open http://localhost:3000/ in the browser to see your site. You can now edit the site contents, and the browser will live-update your changes. 🎉

Building for production 🏗

To build a static site for production, or test locally how it works, run the following command:

npm run build

The exported site will be written to out folder. The contents of this folder can be deployed by serverless deployment platform such as Netlify. You can start a local server serving the static files from the out folder, for example by installing and running http-server:

npm install http-server -g
http-server out

oval-ant's People

Contributors

stackbit-projects avatar

Watchers

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