Forestry.io

Posted By Will Moody On , Reading Time - 3 minutes

CMS

Editing a Gridsome based website with Forestry

Editing a Grisome based website with Forestry

The first step is to develop your website locally using (in my case)

yarn develop

Once you are happy with the website it's time to build it using (again in my case)

yarn run build

To incororate Forestry.io there are several steps,

Firstly, create an admin folder in your static folder and in it add an index.html file with the following code:-

<!-- forestryio: ignore; forestryio: admin -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="robots" content="noindex" />
    <title>Admin</title>
    <meta name="description" content=" " />
    <meta name="author" content=" " />
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="320" />
    <!-- Use maximum-scale and user-scalable at your own risk. It disables pinch/zoom. Think about usability/accessibility before including.-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

</head>
<body>
<div id="app">

</div>
<script id="admin-config-script" type="text/javascript">
  var env = {
      siteId: "wxwtfhc-9j-jfq",
      local: false
  };

  function uuidv4() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    });
  }

  var uuid = uuidv4()
  var script = document.createElement('script');
  script.src = "https://app.forestry.io/admin/forestry.min.js?hash=" + uuid
  script.id = "forestry-admin";
  document.body.appendChild(script);

  var link = document.createElement("link");
  link.type = "text/css";
  link.rel = "stylesheet";
  link.href = "https://app.forestry.io/admin/main.css?hash=" + uuid
  document.head.appendChild(link);
</script>

</body>
</html>

Secondly, in the base of your project you will neeed an uploads folder, so create this now.

Thirdly, again in the base of your project create a .forestry folder. Here is were you will create your templates and add a settings.yml file.

Create a front_matter folder within .forestry and create a settings.yml file there. Mine looks like this:-

---
new_page_extension: md
auto_deploy: false
admin_path: "/static/admin"
webhook_url:
sections:

- type: directory
  path: content/blog
  label: Blog Posts
  create: documents
  match: "**/*.md"
  templates:
  - blog

- type: directory
  path: content/sitepages
  label: About Page
  match: "**/*.md"
  templates:
  - aboutpage

- type: directory
  path: content/sitepages
  label: Policy Page
  match: "**/*.md"
  templates:
  - policypage

- type: directory
  path: content/sitepages
  label: Terms Page
  match: "**/*.md"
  templates:
  - termspage


- type: document
  path: data/theme.json
  label: Theme config

upload_dir: uploads
public_path: "/uploads"
front_matter_path: ''
use_front_matter_path: false
file_template: ":filename:"
build:
  preview_output_directory: dist
  install_dependencies_command: npm install
  preview_docker_image: forestryio/node:12
  mount_path: "/srv"
  working_dir: "/srv"
  instant_preview_command: npm run develop

In my case I will be editing blog posts and the content of three pages.

This is my directory tree:-

Dev/
┣ .cache/
┃ ┗ assets/
┣ .forestry/
┃ ┣ front_matter/
┃ ┃ ┣ author.yml
┃ ┃ ┣ blog.yml
┃ ┃ ┣ pages.yml
┃ ┃ ┗ theme-configuration.yml
┃ ┗ settings.yml
┣ content/
┃ ┣ author/
┃ ┣ blog/
┃ ┗ sitepages/
┣ data/
┃ ┗ theme.json
┣ dist/
┃ ┣ 404/
┃ ┣ about/
┃ ┣ admin/
┃ ┣ assets/
┃ ┣ authors/
┃ ┣ blog/
┃ ┣ brand/
┃ ┣ build/
┃ ┣ category/
┃ ┣ contact/
┃ ┣ design/
┃ ┣ develop/
┃ ┣ policies/
┃ ┣ success/
┃ ┣ tag/
┃ ┣ uploads/
┃ ┣ .htaccess
┃ ┣ 404.html
┃ ┣ favicon.ico
┃ ┣ feed.json
┃ ┣ feed.xml
┃ ┣ humans.txt
┃ ┣ index.html
┃ ┣ manifest.json
┃ ┣ robots.txt
┃ ┣ service-worker.js
┃ ┗ sitemap.xml
┣ node_modules/
┣ src/
┃ ┣ .temp/
┃ ┣ assets/
┃ ┣ components/
┃ ┣ data/
┃ ┣ layouts/
┃ ┣ pages/
┃ ┣ templates/
┃ ┣ index.html
┃ ┗ main.js
┣ static/
┃ ┣ admin/
┃ ┣ assets/
┃ ┣ authors/
┃ ┣ uploads/
┃ ┣ .htaccess
┃ ┣ favicon.ico
┃ ┣ humans.txt
┃ ┣ manifest.json
┃ ┗ service-worker.js
┣ uploads/
┣ .eslintrc.js
┣ .gitattributes
┣ .gitignore
┣ .npmrc
┣ .prettierrc.js
┣ gridsome.config.js
┣ gridsome.server.js
┣ output.doc
┣ package.json
┗ README.md