Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dirtyf/brevifolia-next-frank
A simple blog starter using Next.js and Forestry as a Git-backed CMS.
https://github.com/dirtyf/brevifolia-next-frank
forestry-starter netlify nextjs
Last synced: about 2 months ago
JSON representation
A simple blog starter using Next.js and Forestry as a Git-backed CMS.
- Host: GitHub
- URL: https://github.com/dirtyf/brevifolia-next-frank
- Owner: DirtyF
- Created: 2021-01-29T09:01:45.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-29T10:30:49.000Z (about 4 years ago)
- Last Synced: 2024-10-29T13:15:54.315Z (3 months ago)
- Topics: forestry-starter, netlify, nextjs
- Language: JavaScript
- Homepage: https://brevifolia.netlify.app
- Size: 66.2 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Brevifolia
## About
[](https://app.netlify.com/sites/brevifolia-next-frank/deploys)
Brevifolia is minimalist blog starter to get you going using [Forestry](https://forestry.io/) with [Next.js](https://nextjs.org/).
:eyes: [Preview](https://brevifolia-next-forestry.netlify.app)
This blog is statically generated by Next.js, a rendered combination of React components and Markdown / JSON files. It is preconfigured to work with Forestry🌲 as a way to manage your content. Forestry is a Git-backed CMS, meaning it makes content changes by editing Markdown or YAML/JSON/TOML files, uploading media to the correct directory and committing these updates to your repo directly.
The styles were coded & designed using [styled-jsx](https://github.com/zeit/styled-jsx) (which is inherently supported by [Next.js](https://nextjs.org/docs#built-in-css-support)). The font used is [Work Sans](https://fonts.google.com/specimen/Work+Sans).
## Quick Setup
#### Import to Forestry
The easiest way to get started is to import the site in Forestry, this will clone the repository and provide a user interface to edit and preview your site.
#### Run locally
To run the site locally, clone the repository, navigate to your project's folder and run `yarn`.
```bash
# install dependencies
yarn
# run site locally
yarn develop
```
Navigate to http://localhost:3000 to see your site.
## Project Structure
- Site-level configuration is stored in `data/config.json`.
- Edit styles within each component or page file within the `` tags.
- Global styles live in the `Meta` component.
- `src/posts/`contains all your markdown blog posts.
- `src/static/` is where you images live and will get uploaded.
- `src/pages` is where you page components live.
- The blog pages are dynamically generated with a `slug` parameter. See the template in `src/pages/blog/[slug].js`.
- The pages & template are comprised of components from `src/components`.
- The routes are generated in `next.config.js` with `exportPathMap`
## Using Forestry as your CMS
The `.forestry` directory contains all the settings information and frontmatter configuration to allow Forestry to setup the sidebar structure and editing capacity for this blog. After importing this blog into forestry, you can [access and edit](https://forestry.io/docs/editing/) all of the content via the sidebar.
You can add new blog posts, [data files](https://forestry.io/docs/editing/data-files/), or entire pages and sections to fit your needs. You can also [customize how media](https://forestry.io/docs/media/) is handled, by configurating gitLFS, Cloudinary, S3, or Netlify Large Media.
You can set up a [remote admin](https://forestry.io/docs/editing/remote-admin/) for content editors to log in directly to yoururl.com/admin to make content updates.
### Instant Previews
The [instant preview](https://forestry.io/docs/previews/instant-previews/) method spins up the a development server for a long-lived preview that can quickly respond to content updates. When using instant previews, your preview command should be the develop command. The development server spawned by this command should be available over port `8080`, and bind to `0.0.0.0`. The `forestry:preview` command in this project's `package.json` will launch a dev server compatible with Forestry's instant previews.
## Deployment
Import your repository on [Netlify](https://www.netlify.com/) to automatically build this site.
A [Netlify config file](./netlify.toml) is provided with default build settings.
```toml
[build]
publish = "src/out"
command = "yarn deploy"
```
You can also deploy this site to [Vercel](https://vercel.com) if you prefer.
When Forestry makes commits to your repo, Netlify will auto-trigger a rebuild / deploy when new commits are made.