Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/deiga/kind-oak

Jamstack site created with Stackbit
https://github.com/deiga/kind-oak

git headless jamstack nextjs ssg stackbit static

Last synced: 11 days ago
JSON representation

Jamstack site created with Stackbit

Awesome Lists containing this project

README 

        
# ✨ Stackbit Fresh Theme ✨



This is Stackbit's "Fresh" theme built with [Next.js](https://nextjs.org/) 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](https://themes.stackbit.com/demos/fresh/)






The theme can be used to create a static website that is hosted by a serverless

deployment platform such as [Netlify](https://www.netlify.com). The contents of

the website are stored in git with the rest of the site's code.



When deploying the website, [Sourcebit](https://github.com/stackbithq/sourcebit)

reads the site's contents from files and provides it to Next.js. Once Next.js

finishes generating the static website, [Netlify](https://www.netlify.com) pushes

the static files to its CDN.



[Sourcebit](https://github.com/stackbithq/sourcebit) and its plugins, specifically

[`sourcebit-source-filesystem`](https://github.com/stackbithq/sourcebit-source-filesystem)

and [`sourcebit-target-next`](https://github.com/stackbithq/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](https://app.stackbit.com/create?theme=https://github.com/stackbit-themes/fresh-nextjs&utm_source=theme-readme&utm_medium=referral&utm_campaign=stackbit_themes) 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](https://www.netlify.com) 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](https://stackbit.com?utm_source=project-readme&utm_medium=referral&utm_campaign=user_themes).



[![](https://i3.ytimg.com/vi/zd9lGRLVDm4/hqdefault.jpg)](https://stackbit.link/project-readme-lead-video)



Here's a few resources to get you started:



- 📺   [Editing Content](https://stackbit.link/project-readme-editing-video)

- 📺   [Adding, Reordering and Deleting Items](https://stackbit.link/project-readme-adding-video)

- 📺   [Collaboration](https://stackbit.link/project-readme-collaboration-video)

- 📺   [Publishing](https://stackbit.link/project-readme-publishing-video)

- 📚   [Stackbit Documentation](https://stackbit.link/project-readme-documentation)



If you need a hand, make sure to check the [Stackbit support page](https://stackbit.link/project-readme-support).



## Develop Locally



1. [Create a site](https://app.stackbit.com/create?theme=https://github.com/stackbit-themes/fresh-nextjs&utm_source=theme-readme&utm_medium=referral&utm_campaign=stackbit_themes) from this theme using Stackbit.



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



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



1. Install dependencies



       run npm install



1. Start the Next.js local development server:



        npm run develop



1. Open [http://localhost:3000/](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 worls, 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](https://www.netlify.com).

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