Trying Something New

Trying Something New

Decided to give Ghost a shot. I plan to be writing a bit more and the blog software I put together and used over the past few years has lacked in the editor department. Ghost uses Markdown to format content and is more flexible than the BBCode I used previously to format text.

If you've never used Markdown before, here's a quick cheatsheet straight from the editor within Ghost.

Markdown documentation

Ghost is quite stripped down, and static pages aren't too flexible at the moment. It looks like Ghost will use the same template for all static pages which might bring up issues when trying to make unique static pages.

Editing a template

Ghost already has Social Media links for sharing posts but lacks social links to authors. Not to worry, editing this is easy and makes use of Handlebars for templating. I added the following to post.hbs:

<div class="author-share">
	<a class="icon-twitter" href="https://twitter.com/_danada">
		<span class="hidden">Twitter</span>
	</a>
	<a class="icon-google-plus" href="https://plus.google.com/+DanielDeSousa">
		<span class="hidden">Google+</span>
	</a>
</div>

Take a look at the author-share class. I wanted the icons to have the same style as the other Social Media icons, so I tacked on the author-share class to the existing class that handles the Social Media icons.

.post-footer .share a, .post-footer .author-share a {
	font-size: 1.8rem;
	display: inline-block;
	margin: 1rem 1.6rem 1.6rem 0;
	color: #BBC7CC;
	text-decoration: none;
}

.post-footer .share a:hover, .post-footer .author-share a:hover {
	color: #50585D;
}

It's also important to modify the css for screen widths below 500px in the entry for @media only screen and (max-width: 500px).

.post-footer .share a, .post-footer .author-share a {
	margin: 1.4rem 0.8rem 0 0.8rem;
}

The above changes were able to accomplish this:

Social buttons!

I also wanted to get Social Media links on the Author page, so I jumped into the author.hbs template and added the following lines to the author-meta div:

<span class="author-link icon-twitter"><a href="https://twitter.com/_danada">@_danada</a></span>
<span class="author-link icon-google-plus"><a href="https://plus.google.com/+DanielDeSousa">+DanielDeSousa</a></span>

This addition fits in nicely with the default location and post counter icons. Check it out below:

Social author

What's next?

Some absolutely essential work has been completed on this, but I still have to move over the remaining pieces of my portfolio and look into creating a more-involved theme. The default Ghost theme (casper) is great, but it looks just like everyone else's Ghost blog. I'm hoping to get something a bit more unique-looking (:

Stay tuned.