Using Contentful RichText To Write Hub Pages

This page details how to use Markdown to write post content. To learn how to get the posts on the website, see Creating Blog Posts.

Blog posts utilize Markdown to easily format text. Basic markdown styling can be accessed through Github's toolbar when editing files. For more features, Daring Fireball does a great job of explaining how to use markdown in depth.

Github's Preview function allows you to see how the post will appear. You will have to temporarily delete the first ---, second ---, and everything between to eliminate the table from the preview.

Display a Side Photo

1. Upload the desired image to assets/images/blog

2. Follow the above link and drag your image in

3. Add a short commit message such as Add blog post photo

4. Select the option to Create a new branch for this commit and start a pull request

5. Title the branch something like Add blog post photo

6. Select Propose Changes

7. At the top of the post within the ---'s, change image: annual_report.png to reflect the file name of your image

Placing an Image Within the Post Text

Displaying a side photo is preferable to inline images. Inline images should be used to add additional photos to posts.

1. Upload the desired image to assets/images/blog
2. Copy and paste <img src="{{site.baseurl}}/assets/images/blog/annual_report.png"> to where you'd like the image to appear
3. Replace annual_report.png with the name of the desired image you placed in assets/images/blog

• Note - the image width will match that of the text

4. When previewing your post, the image will not load correctly. To preview the size and position of what your photo, you can use <img src="http://i.telegraph.co.uk/multimedia/archive/03541/Barack-Obama-gets-_3541878k.jpg"> with the url of any image that's hosted online

Other Notes

Specifically, blog posts utilize kramdown. Alternatively, posts could be written in HTML as shown with <img>. This is not recommended to avoid clashes with the website styling.