Commit Logs

Set Up Blog Like A Pro With AddThis, Cloudflare and Mailgun

It’s been a few month since I first set up my blog using Hexo and Github Page (more details are in an earlier post How To Build A Blog With Hexo On Github Page). As a bonus for myself updating a new post every week, I decided to upgrade my blog with more features. It is an experiment to learn how the SaaS ecosystem is structrued around blogging community. In this post, I am going to introduce some of the handy SaaS solutions out there with freemium plans and walk through a few how-to’s.

Share content across media channels

RSS is still alive, but apparently it is no longer the dominant way people keep up with blog updates. Social media is the new norm for content sharing. To get your message out to a big and engaged audience, you should start to maintain some social media presence (most likely you already had it anyways) and make your site share-friendly.

Integrate AddThis

AddThis makes it easy for readers to share articles to multiple social media sites. You have probably seen it from other sites already, but it provides a sharing bar so that, with a single click, readers are able to share contents to their favorite social media channels. Its freemium version comes with basic analytic tools and simple HTML snippets to be added to your website. You can even configure the basic design, both for desktop and mobile, of the sharing bar.

After the initial setup, it is just a matter of copy/paste the generated HTML code into the <body></body> of your website.

1
2
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ENTER-YOUR-ADDTHIS-ID"></script>

And walla! you would have a beautifully designed sharing bar like the one on the right side (or bottom, if you are on mobile) of this post on your own blog. Want to test it out? You could try to share this post to your social network via my sharing bar ;-).

Enable rich content

Now that your readers can share your blog posts easily, you probably want to optimize how the others see the shared content. And the end of the day, a better formatted content helps to improve your click through rate (CTR). Luckily, there is the Open Graph protocol. To enables any web page to become a rich object in a social graph via Open Graph, you need to add some meta tags to the <head></head> of your pages.

More details can be found on its website, but there are four required tags.

  • og:title - The title of your object as it should appear within the graph, e.g., “The Rock”.
  • og:type - The type of your object, e.g., “video.movie”. Depending on the type you specify, other properties may also be required.
  • og:image - An image URL which should represent your object within the graph.
  • og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., “http://www.imdb.com/title/tt0117500/“.

Switch to HTTPS with Cloudflare

HTTPS is a protocol for secure communication over network, which provides authentication of the websites being communicated. It is especially useful for websites that involve sensitive information, such as login and payment. But there is a general push for secured communication for all websites. Most famously, Google uses HTTPS as a ranking signal in its algorithm, which, by itself along, is enough reason for anyone to adopt the HTTPS protocol.

You can pay a few bucks and get a paid SSL certificate that provides end to end encryption, but I decided to go with the free SSL certificate from Cloudflare since I am pretty sure my static blog is safe ;-).

To get that green lock on my address bar, I first follow this tutorial to switch my nameserver from Namecheap to Cloudflare (this step could take up to 24 hours for verification).

And, a few code snippets need to be added to fully enable HTTPS for the site.

In config.yml add these so that the static contents are served over the HTTPS version.

1
2
url: https://www.commitlogs.com
enforce_ssl: www.commitlogs.com

In <head></head>, set up canonical link tag so that search engine know to serve the HTTPS version of the site and also redirect users from HTTP version to the HTTPS version.

1
2
3
4
5
6
<link rel="canonical" href=" { { site.url } }{ { page.url } }" />
<script type="text/javascript">
var host = "commitlogs.com";
if ((host == window.location.host) && (window.location.protocol != "https:"))
window.location.protocol = "https";
</script>

Use domain specific email address with Mailgun

Ever wondering how that cool kid gets his own email domain name? Guess what, you already had one when you registered your domain name. Depending on your nameserver, any domain name comes with unlimited email forwarding and some number of email sending support for free (you can always pay to get more).

The reason I am using Mailgun is that it provides email sending capability by the number of emails sent per month, not by number of email addresses. And, since I am using Cloudflare for free SSL certificate, I lose the free email sending service from my nameserver. Plus, the setup for Mailgun is super easy that you just need to make a few changes with your DNS provider, not even a line of code for your website. Here is a good tutorial if you are lazy to google it out.

Summary

Alright, hope you enjoyed this post from the upgraded version of commitlogs.com. I think these SaaS are very handy and can get you a better start on your blogging journey. But, I want to call out the following quote from a successful man, since the only way to get your blog going is to keep blogging.

Content is king.

— Bill Gates

As always, I would really appreciate your thoughts/comments. Feel free to leave them following this post or tweet me @_LeiG.