Forestry.io
Tags that this post has been filed under.
Editing a Gridsome 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 incorporate 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 need 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/
┃ ┣ categories/
┃ ┣ 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