Good evening!

There is a number of articles and recommendations online on how to optimize your blogging experience. And yes, it is yet another one of them.

Split your window or work on several monitors

One thing you can do is split your window into several views. Do it by holding Alt+Shift and pressing numbers 1 to 5 (on main, not numpad).

Window split into 4 views, press Alt+Shift+5 for that

If you have several monitors, you can simply grab a tab and drag it out to open it in a separate window.

Additionally, you can open a file in several “views”; this allows you to look at different parts of the same file in different windows or parts of a window. Simply go to File -> New View into File. You can assign a shortcut for it: go to Preferences -> Key Bindings and in the User Preferences (the part on the right) add

{ "keys": ["ctrl+k", "ctrl+n"], "command": "clone_file"},

This will open a new view if you, holding Ctrl, press K and N.

Jekyll module for Sublime Text

I’ve learned about this module from here, take a look at this video, it explains everything pretty well. Below is my summary with additions.

Install the module with Package Manager as you would install any other package: Ctrl+Shift+P -> Package Control: Install Package -> Jekyll. It will open a thankyou message in a separate tab if the installation is successful.

Now you need to set certain settings by going to Preferences -> Package Settings -> Jekyll -> Settings - User. This will open a new empty settings file. You can see the whole list of available options in Preferences -> Package Settings -> Jekyll -> Settings - Default, which can be a bit overwhelming.

The most important ones are jekyll_posts_path and jekyll_drafts_path. These should contain full paths to your _posts and _drafts folders respectively. Optionally, you may add paths to your folders containing images and page templates by setting jekyll_uploads_path and jekyll_templates_path respectively.

Other things I list below are up to you, but I also set "jekyll_send_to_trash": true so it would put the posts I delete via this plugin to trash; "jekyll_markdown_extension": "md", so it would set this extension to newly created posts, because .markdown extension doesn’t seem to work properly for me; "jekyll_datetime_format": "%Y-%m-%d %H:%M:00" simply because non-zero seconds in creation date are irritating to me.

So my settings look something like this:

{
    "jekyll_posts_path": "/path/to/your/site/folder/_posts",
    "jekyll_drafts_path": "/path/to/your/site/folder/_drafts",
    "jekyll_uploads_path": "/path/to/your/site/folder/images",

    "jekyll_datetime_format": "%Y-%m-%d %H:%M:00",
    "jekyll_send_to_trash": true,
    "jekyll_markdown_extension": "md",
}

Commands

Now you can simply invoke useful commands by pressing Ctrl+Shift+P and typing Jekyll. Here are some of the most useful ones, in my opinion.

Template management

These commands are for template creation, it’s unlikely that you will use them often after you create your initial templates now.

  • Jekyll: New Template - lets you create a new template. Then you can type its name and optional description. In the new window, you simply edit the template and save it.
  • Jekyll: Browse templates - opens the folder containing your template files.
  • Jekyll: Edit template - in case you wanna edit your template.

Managing posts

These are useful when you create new posts and publish them after filling them with content.

  • Jekyll: New draft from template - automatically creates a new draft based on a template you select from the menu and the name you provide, and puts it into _drafts folder for you.
  • Jekyll: Promote draft to post - automatically takes the draft you select from the menu, prepends the current date, and moves it to your _posts folder.

Working on posts

  • Jekyll: Insert current datetime - inserts the current date and time at the cursor, the format is determined by "jekyll_datetime_format" setting, see above.
  • I could recommend taking a look at Jekyll: Insert upload, which lets you choose an asset from the folder you specify in "jekyll_uploads_path" setting conveniently. But I usually add some classes and descriptions to my images and the image specification inserted by this command is quite basic. I’m not sure if you can customize the format of image specification, haven’t found it in the settings. It might work for you, give it a try, but I prefer using Sublime Text’s Snippets instead for that; will be described later in this article.

Of course there are other commands which you are free to explore, I simply familiarized you with the ones you will probably use the most if you follow the workflow similar to mine: create a draft, write its content and then move it to posts folder.

Snippets

Snippets is a neat feature of Sublime Text that lets you insert custom little templates by simply starting typing a specified combination of letters.

There is a nice explanation on them here. Below I will show you some that I find useful.

One important thing is to go to Preferences -> Settings and set "auto_complete_selector": true, or else autocomplete (and your custom snippets) won’t work in Markdown.

Code snippets

My blog is about tech, so I insert code often. So the following two snippets are used often.

Generic code

<snippet>
	<content><![CDATA[
```
$1
```

$0
]]></content>
	<tabTrigger>code-generic</tabTrigger>
	<scope>text.html.markdown</scope>
	<description>Generic encapsulation for source code</description>
</snippet>

Start typing code-generic to insert this snippet. Now you can paste the code, press Tab again, and you’ll be outside where the $0 is.

Code in specific language

<snippet>
	<content><![CDATA[
{% highlight ${1:python} %}
$2
{% endhighlight %}

$0
]]></content>
	<tabTrigger>code-highlight</tabTrigger>
	<scope>text.html.markdown</scope>
	<description>Encapsulation for source code in specific language</description>
</snippet>

Start typing code-highlight to insert this snippet. Now you can type the name of the language, press Tab, paste the code, press Tab again, and you’ll be outside where the $0 is.

Of course, hyperlinks are important. I’m not sure if Jekyll module inserts them for you or not, I haven’t found it. So here’s another snippet!

<snippet>
	<content><![CDATA[
[${2:text}](${1:link}) $0
]]></content>
	<tabTrigger>link</tabTrigger>
	<scope>text.html.markdown</scope>
	<description>Insert a link</description>
</snippet>

Now you can type a link, press Tab, type the link text, press Tab again to jump out of it.

Image snippet

Any blog can benefit from some pictures here and there, IT is no exception. I have already stated above why I don’t like the image insertion shortcut provided by Jekyll module for Sublime Text. So I made my own snippet for it.

<snippet>
	<content><![CDATA[
![${2:Alt text}](/images/${1:filename} "${2:Alt text}"){:class="img-responsive"}

$0
]]></content>
	<tabTrigger>image</tabTrigger>
	<scope>text.html.markdown</scope>
	<description>Encapsulation for source code in specific language</description>
</snippet>

Not only it appends the img-responsive class, it also has the folder with my images already defined, so I only need to type the image filename; additionally, after I do that, I press Tab, and both the field for alt text and the field for text that appears in the thumbnail when you hover over an image are selected. I like to specify the same text for them both, so why bother selecting them separately if I can use multi-select and edit them simultaneously. I like Sublime Text for its convenient multi-selection after all.

As a side note

While I was writing this section, I had problems inserting the code above into my article so it would look right, because Jekyll was trying to parse it as its highlighting direcive and, obviously, was giving errors. The solution was the raw tag, which I had learned when I was writing it. In the following picture you can see what the Code Snippets section above actually looks like inside the editor.

This is what the raw Markdown text for the Code Snippets section looks like

And another thing: it seems that the Jekyll module adds this snippet for you when you type raw; so, I did not need to make it myself.

Bulid and development serve scripts

If you use Linux, you may even simplify your life with scripts. It’s really simple.

Serving development site locally

#!/bin/bash

bundle exec jekyll serve --drafts --future

This script will start a local server with drafts and including the articles with the dates in the future.

Building and pushing to remote server

#!/bin/bash

jekyll build

rsync -v -rz --checksum --delete _site/ serveruser@111.111.111.111:/path/to/your/site/folder/on/server

And this rebuilds the site for you and sends to your server. It does it via rsync utility, which transfers only the changes, so you don’t have to delete and send your whole site each time, all file additions and deletions are handled for you.

In conclusion

This article can be considered a cheat sheet for a Jekyll blogger. And under no circumstances it is exhaustive, nor it is the only right way to do it.

You may also add something about using Git for your blog, and Sublime modules like GitGutter or GitSavvy, or some modules to make Markdown highlighting prettier, but I think this article is already quite bloated, and I don’t like long writing.

…I don’t like writing at all, heheh. Yet I’m glad to see you here! Hope to see you again eventually!