My equipment of blogging

The previous post lists the packages that turns Sublime Text 3 to a decent markdown editor. Yet it only makes up a part of blogging. Like many, I don’t write HTML directly but instead use Jekyll to do the conversion. Thanks to the package I could start writing a draft and then promote it to a post in a template that my Jekyll configuration understands. Netlify hosts my tiny blog and builds the site from the repository on Bitbucket automatically.

Jekyll theme and configuration

I borrowed the theme type and conducted minor tweaks, like adding a favicon, customizing figcaption and changing fonts to be rendered. Before it I use monochrome but it is such a minimalism theme that there’s no tagging possibility. Type offers more functionalities including Google analytics, Disqus comments and a tag page, the most important one for me. To keep my place as simple and minimalistic as possible, I choose to not to embed the former two features currently.

Following the detailed instruction in the README file, generating a local site is quite easy, as long as not minding some thirty seconds Jekyll may take. If there’s any problem with gem, commands like bundle install and updating ruby versions are of help. Never forget the most helpful teacher: the internet (or more precisely, stackoverflow).

Jekyll template and sublime snippet

After installing the package with the same name of Jekyll, the next step is to configure the user setting and adding a template with a proper heading as meta info for Jekyll interpreting.

Example code to specify path storing posts and drafts:

{
    "jekyll_posts_path": "C:\\Users\\MouMaau\\blog\\_posts",
    "jekyll_drafts_path": "C:\\Users\\MouMaau\\blog\\_drafts",
    "jekyll_markdown_extension": "md"
}

and

---
layout: post
title: 
tags: []
image:
---

for lines prepended to each draft and post.

Besides, I’ve added some useful snippets for decoration (fleuron as a separation symbol), insertion of a figure with caption and a couple of lines mimicking a flashcard of vocabulary.

Consult the short description to differentiate all three as follows.

<snippet>
    <description>insert rotated fleuron</description>
    <content>
        <![CDATA[<center>❧</center>]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>flr</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>text.html.markdown, text.html.markdown.multimarkdown</scope>
</snippet>

<snippet>
    <description>insert a word flashcard</description>
    <content>
        <![CDATA[
---

<center><b>${1:word}</b> /${2:pronunciation}/<br>
<em>${3:noun}</em>
</center>

---
        ]]>
    </content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>wd</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>text.html.markdown, text.html.markdown.multimarkdown</scope>
</snippet>

<snippet>
    <description>insert an image in html syntax</description>
    <content>
        <![CDATA[<figure><img src="${2:image link}" title="${1:image caption}">
         <figcaption>${1:image caption}</figcaption>
</figure>]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>iimg</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>text.html.markdown, text.html.markdown.multimarkdown</scope>
</snippet>