Script Ahead, Code Behind

Krystal Mok's Weblog

Test Page

This is a test page for my new blog on Github.

I’ll be gradually moving from my old blog to this one, since my old blog is mostly in Chinese, but it’s likely for me to be writing more English posts in the future.

Anyway, here’s the link to my old blog: http://rednaxelafx.iteye.com

Setting up this blog

Apparently I’m using Octopress to power this blog. Many thanks for the nice framework that save me a lot of time to get up to speed. I probably wouldn’t have decided to move my blog here in the first place if there weren’t ready-to-use solutions for lazy people like me.

Just to remind myself of the steps I took to set it up:

I followed a guide by Zete Lui(@night_song) for the initial setup. Nice and easy.

It’ll take some more time to customizing everything. Let’s see how it goes.

So far, the customizations I’ve made to the default Octopress blog are in:

  • modified Rakefile

These two lines will have to be modified for me to get deploy working right:

1
2

deploy_default = "push"

deploy_branch  = "master"
  • modified _config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

# ----------------------- #

#      Main Configs       #

# ----------------------- #



url: http://rednaxelafx.github.com

title: Script Ahead, Code Behind

subtitle: Krystal Mok's Weblog

author: Krystal Mok

simple_search: http://google.com/search



# RSS / Email (optional) subscription links (change if using something like Feedburner)

subscribe_rss: /atom.xml

subscribe_email:

# RSS feeds can list your email address if you like

email:



# ----------------------- #

#    Jekyll & Plugins     #

# ----------------------- #



# If publishing to a subdirectory as in http://site.com/project set 'root: /project'

root: /

permalink: /blog/:year/:month/:day/:title/

source: source

destination: public

plugins: plugins

code_dir: downloads/code

category_dir: blog/categories

markdown: rdiscount

rdiscount:

  extensions: [smart, autolink]

pygments: false # default python pygments have been replaced by pygments.rb



paginate: 10          # Posts per page on the blog index

pagination_dir: blog  # Directory base for pagination URLs eg. /blog/page/2/

recent_posts: 6       # Posts in the sidebar Recent Posts section

excerpt_link: "Read on →"  # "Continue reading" link text at the bottom of excerpted articles



# list each of the sidebar modules you want to include, in the order you want them to appear.

# To add custom asides, create files in /source/_includes/custom/asides/ and add them to the list like 'custom/asides/custom_aside_name.html'

default_asides: [custom/asides/about.html, asides/recent_posts.html, custom/asides/tags.html, custom/asides/blogroll.html, asides/twitter.html]



# Each layout uses the default asides, but they can have their own asides instead. Simply uncomment the lines below

# and add an array with the asides you want to use.

# blog_index_asides:

# post_asides:

# page_asides:



# ----------------------- #

#   3rd Party Settings    #

# ----------------------- #



# Twitter

twitter_user: rednaxelafx

twitter_tweet_count: 6

twitter_show_replies: false

twitter_follow_button: true

twitter_show_follower_count: false

twitter_tweet_button: true



# Google Plus

google_plus_one: true

google_plus_one_size: medium



# Pinboard

pinboard_user:

pinboard_count: 3



# Delicious

delicious_user:

delicious_count: 3



# Disqus Comments

disqus_short_name:



# Google Analytics

google_analytics_tracking_id: UA-25520242-1
  • modified sass/partials/sidebar/_base.scss

Copied the style for the search box from sass/partials/_navigation.scss for the tag filter box:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.search {

    padding: .3em .5em 0;

    font-size: .85em;

    @extend .sans;

    line-height: 1.1em;

    width: 95%;

    @include border-radius(.5em);

    @include background-clip(padding-box);

    @include box-shadow(lighten($nav-bg, 2) 0 1px);

    background-color: lighten($nav-bg, 15);

    border: 1px solid $nav-border;

    color: #888;

    &:focus {

      color: #444;

      border-color: #80b1df;

      @include box-shadow(#80b1df 0 0 4px, #80b1df 0 0 3px inset);

      background-color: #fff;

      outline: none;

    }

  }

And, changed the style for <li> tags so that the blogroll hierarchy can be shown:

1
2
3
4
5
6
7
8
9
10
11

li {

//    list-style: none;

    padding: .5em 0;

    margin: 0;

    margin-left: 20px;

    border-bottom: 1px solid $sidebar-border;

    @extend .side-shadow-border;

    p:last-child {

      margin-bottom: 0;

    }

  }
  • modified sass/screen.scss

Added the following to make lists indent right. Otherwise they stick out to the left and look weird.

1
2
3

.entry-content li {

  margin-left: 20px;

}
  • added source/_includes/custom/asides/tags.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<section>

  <h1>Tags</h1>

  <input class="search" type="text" name="filter_tags" results="0" placeholder="Filter Tags ..."/>

  <script type="text/javascript">

    $('input[name=filter_tags]').keyup(function(e){

      var val = $(this).val();

      if (/^\s*$/.test(val) || e.keyCode == 27) { // 27 is 'esc'

        $('#tags li').show();

        $(this).val('');

        return;

      }

      var pattern = new RegExp(val, 'i');

      $('#tags li').each(function(){

        $(this)[pattern.test($(this).find('a').text()) ? 'show' : 'hide']();

      });

    });

  </script>

  <ul id="tags">

    {% for cat in site.categories %}

      <li class="post">

        <a href="/blog/categories/"></a>

      </li>

    {% endfor %}

  </ul>

</section>
  • modified source/_includes/custom/navigation.html
1
2
3
4
5

<ul role=main-navigation>

  <li><a href="/">Blog</a></li>

  <li><a href="/blog/archives">Archives</a></li>

  <li><a href="https://github.com/rednaxelafx">Github</a></li>

</ul>
  • modified source/_includes/custom/asides/about.html
  • added source/_includes/custom/asides/blogroll.html

That’s probably … about it? I’ve got lost track of what else I modified. Anyway, this reminder should be enough if I should ever need to do it again.

Oh, right, I need to update the source/favicon.png file.

Miscellaneous

I’ve learned that embedding a Gist can be done with:

1

{% gist <gist_id> [display file name] %}

To make life easier when editing Markdown files on my Ubuntu box with GEdit, I’ve installed gedit-markdown plugin.