Blog Post Tutorial

A blog post is a post that will appear in the blog section of Spotted. These posts are meant to be enthusiastic, humorous, or otherwise informal showcases of greenery "spotted" in the wild. Blog posts may be about gardens, houseplants, or even other articles featuring great green spaces (however, make sure you always link back to the original article).

📝 Writing your own

To write your own post, begin by opening a text editor and creating a new markdown (.md) file. This file should be named with the date first (using the international standard), followed by the title of the post (a unique name). Use dashes to separate words, for example: 2018-06-18-cool-dutch-garden.md. The titles of these files must be unique, so avoid vague titles like "Nice-Plants" or titles of a single plant like "Lavender" (as it may conflict with a post made in the catalog section).

Next, copy the following template into the file.

---
layout: blog
title: <ENTER TITLE HERE>
author: <YOUR NAME HERE>
image: /images/<IMAGE NAME HERE>
---

<BLOG POST HERE>

It is extremely important that you do not change anything that is not wrapped in < > brackets. This includes the dashes and layout type. If you are using a text editor primarily meant for "normal" writing, it may try to change the dashes into the longer "em dash" (changing - to —). This may seem like a small difference, but it will stop the page from loading, and should be carefully avoided (either by disabling the feature, copying the correct character, or using a different editor).

📊 Data and descriptions

Make sure to replace all the data tags with the correct information about the post. For example, replace title: <ENTER TITLE HERE> with title: Beautiful Japanese Zen Garden. Make sure to use capital letters where appropriate (such as in the title and author's name).

Replace the <BLOG POST HERE> text with the contents of your blog post. To include links, headers, lists, or styled text, use the standard markdown syntax.

Result	Syntax
link text	[link text](https://)
Header	## Header
• unordered list	- unordered list element
1. ordered list	1. ordered list element
italic text	*italic text*
bold text	**bold text**
	

🖼 Main image

At the top of the page, a large hero image is displayed. This is also the image used on the blog page next to give a preview of the post. Copy the name of this image to <IMAGE NAME HERE>. The name must match exactly. For example, the file daves-garden.png would be added like so: image: /images/daves-garden.png (note: the /images/ filepath is not wrapped in < > brackets, and therefore it must stay).

💻 Uploading to Github

Place the finished .md file into the blog/_posts folder, and the corresponding image into the images folder. This can be done via the Github Desktop client, or by uploading the files directly on the Github page. Remember to commit, and push these changes. It may take about a minute for the website to update with your post.