Commit 8f01cabd authored by Murukesh Mohanan's avatar Murukesh Mohanan

post on jekyll

parent 2547423c
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
--> -->
<meta name="HandheldFriendly" content="true"> <meta name="HandheldFriendly" content="true">
<meta charset="utf-8"> <meta charset="utf-8">
<meta property="fb:admins" content="murukesh">
<title> <title>
{{ page.title }} &ndash; Muru's home page. {{ page.title }} &ndash; Muru's home page.
</title> </title>
......
...@@ -3,7 +3,7 @@ title: Yet another Jekyll post ...@@ -3,7 +3,7 @@ title: Yet another Jekyll post
layout: post layout: post
--- ---
I'd shifted my personal site to Jekyll some time ago, but I hadn't yet fully I shifted my personal site to Jekyll some time ago, but I hadn't yet fully
embraced it. Now that I'd decided to blog again, I set about using Jekyll to see embraced it. Now that I'd decided to blog again, I set about using Jekyll to see
if it could provide support for the blogger Hyde in me. (Yes, yes, that was if it could provide support for the blogger Hyde in me. (Yes, yes, that was
terrible.) terrible.)
...@@ -29,8 +29,7 @@ But... ...@@ -29,8 +29,7 @@ But...
1. Markdown is fun to write in. It is clear, logical and the source is easy to 1. Markdown is fun to write in. It is clear, logical and the source is easy to
read. read.
2. Jekyll seems to do a good job of templating, without too much boilerplate. 2. Jekyll seems to do a good job of templating, without too much boilerplate.
3. Having some things like code highlighting taken care of by Jekyll is quite 3. Having things like code highlighting taken care of is quite convenient.
convenient.
Setting up Jekyll is quite easy - the site has good instructions. I'll just Setting up Jekyll is quite easy - the site has good instructions. I'll just
focus on things I had trouble doing. focus on things I had trouble doing.
...@@ -39,7 +38,17 @@ focus on things I had trouble doing. ...@@ -39,7 +38,17 @@ focus on things I had trouble doing.
# Page permalinks # Page permalinks
Jekyll on my local setup stripped of the extensions from generated pages. On Github, pages could be accessed both with and without an extension (`/index`
and `/index.html` both worked fine). Naturally, I stuck to the extension-less
form. Running Jekyll locally, I ran into trouble - it did not support
extension-less access. I'd guess this is presumably because the Github Pages
setup has something like this (in terms of `nginx` config):
try_files $uri $uri.html ...;
Annoyed, I resorted to specifying the permalinks manually. After all, I did only
have four pages - the rest generated as posts. And `index.md` didn't need any
help, so the mess is down to three pages.
<!-- section --> <!-- section -->
...@@ -48,7 +57,7 @@ Jekyll on my local setup stripped of the extensions from generated pages. ...@@ -48,7 +57,7 @@ Jekyll on my local setup stripped of the extensions from generated pages.
Displaying code proved to be a tricky thing. I'm software guy, naturally my post Displaying code proved to be a tricky thing. I'm software guy, naturally my post
will include bits of code here and there. I want it to be pretty (syntax will include bits of code here and there. I want it to be pretty (syntax
highlighting, line numbers, the works). Jekyll offers two ways for prettifying highlighting, line numbers, the works). Jekyll offers two ways for prettifying
code: *Pygments* and *Rouge*. Pygments is written in Python, and Rouge in Ruby. code: [Pygments] and [Rouge]. Pygments is written in Python, and Rouge in Ruby.
So, naturally, you might think Rouge is the way to go, since the whole damned So, naturally, you might think Rouge is the way to go, since the whole damned
thing will be in Ruby. Nope. thing will be in Ruby. Nope.
...@@ -84,7 +93,8 @@ I could have gone the JavaScript way, but I wanted to see how much I could ...@@ -84,7 +93,8 @@ I could have gone the JavaScript way, but I wanted to see how much I could
accomplish server-side. I'd looked at a couple of code highlighting JavaScript accomplish server-side. I'd looked at a couple of code highlighting JavaScript
libraries back in the day, and I vaguely recall deciding them to be not worth libraries back in the day, and I vaguely recall deciding them to be not worth
the effort. Plus, Pygments and Rouge both supported VimScript (or VimL, as you the effort. Plus, Pygments and Rouge both supported VimScript (or VimL, as you
may prefer to call it), whereas whatever library Stack Exchange used didn't. may prefer to call it), whereas whatever library Stack Exchange used didn't
(it's [Google Code Prettify](https://github.com/google/code-prettify)).
</aside> </aside>
Like with Rouge, the next problem was CSS. Thankfully, the step to get a CSS Like with Rouge, the next problem was CSS. Thankfully, the step to get a CSS
...@@ -92,16 +102,16 @@ file for Pygments was easy: ...@@ -92,16 +102,16 @@ file for Pygments was easy:
pygmentize -S <theme> -f html > foo.css pygmentize -S <theme> -f html > foo.css
After a few trial, I chose the `normal` theme. After a few trials, I chose the `normal` theme.
Line numbering was harder. Oh, both could do numbering, but the numbers would be Line numbering was harder. Oh, both could do numbering, but the numbers would be
selected too when you selected the code, and worse, copied. Apparently, Pygments selected too when you selected the code, and worse, copied. Apparently, Pygments
supported a `table` option to `linenos`, but it looked weird. There was a supported a `table` option to `linenos`, but it looked weird. There was [a
delightful solution that involved using `lineanchors` instead of `linenos`, and delightful solution](proper-line-numbers) that involved using `lineanchors`
then applying a CSS counter to create the numbers. Unfortunately, `lineanchors` instead of `linenos`, and then applying a CSS counter to create the numbers.
doesn't work when Jekyll runs in `safe` mode, which it does on Github. However, Unfortunately, `lineanchors` doesn't work when Jekyll runs in `safe` mode, which
I applied the same technique to `linenos`, and hid the numbers generated by it does on Github. Then I applied the same technique to `linenos`, and hid the
Pygments :mask:: numbers generated by Pygments :mask::
{% highlight css linenos %} {% highlight css linenos %}
pre { pre {
...@@ -177,9 +187,38 @@ opportunity to hone my skills. :) ...@@ -177,9 +187,38 @@ opportunity to hone my skills. :)
I share the hobby of the masses - reading. :P I share the hobby of the masses - reading. :P
{% endhighlight %} {% endhighlight %}
See my [front page](/) for the output. :) See my [front page]({{ site.base_url }}/) for the output. :)
<!-- section --> <!-- section -->
# Comments # Comments
The last thorny issue was comments. I wanted to enable comments, even if the
site had tumbleweeds rolling around. Given the static nature of the site,
storing comments here was out of the question. That left me with external
providers.
I tried [Google+ comments], but text area never loaded
properly. Using [Github issues] seems to be a nice idea, but I'm too lazy to
follow through on it. I tried [Facebook comments] but an odd issue
popped up: when I clicked on the text box on my phone, the orientation was
forced to landscape, even though the device hadn't rotated. So, I ditched it and
went to [Disqus]. After styling it nicely, I opened my phone to test … and ran
into the same problem. Soon after posting on the Disqus forums, I found the
problem: [Android silliness]. The soft keyboard eats in to the page display area,
thus changing the height and hence the orientation.
I wanted to consider both the height and width, so the accepted answer (using
`max-width`) was not acceptable to me. The next-best solution used boundary
values for `aspect-ratio` different from `1/1`. After some more digging around,
I decided to use [`device-aspect-ratio` instead][my-answer].
[pygments]: http://pygments.org/
[rouge]: https://github.com/jneen/rouge
[proper-line-numbers]: http://drewsilcock.co.uk/proper-linenumbers/
[google+ comments]: http://browsingthenet.blogspot.in/2013/04/google-plus-comments-on-any-website.html
[github issues]: http://ivanzuzak.info/2011/02/18/github-hosted-comments-for-github-hosted-blogs.html
[facebook comments]: https://developers.facebook.com/docs/plugins/comments
[disqus]: https://disqus.com/admin/universalcode
[android silliness]: http://stackoverflow.com/q/8883163/2072269
[my-answer]: http://stackoverflow.com/a/32421098/2072269
...@@ -13,7 +13,7 @@ opportunity to hone my skills. :) ...@@ -13,7 +13,7 @@ opportunity to hone my skills. :)
<!-- section --> <!-- section -->
I share the hobby of the masses - reading. :P Favourite books include *The I share the hobby of the masses - reading. :stuck_out_tongue: Favourite books include *The
Green Mile*, *The Wheel of Time* series, the *Foundation* series and the *Rama* Green Mile*, *The Wheel of Time* series, the *Foundation* series and the *Rama*
series. series.
......
...@@ -42,9 +42,9 @@ You might wanna do a `git pull` on some of the plugins inside `.vim/bundle`: ...@@ -42,9 +42,9 @@ You might wanna do a `git pull` on some of the plugins inside `.vim/bundle`:
# Some scripts {#scripts} # Some scripts {#scripts}
- [curlwc.sh](files/curlwc.sh): - [curlwc.sh](https://github.com/murukeshm/scripts/blob/master/curlwc.sh):
This script uses [curl(1)](http://linux.die.net/man/1/curl) to download the target file in parts. Not very robust. This script uses [curl(1)](http://linux.die.net/man/1/curl) to download the target file in parts. Not very robust.
- [mtcd.sh](files/mtcd.sh): - [mtcd.sh](https://github.com/murukeshm/scripts/blob/master/mtcd.sh):
This script mounts all arguments in directories within `~/cdrom` (as ISO9660 images), and also handles unmounting. This script mounts all arguments in directories within `~/cdrom` (as ISO9660 images), and also handles unmounting.
These and more can be found on my [Github scrips repo](https://github.com/murukeshm/scripts). These and more can be found on my [Github scrips repo](https://github.com/murukeshm/scripts).
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment