Content - PieceOfEarth/pieceofearth.github.io GitHub Wiki
Content
This document is designed to help you write and edit content on the website.
Creating a blog post
Blog posts are stored as markdown files inside the _posts
directory. The files must be named using the following format: YYYY-MM-DD-title.md
.
All blog posts must use the following template to be displayed correctly:
---
layout: post
title: "My first blog post!"
date: YYYY-MM-DD HH:MM:SS
authors:
- Luke
- Another author
tags: miscellanea oddities
---
This is my *first* blog post. It uses Markdown, which you can [Google](http://google.com) to learn about.
To create a blog post, copy that template and modify it to include your content. Take care to modify the date
, the author
and the title
from the header (the bit between the ---
lines)! You can also specify one or more tags
, using a space to separate them. Save your file using the naming scheme describe - for example 2001-12-25-holiday-wishes.md
.
Creating a main page
To create a main page, such as an about us page, a markdown file should be saved in the project's root directory, using the desired URL as the filename. For example, to create an about us page that will be served at /about.html
, name the file about.md
.
Alternatively, if you wish to create a page without a file extension (such as /about
), you can add a permalink
property to the header.
---
layout: default
permalink: 'about/'
title: 'About us'
---
What an amazing project!
When adding a main page, take care to use the default
layout.
Adding images
To add an image to your post you must add it to the assets
directory. Create a subdirectory for your post, named something that easily identifies it (such as the title of your post), and copy the image(s) into that.
For example, to add an image of a Christmas tree to my post, I might copy the file to assets/holiday-wishes/tree.jpg
.
Inside your post you should use the following snippet to insert the image. Paste the snippet at the position you want to add the image, replacing the URL with that of your newly copied image. The text inside the square brackets ([]
) is text that will appear if you hover over the image.
![A beautiful Christmas tree]({{ site.url }}/assets/tree.jpg)
Adding links
To add a link to another website, an image, or some other piece of content, use the following snippet. The square brackets enclose the link text whilst the regular brackets enclose the URL.
To find out more, just [Google](https://google.com) it!
To link to another page on the website, use the following snippet. This will ensure that links stay active if we ever change our URL.
[Holiday Wishes!]({{ site.baseurl }}{% post_url 2001-12-25-holiday-wishes %})
Formatting
In addition to markdown, there are several liquid tags that can be used to format your posts. These tags surround the content to be modified.
Code snippets
To embed a highlighted code snippet in your post, wrap the code in highlight
liquid tags. The output will look similar to the code snippet below.
{% highlight ruby %}
# your code goes here
{% endhighlight %}
To add line numbers, use the following open tag: {% highlight ruby linenos %}
.