Code Monkey home page Code Monkey logo

brevifolia-gridsome-forestry's Introduction

Brevifolia

About

Netlify Status

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

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.

The styles were coded & designed by yours truly, using scss with the Gridsome style structure. The font used is Work Sans.

Quick Setup

Import Directly to Forestry

Import this project into Forestry

Set-up Locally

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

#clone the repo
git clone [email protected]: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

Plugins

With Gridsome offering a plugin-rich ecosystem, there are a few key plugins that make this project possible.

Project Structure

  • Site-level configuration is stored in src/assets/config.json. This file is loaded in the gridsome.config.js to configure Gridsome and allow it to be accessible via metaData in your graphql queries.
  • Add and access plugin options or metaData via gridsome.config.js.
  • 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 .vue file between the <style> tags
  • 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/pages is 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 gridsome.config.js within the @gridsome/source-filesystem plugin object.
  • The pages & template are comprised of components from src/components.

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

Deploy Options

Deploy to Netlify

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.

brevifolia-gridsome-forestry's People

Contributors

kendallstrautman avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.