This blog is statically generated by Gridsome, a rendered combination of Vue components and markdown files. It is preconfigured to work with Forestry as a way to manage your content. Forestry makes changes by editing markdown or data files, uploading media to the correct directory and committing these updates to your repo directly.
Import Directly to Forestry
In your terminal, navigate to where you would like this blog to live, then run
#clone the repo git clone firstname.lastname@example.org:kendallstrautman/brevifolia-gridsome-forestry.git #navigate to the directory cd brevifolia-gridsome-forestry #install dependencies & run dev server with yarn yarn install yarn dev #or with npm npm install npm run dev
A new browser window should open with the dev server running or you can navigate to localhost:8080
With Gridsome offering a plugin-rich ecosystem, there are a few key plugins that make this project possible.
- Gridsome Source Filesystem transforms local project files into content that can be fetched with GraphQL in the components.
- Grisome Transformer Remark transforms markdown files.
- Site-level configuration is stored in
src/assets/config.json. This file is loaded in the
gridsome.config.jsto configure Gridsome and allow it to be accessible via metaData in your graphql queries.
- Add and access plugin options or metaData via
- Access Gridsome's server api via
gridsome.server.js. Currently this is just boilerplate.
- Edit global & reset styles via
src/assets/styles/.... Edit styles specific to a page or component within the
.vuefile between the
src/assets/content/contains all your markdown blog posts, images & data files (e.g. authors list, info page data). These are all editable by Forestry.
src/pagesis a very important and required directory for Gridsome. This is where all your pages for the site live.
- Blog posts are built from a template that can be accessed at
src/templates. The routing and config for this template lives in
- The pages & template are comprised of components from
Using Forestry as your CMS
.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 set up a remote admin for content editors to log in directly to yoururl.com/admin to make content updates.
The instant preview method spins up the Gridsome 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.
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.