5 Steps to Publish a GitHub Pages Blog Post

You have your post content written and reviewed by a friend.

Now you are thinking “Great, where do I put this information?”.

That is understandable!

You put all that time into your post and you want to make sure you’re doing it the correct way.

In this post I will show you where everything goes that you created.

Be sure that you read my previous post on what you needed to create.

Let’s do this

Here are the items you will be updating.

Then we will wrap up by validating the new post by checking for the following:

Artwork

Create new folders, one for the originals and one for the optimized content.

In my template I use the following folders.

  • assets/images/20190117
  • assets_original/images/20190117

Where the date is the date of the post publish date. This works for me since I have yet to have more than one post on a given date.

All files under the assets folder are part of the website.

Any files in the assets_original folder will not get published to the website. You want to keep them separate to preserve the original size and content.

Front Matter Variables

Start with a new post template file to create new post markdown file. In this post we will use one that is dependent on the theme I previewed in a previous post.

What are font matter variables?

Here is the front matter from my template.

---
layout: post
title: "How do I work this Github blog?"
slug: 10-steps-to-publish-blog-post
summary: "10 Steps to Publish Github Blog Post"
excerpt:
  You have your Github Pages blog post content ready to go, what's next?
image: /assets/images/20190117/header.jpg
twitter_image: /assets/images/20190117/twitter-image.jpg
facebook_link_image: /assets/images/20190117/facebook-link-image.jpg
date: 2019-01-17 02:34:24.000000000 -05:00
type: post
parent_id: '0'
published: true
password: ''
status: publish
categories:
- GitHub
- Blog
tags:
- GitHub
- Blog
related_posts:
- how-to-start-a-blog-for-free
- 5-reasons-to-start-blogging
permalink: '/github-pages/:slug'
---

The front matter variables that are specific to this theme.

  • related_posts
  • twitter_image
  • facebook_link_image
  • slug

Categories and Tags

The Categories and Tags will go into their own collection list.

categories:
- GitHub
- Blog
tags:
- GitHub
- Blog

Slug

The Slug will be assigned to the matching slug variable.

slug: 10-steps-to-publish-blog-post

The URL that you planned out should include the full path including the slug.

For this blog post the URL is websitename/github-pages/10-steps-to-publish-blog-post.

Here are some examples:

websitename/category1/slug

websitename/category1/category2/slug

websitename/slug

I chose to only use one category when deciding on my final URL. There is a strategy to creating the URL that impacts the SEO of the post. I like to make sure my URL does not double up on keywords.

You will update the permalink variable to include the category list you want.

permalink: '/github-pages/:slug'

Blog Excerpt

The excerpt that you would like to show on this site and externally will go with the excerpt variable.

excerpt: You have your Github Pages blog post content ready to go, what's next?

The featured.html template will show related posts below the main post content. List out the slug(s) from the posts that you want shown with the related_posts variable.

related_posts:
- how-to-start-a-blog-for-free #This is the slug of the post that will be linked
- 5-reasons-to-start-blogging

Title

The title of the blog will be assigned to the matching title variable. Be sure to put your title in double quotes.

title: "How do I work this Github blog?"

Image Locations

The following variables will state the location of the optimized images.

image:

This is the main image that will be used at the top of the post.

image: /assets/images/20190117/header.jpg

twitter_image:

This is used by the twitter_card.html template to have information in the required Twitter format.

twitter_image: /assets/images/20190117/twitter-image.jpg

facebook_link_image:

This is used by the open-graph.html template to populate content used by Facebook.

facebook_link_image: /assets/images/20190117/facebook-link-image.jpg

Markdown Content

In this step you will put the blog post material in the area below the front matter variables.

This where you put the introduction, body and the call to action.

I prefer to keep all images and links that I use in a post at the bottom and use markdown references in the main content.

Insert Images

Image defined at the bottom.

[SampleSearchEngineResults]: /assets/images/20190115/search-results.JPG "sample search engine result"
![][SampleSearchEngineResults]

Some text related to the Image used in the main content.

External Link defined at the bottom.

[BlogPostInspiration]: https://somelink.com "something"

External Link used in the main content.

Some external [link][BlogPostInspiration] related to the Image used in the main content.

Internal Link defined at the bottom.

[BlogOtherSites]: {% post_url 2019-01-08-how-to-blog-without-a-blog %} "How to blog without a blog"
Some internal [post link][BlogOtherSites] related to the Image used in the main content.

Check Readability and Spelling AGAIN

Now that you have published the new post to your site, open it up in a browser to make sure it looks good.

The easiest way to do this is to use the Hemingway website. Copy the post content from your web browser screen and paste it in the Hemingway website. It will show you misspelled words and sentences that are too complex.

Page Loading Speed

Use the Google PageSpeed Insights tool to make sure there are no issues.

Since you are using a static website the score should be close to 90 or above.

Parting Thoughts - Share Your Work

In a future post I will show you how to set up your computer to test new posts locally.

Now that you have a good format and process for publishing your posts, go out and share them!

Share them on Twitter, Facebook. Email it out to friends. Ask for feedback and continue to improve!

Be sure you read my post on how to add a custom domain to your Github pages blog!