Brevifolia

About

Brevifolia is minimalist blog starter to get you going using Forestry with Next.js. Check out the demo here.

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 by yours truly, using styled-jsx (which is inherently supported by Next.js). The font used is Work Sans.

Quick Setup

Import Directly to Forestry

Set-up Locally

In your terminal, navigate to where you would like this blog to live, then run

#clone the repo
git clone git@github.com:kendallstrautman/brevifolia-next-forestry.git

#navigate to the directory
cd brevifolia-next-forestry

#install dependencies & run dev server with yarn 
yarn install
yarn develop

#or with npm 
npm install
npm run develop

This will start a dev server, navigate to localhost:3000 to check it out.

Project Structure

Site-level configuration is stored in data/config.json.
Edit styles within each component or page file within the <style jsx> 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 all of the content via the sidebar.

You can add new blog posts, data files, or entire pages and sections to fit your needs. You can also customize how media is handled, by configurating gitLFS, Cloudinary, S3, or Netlify Large Media.

You can set up a remote admin for content editors to log in directly to yoururl.com/admin to make content updates.

Instant Previews

The instant preview 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.

Deploy Options

Netlify is a great way to easily deploy sites. There's no special setup you need to do with Forestry to deploy with Netlify. When Forestry makes commits to your repo, Netlify will auto-trigger a rebuild / deploy when new commits are made.