Just seeing how easy it is to add a new post. Realistically anyway. Now this post serves as my place to put reminders and notes for how to make posts, format markdown, etc.

I never trust how difficult things may seem. They’re probably twice as difficult as I imagine them. If writing a post is this easy….

Oh look, it’s not!

It didn’t show up in the posts.

Okay, I figured it out. If the date in the ‘date:’ entry up there isn’t the same as the date in the file name of the page, it doesn’t work.

And make sure you have a ‘.md’ extension on the file.

#Hey, did you know?#

If you don’t put a space before the first letter in a title after the ‘#’ in a heading, Jekyll doesn’t format it correctly?

This is right

See? Add a space.

Titles

Titles are separate from headers - titles are in the front matter. If you have too many posts with the same title they dont’ show up right. You should fix that.

Links

Links look like this. The text goes in the brackets, the link URL goes in the parenthesis.

Responsive Images

Apparently this is an important thing. All I know is the image tag is pretty static and I need some magic happening there.

https://github.com/wildlyinaccurate/jekyll-responsive-image

I can’t even gem install the thing yet.

Inserting Hash Characters

So obviously, the hash character (&#35) is used for section titles, so how do you put one into tricky places? You have to use HTML entity for the hash: & # 35 - but with no spaces

Yeah… That doesn’t work very well. I have a few other ways to do this. Here’s a failed attempt at putting a hash character first in a quoted section:

*.h = svn:keywords=Author Date Id Rev URL;svn:eol-style=native

See? It treats the leading hash as a heading marker instead of as a hash. So, add a backslash before it like this:

#*.h = svn:keywords=Author Date Id Rev URL;svn:eol-style=native

Fixing Newlines in Quoted Sections

Quoted sections look like this:

Line 1 Line 2 Line 3

Oops - that doesn’t look right, does it? That should be three different lines, but it’s not. The reason for that is that there aren’t enough spaces at the end of the lines. If you add two spaces before you hit return then you get this:

Line 1
Line 2
Line 3

Ta-da.

And, sometimes quoted sections gobble up non-quoted sections:

This is the quoted section And this shouldn’t be, but is.

So, add a blank line after the quoted section:

This is the quoted section

And this actually isn’t anymore.

Fixing *’s in Quoted Sections

I’ve had a situation with quoted text where I’m trying to express a file filter that encompasses all files (*.*) instead being evaluated as putting emphasis on the ‘.’ (.). It probably also happens with non-quoted text too but I haven’t checked. To fix this, escape the *’s with backslashes.

Fixing Indentation in Quoted (Code) Sections

If you try to write code with indents in quoted sections, the leading whitespace is gone:

This has no leading whitespace
This has a tab character
This has four spaces
And all of them look the same

• An awful haiku

To fix this, don’t use quoted sections for code. Use highlighted sections:

{\% highlight python \%}
Put code here!
{\% endhighlight \%}

and replace ‘python’ with whatever your language is. I don’t know what the valid languages are, so just try!

Just kidding, here’s a few valid languages:

• python
• ruby
• dot - Graphviz markup
• c
• console - output from Bash or so forth
• makefile

Note: there are excessive backslashes in there, but if I don’t put them there then Jekyll chokes. Ignore/remove the backslashes.

Centering Images

I still haven’t done this, but here’s a stackoverflow link that discusses many options.

Putting Directory Trees in Posts

I like to use the *nix tree command to generate visual representations of my directory structure for projects, but the blockquote munges the spacing and it looks bad. Like this:

.
└── res
├── tex
└── txt

Where I’d rather it appear like this:

.  
└── res  
    ├── tex  
    └── txt 

The trick is to use Jekyll’s code highlighting instead of blockquoting to hold the information and specify the language for highlighting as ‘TeX’. Sadly, I can’t figure out how to show you this because all of the markup is gobbled up by Jekyll, but you should get the idea.

Sorting Blog Entries by ‘Updated’

Sometimes I like to go back and edit blog posts to add content. For example, this blog post gets continually updated whenever I need to document how to do various things in Jekyll.

On my blog page, I list all of my blog posts by the date they were created, but I want to sort them by the last time they were updated. Also, I want to include an abstract of the changes made and show that on the blog page as well. Ideally, all blog posts would be sorted first by the update date, then if that doesn’t exist, by the creation date. I’d like to show the abstract on the blog page as well so people can see what was changed.

I’ve figured out how to do this.

I wanted the abstract to be colored orange, so I had to go into the CSS files and add the color orange. The file I edited was blog root/css/main.scss Here’s what it looks like with the additions:

$text-color:       #111;
$background-color: #fdfdfd;
$brand-color:      #2a7ae2;
$orange-color:     #FFA500; //<----New line

Then, I had to add a new style for the abstract to blog root/_sass/_layout.scss. I added the style in amongst similar ones. Here’s the added code with the surrounding entries:

.post-meta {
    font-size: $small-font-size;
    color: $grey-color;
}

/*---Start New Entry---*/
.post-abstract {
    font-size: $small-font-size;
    color: $orange-color;
    font-style: italic;
}
/*---End New Entry---*/

.post-link {
    display: block;
    font-size: 24px;
}

Then, I have to add the new content to the blog list page. My blog list is in blog root/_pages/blog.md. Unfortunately, I can’t show it verbatim because the Liquid scripting in the code is evaluated as part of this blog post, but I’ve pasted it below with the Liquid tags in HTML comments.

---
layout: default
permalink: /blog/
title: Blog
---

<div class="home">

 
  <ul class="post-list">
    <!-- assign created = site.posts | sort: 'date' | reverse -->
    <!-- assign updated = site.posts | sort: 'updated'  | reverse -->
    <!-- for post in updated -->
      <li>
        <!--if post.updated -->
        <span class="post-meta">Updated: </span> 
        <h2>
          <a class="post-link" href=""></a>

        </h2>
        <!-- if post.update-abstract -->
        <span class="post-abstract"></span>
        <!-- endif -->
        <!--endif-->}
      </li>
    <!-- endfor -->
    <!--for post in created -->
        <!--if post.updated -->
        <!--else-->
        <li>
            <span class="post-meta"></span>
            <h2>
                <a class="post-link" href=""></a>
            </h2>
        </li>
        <!--endif-->
   <!--endfor-->}
  </ul>

  <p class="rss-subscribe">subscribe <a href="/feed.xml">via RSS</a></p>

</div>

Now, updated entries will be shown at the top with the date marked as ‘Updated’ and with the abstract shown below the title in orange italic text.

Unfortunately… I didn’t like that. I wanted the posts to be sorted by date and, if it existed, updated date. Unfortunately, I couldn’t get the sort to work like that, so I had to improvise. I used Notepad++ and some regex and some search and replace in files to add an ‘updated’ attribute to the front matter of each page with the same date as the original ‘date’ attribute. Then, for posts that had acutally been updated, I ensured the ‘updated’ date was correct and ensured they had an ‘update-abstract’ attribute in the front matter. Then, I was able to sort all of the posts by ‘updated’ and, if they had an ‘update-abstract’, it would be displayed. The result was that all of the blog posts were sorted according to the last time a change was made to them. Here’s how it worked:

---
layout: default
permalink: /blog/
title: Blog
---

<div class="home">

 
  <ul class="post-list">
    <!-- assign blogposts = site.posts | sort: 'updated' | reverse -->
    <!-- for post in blogposts -->
      <li>

        <span class="post-meta">
		<!-- if post.update-abstract == nil -->
		Dated: 
		<!-- else -->
		Updated: 
		<!-- endif -->
		</span> 
        <h2>
          <a class="post-link" href=""></a>

        </h2>
        <!-- if post.update-abstract -->
        <span class="post-abstract"></span>
        <!-- endif -->

      </li>
    <!-- endfor -->
  
  </ul>

  <p class="rss-subscribe">subscribe <a href="/feed.xml">via RSS</a></p>

</div>

What ended up happening with this is that Github.io did NOT like my ‘updated’ attribute and refused to compile my site. I had to remove the ‘updated’ attribute and the additions to

Adding Check Boxes/TODO Lists

Some clever gent figured out how to get check boxes into posts when you place this sort of text there:

[ ] TODO THIS!

Linking to Blog Posts

I have some blog posts, and I have some other, related, blog posts. I want them to be friends, with links to each other. However, I can’t just put a URL in there - my blog lives online AND on my local PC (through Jekyll). I want the links to work anywhere, so a simple link won’t do it. There must be a way!

Here is a link that describes how to do that.

So, if I want to link to the post about turning Python scripts into executables, I would do this

I absolutely cannot post the markdown that gives you the proper link. THe website won’t allow it, but just follow the link above and you’ll see.

Random Top-Level Pages

I had an issue where I had a top-level page show up out of nowhere. I hadn’t defined it in