Brevifolia is a minimalist blog starter that pairs the Gridsome static site generator with the Forestry CMS, letting you manage markdown posts in a Git-backed workflow.
What is Brevifolia?
Brevifolia is a Gridsome-based blog starter designed to work with Forestry as a headless CMS. It takes Vue components and markdown files as input and statically generates a blog site, while Forestry edits those markdown or data files and commits the updates directly to the repository. It is available from the kendallstrautman/brevifolia-gridsome-forestry GitHub repository.
Key Features
- Gridsome framework — Built on Gridsome, a Vue-powered static site generator, with a GraphQL data layer that exposes site config and content.
- Forestry CMS integration — Preconfigured to work with Forestry; you can edit markdown or data files, upload media to the correct directory, and Forestry commits changes to your repo.
- Markdown content management — All blog posts live as markdown files in
src/assets/content, making them version-controllable and editable in any text editor. - SCSS styling — Styles are coded with SCSS using Gridsome's style structure, and the template uses the Work Sans font from Google Fonts.
- GraphQL data fetching — The
@gridsome/source-filesystemplugin transforms local project files into content fetched via GraphQL in Vue components, while@gridsome/transformer-remarktransforms markdown files. - Instant Previews — Forestry's instant preview method spins up the Gridsome development server on port 8080 for a long-lived preview that responds to content updates.
- One-click Netlify deployment — A Deploy to Netlify button starts the deployment; Forestry commits automatically trigger Netlify rebuilds.
Who is it for?
- Bloggers who want a Git-based CMS — Manage posts in markdown and edit them through Forestry's sidebar, with every change saved as a Git commit.
- Vue and Gridsome developers — Use it as a starter to build a custom blog, extending the Vue components, pages, and GraphQL queries.
- Content editors and teams — Use Forestry's remote admin at yourdomain.com/admin to log in and make content updates without handling code or Git commands.
What can you do with Brevifolia?
- Launch a blog quickly — Clone the repository, run
yarn installandyarn dev, and view the blog at localhost:8080. - Manage content visually — Import the project into Forestry using the quick-start button, then add posts, data files, and media from the sidebar.
- Deploy to production automatically — Connect the repo to Netlify; every commit Forestry makes triggers a rebuild and deploy.
How does Brevifolia work?
The template uses Gridsome to generate a static site from Vue components and markdown files. Forestry manages that content by editing markdown or data files and committing updates to the repository. For local development, you clone the repo, install dependencies with Yarn or npm, and run the dev server. For a longer-lived preview, Forestry can spin up the Gridsome dev server on port 8080.
FAQ
How do I get started with Brevifolia?
Clone the repository, install dependencies with yarn install or npm install, then run yarn dev or npm run dev to start the development server at localhost:8080.
Does Brevifolia work with Forestry?
Yes, Brevifolia is preconfigured for Forestry. You can import it directly via the quick-start link, and Forestry will set up the sidebar structure and editing capacity for the blog.
What port does the development server use?
Brevifolia's Gridsome development server runs on port 8080 during local development and when using Forestry instant previews. The preview command in package.json launches a server compatible with Forestry's instant previews.
How do I deploy Brevifolia?
Use the Deploy to Netlify button or connect your repository to Netlify manually. When Forestry commits changes to the repo, Netlify automatically triggers a rebuild and deploy.
What styling does Brevifolia use?
Brevifolia uses SCSS for styling, following Gridsome's style structure. The site font is Work Sans from Google Fonts. Global and reset styles live in src/assets/styles, and page-specific styles are in Vue files between style tags.
