Version 0.3.1 of gh-pages-blog was just released.
This is a minor release that fixes a few bugs. The first bug was a duplicate ‘a’ that has been removed. The second was an invalid <docs> reference in the rss.xml. Thanks to larsks for both discovering the bugs and providing the fixes. The third bug was a javascript issue causing only a single post to show when filtering by category.
This release also defaults all links to use https instead of http, and fixes a bunch of typos.
Dereck
I recently received a question about how to get source code to render correctly on a blog post. After doing some research, I found the available code rendering less than desirable with the current version of gh-pages-blog, mainly because syntax highlighting wasn’t available. So I added some features to better support source code rendering and syntax highlighting.
The first thing you’ll notice is the inclusion of a syntax.css file now. Thanks to Tom Preston-Werner for making this file available under the MIT License.
If you don’t like how the syntax highlight works, you can either edit the syntax.css or you can create a new file. If you create a new file, you’ll want to update the syntax-highlighting settings in the _config.yml file to reference the new file. If you don’t want to use syntax highlighting at all, you can also disable the loading of the css via the _config.yml.
In order to get the source code to render correctly on your blog post and pages, you’ll need to wrap the code in the highlight tags supported by Jekyll.
{% highlight text %}
code goes here
{% endhighlight %}
It’s very important to include text in the tag, otherwise the GitHub page won’t build. Jekyll will render the line breaks and spacing correctly between the highlight tags, so it shouldn’t be necessary to do any other formatting. It’s not necessary to wrap your code in <pre><code></code></pre> when using the highlight tag.
Adding the highlight tags around some sample code would result in the following output:
function code_example() {
console.log("Showing the plain text rendering of code using gh-pages-blog.");
}
In order to turn on syntax highlighting for a particular language, you’ll also need to include the language in the highlight markup tag by replacing the word text with the proper language (for javascript, {% highlight javascript %}).
function code_example_with_javascript_syntax_highlights() {
console.log("Showing the syntax highlighting rendering of code using gh-pages-blog.");
}
For a complete list of languages with syntax highlight, please see the lexers documentation of the Pygments project. Pygments is used by Jekyll, and Jekyll is used by the GitHub:Pages. The rabbit hole can go deeper, but I don’t think it’s necessary to go there at this time.
If you want to include line numbers in your source code listings, you just need to add linenos=table to the {% highlight javascript linenos=table %} tag.
| function code_example_with_line_numbers() {
console.log("Showing the line number rendering of code using gh-pages-blog.");
}
|
You can use linenos without the =table, but the code output puts the line numbers inline with the text, making it very difficult to copy and share.
Happy Blogging!
Dereck
Version 0.2.2 of gh-pages-blog was just released.
This is a minor release that fixes a bug that keeps the site from generating when an author attribute is added to a post. Thanks to sugyo for both discovering the bug and providing the fix.
Dereck
Version 0.2.1 of gh-pages-blog was just released.
This release includes updates to the _config.yml file to reflect the recent change in github policy to start using github.io as the default domain for github pages instead of github.com. You can read more about this change here.
The good news is that existing github.com links will auto forward to the new github.io domain. The configuration file was simply updated to reflect the change in policy and to be a responsive developer.
Dereck
Version 0.2.0 of gh-pages-blog was just released.
This release includes one bug fix where the author attributed on a post was not being rendered correctly on the individual post page.
This release also includes one new feature, where the author attributions are included in the html header meta data on each page and post.
The site author and email that is configured the _config.yml is always included in the html meta data. However, if a author and author_email are included in the front matter of a page or post, then this author information will also be included in the html header meta data as well.
The Getting Started page has been updated to include the user of the author and author_email front matter tags on pages and posts.
Happy blogging.
Dereck
Version 0.1.1 of gh-pages-blog was just released.
This version is pretty much the same as the previous version with the following few changes:
<pre> blocks were not rendered correctlyHappy blogging.
Dereck
Hello, World!
Back at the end of February I decided it was time to start blogging again. In the past I have used Posterous as my blogging platform of choice and I really liked it. Unfortunately, Posterous is closing up shop and shutting the doors at the end of April.
Bummer. But thank you Posterous for making such a great blogging solution in the first place!
So I looked around and the other free blogging options didn’t really appeal to me. And I really wasn’t looking for a pay blog, as my blogging volume would most likely be low.
Then I thought, hey GitHub has Pages for their users and maybe I should just create a blog and manually code all the blog posts as static html pages using a template. So I started down that road.
Luckily, I learned that Jekyll was powering GitHub Pages, and Jekyll was designed to create static blogs.
Jackpot!
I googled for a project that would incorporate a GitHub Pages blog with Bootstrap, because I wanted a responsive website that would work on mobile phones, tablets, and desktop browsers. There were a few projects, but not really all that many. And the ones I found either weren’t complete, or they weren’t being actively developed.
Ok, no problem. I’ll just go ahead and incorporate Bootstrap into my pages. Which was really easy to do. The added bonus is that I’m not really a frontend developer. I did most of my best programming work on the backend. So Bootstrap really fit the bill. (If you want to complain about Bootstrap sites all looking the same, you can get off your soapbox right now and go preach your gospel of hate somewhere else. Or better yet, put in a pull request with better looking boostrap CSS attached.)
I went and added Font Awesome because I liked the look of the fonts, and they scale well.
After Bootstrap and Font Awesome were incorporated, I thought what else could I use to make Jekyll more like a traditional dynamic blogging solution. So other sections began to come about, sections like a brief biography, plus a navlist of blog post archives, and also navlists of blog tags and categories. And since this was to be GitHub hosted, a list of GitHub projects the user to could profile made sense as well.
Somewhere along the line I decided to make this it’s own GitHub project that others could use. So I made it so that all the navlists could also be navbar drop menus. And they’re all configurable, so they don’t have to be displayed at all.
Static pages were also added early on in my coding, and then I started focusing on other things. Finally, I came back around to the static pages again and added an ordering option so that they show up in a specific order in the navbar. The pages configuration needs more options where they can also be a dropdown menu or a navlist.
And although the blogging solution available from Jekyll isn’t dynamic, I added some dynamic options in the form of javascript so that when you click on a category or tag in a blog post a page will display all matching values. The javascript I wrote is quite ugly and needs to be cleaned up. But it’s functional.
Also, lots of the display elements could use some better CSS instead of things like break tags to provide vertical separation. Again, it’s functional, and I’ll get these things cleaned up in time.
But right now, I’d like to announce a version 0.1.0 of the gh-pages-blog software. There’s still plenty of work to be done and documentation to be produced, but it’s very functional as is and that’ll be good enough for now.
Enjoy the blogging.
Dereck
ABOUT GH-PAGES-BLOG
gh-pages-blog is the simple way to set up a fully responsive blog on github in just a matter of minutes.
FOLLOW DERECK CURRY FOR UPDATES ABOUT GH-PAGES-BLOG
FORK ME!