I am currently @ Stockholm Resilience Center, Stockholm University, Kräftriket 2B, SE-10691 Stockholm, Sweden

Welcome to "spatiotemporal@avit", thanks jekyll!

I have been thinking of initiating an interactive blog for sharing code snippets, tools and methods for spatial analyses for long. This is mainly because I have been greatly benefited by the codes and FAQs posted by the online open community in my research (thank you all!). Subsequently, for some problems, when I came up with solutions myself; I thought that it would be helpful for others, who are facing similar problems in their research (or in other endeavors).

Launching a blog did not take place for many reasons. One of which is certainly the lack of time but most importantly is the lack of proper platforms for doing it. Well, there have been some platforms developed such as RPubs and StackExchange. However, they are often centered around specific problems and themes, and therefore do not provide much flexibility unless someone is posting the questions you have answers for. Personal blog appealed to me much more regarding this concern but making them interactive in a way that I like, appeared to be problematic, because: (i) publishing them with html syntax was a lot of work (as I am not an html geek) and (ii) the available bloggers’ services that allow for manual entries have their own templates (which were not my favorite) and often not suitable for publishing codes (important for me as I am a coder).

Eventually, I found jekyll (probably I am not too late to discover it). In a word, it’s amazing! It provides an easy interface with Markdown language (much more simplistic and intuitive than html coding) and a free hosting in GitHub, where I have recently started making the tools available that I have developed. Jekyll is fully blog-aware and hence, provide an easy mean for creating your own blogs with your own templates.

I started with Jekyll Now, which allows you to start your own blog without even installing jekyll. All you need is to start a GitHub account. I could easily create and integrate a jekyll blog with my GitHub Page and adapt this blog into my template just by a few tweaking in the page layout and page.scss.

page.html

<!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
<head>
{% include head.html %}
</head>

<body id="post">

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

{% include navigation.html %}

<div id="main" role="main">
  <article class="entry">
    <iframe src='https://a.tiles.mapbox.com/v4/avitbhowmik.o4o2b5cl/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiYXZpdGJob3dtaWsiLCJhIjoiY2lndXR4bDd6MGJzbjRwbTNzZDl2YnZ2OSJ9.CMSF6dxAzmrsNJQbRd1g9g' class="entry-feature-image" height='400px' frameBorder='0'alt="{{ page.title }}" {% if site.logo == null %} style="margin-top:0;"{% endif %}></iframe>
    <p class="image-credit">I currently work @ <b> Stockholm Resilience Center,</b> Stockholm University, Kräftriket 2B, SE-10691 Stockholm, Sweden</p>
    <div class="entry-wrapper">
      <header class="entry-header">
        <h1 class="entry-title">{% if page.headline %}{{ page.headline }}{% else %}{{ page.title }}{% endif %}</h1>
        <h4 style="color: rgb(153, 153, 153);">{{ page.subtitle }}</h4>
      </header>
      <footer class="entry-meta">
      <big><big><big><b>Recent</b></big></big></big><br><br>
        <big><b><a href="{{ site.url }}/blog/" style="color:#3399CC;">Spatiotemporal@Avit&rarr;</a></b></big><br>
        {% for post in site.categories.blog limit:2 %} 
          <article style="margin-left: 10px; margin-top: 10px;"><a href="{{ site.url }}{{ post.url }}" style="color:#3399CC;">{{ post.title }}</a></article>
        {% endfor %}<br>
         <big><b><a href="{{ site.url }}/news/" style="color:#3399CC;">News&rarr;</a></b></big><br>
         {% for post in site.categories.news limit:2 %} 
          <article style="margin-left: 10px; margin-top: 10px;"><a href="{{ site.url }}{{ post.url }}" style="color:#3399CC;">{{ post.title }}</a></article>
        {% endfor %}<br>
         <big><b><a href="{{ site.url }}/publication/" style="color:#3399CC;">Publication&rarr;</a></b></big><br>
         <article><script src="http://bibbase.org/show?bib=https%3A%2F%2Fapi.zotero.org%2Fusers%2F1408553%2Fcollections%2F7D3938A3%2Fitems%3Fkey%3D2pwA87KkCDOEr4M19aeVM8wq%26format%3Dbibtex%26limit%3D100&jsonp=1&css=avitbhowmik.ml/assets/css/bibliography.css&filter=shorttitle:new" style="color:#3399CC;"></script></article>
         <big><b>Conference / Meeting</b></big><br>
         <article style="margin-left: 10px; margin-top: 10px;"><b>Earth-Doc meeting,</b> 10-11 December 2015, Potsdam Institute for Climate Impact Research, Potsdam, Germany</article><br><br>
         <big><b>Twitter</b></big><br><br>
         <div><a class="twitter-timeline" href="https://twitter.com/search?q=%40LandscapEcology%20OR%20%23climate%20OR%20%23%20anthropocene%20OR%20%23earthsystemdynamics%20OR%20%23sthlmresilience%20OR%20%23earthstatement%20OR%20%23SRCspeedtalks%20OR%20%23SDGs" data-widget-id="697833731441217536"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div><br><br>
<big><b>SRC on facebook</b></big><br><br>
<div class="fb-page" data-href="https://www.facebook.com/stockholmresilience/?fref=ts" data-tabs="timeline" data-width="230" data-height="600" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/stockholmresilience/?fref=ts"><a href="https://www.facebook.com/stockholmresilience/?fref=ts">Stockholm Resilience Centre</a></blockquote></div></div>
      </footer>
      <div class="entry-content" style="text-align: justify;">
        {{ content }}
      </div><!-- /.entry-content -->
    </div><!-- /.entry-wrapper -->
  </article>
</div><!-- /#main -->

<div class="footer-wrapper">
  <footer role="contentinfo" class="entry-wrapper">
    {% include footer.html %}
  </footer>
</div><!-- /.footer-wrapper -->

{% include scripts.html %}

</body>
</html>

Added in page.scss

/* ==========================================================================
   Page/post layout and styling
   ========================================================================== */

/*
   Main content
   ========================================================================== */

#main {
  @include clearfix;
}

.entry,
.hentry {
  @include clearfix;
  border-bottom: 1px solid lighten($black,80);
  border-bottom: 1px solid rgba($black,.10);
}

/* feature image */

.entry-feature-image {
  margin: 20px 0 0;
  width: 100%;
  @include media($medium) {
    margin-top: -75px; /* move up to be overlapped by site logo */
  }
  @include media($large) {
    margin-top: -145px; /* move up further to be overlapped by site logo */
  }
}

/* page header */

.entry-header {
  @include fill-parent;
}

/* tag listing in page header */

.entry-tags {
  margin: 2em 0 0;
  padding: 0;
  text-transform: uppercase;
  @include font-size(16);
  font-weight: 600;
  a {
    color: $text-color;
    padding: 0 5px;
  }
  li {
    display: inline-block;
    margin-bottom: 0;
    &:before {
      content: "\2022";
    }
    &:first-child {
      &:before {
        content: "";
      }
      a {
        padding-left: 0;
      }
    }
  }
}

/* page title */

span + .entry-title {
  margin-top: 0;
}

.entry-title {
  font-family: $alt-font;
  font-style: italic;
  @include font-size(16,yes,16);
  font-weight: 200;
  line-height: 1;
  a {
    color: $black;
    text-decoration: underline;
  }
  @include media($medium) {
    @include font-size(32,yes,34);
  }
  @include media($large) {
    @include font-size(48,yes,52);
  }
}

/* page/post wrapper */

.entry-wrapper {
  @include outer-container;
  margin-top: 0;
  margin-bottom: 3em;
  padding-right: $gutter;
  padding-left: $gutter;
}

/* page/post meta content (date, author, etc) */

.entry-meta {
  padding: 20px 20px 0 0;
  @include span-columns(12);
  color: #3399CC;
  text-align: justify;
  @include font-size(14);
  a {
    color: #3399CC;
  }
  @include media($large) {
    @include span-columns(3.0);
  }
  & > span {
    padding: 0 20px 10px 0;
    display: inline-block;
    @include media($large) {
      display: block;
      padding: 8px 0;
      border-bottom: 1px solid lighten($black,80);
      border-bottom: 1px solid rgba($black,.10);
    }
  }
}

/* author avatar (circular) */

.bio-photo {
  display: none;
  @include media($large) {
    display: block;
    width: 150px;
    height: 150px;
    margin-bottom: 10px;
    @include rounded(150px);
    @include clearfix;
  }
}


/* feature image credit */

.image-credit {
  margin: 0 auto;
  max-width: 440px;
  padding-top: 5px;
  padding-right: 0px;
  padding-left: 20px;
  text-align: right;
  @include font-size(12, no);
  line-height: 1.3;
  color: lighten($text-color, 30);
  @include clearfix();
  @include media($medium) {
    max-width: 760px;
    padding-right: 30px;
    padding-left: 60px;
    @include font-size(14, no);
  }
  @include media($large) {
    max-width: 960px;
  }
  a {
    color: lighten($text-color, 30);
  }
}

/* main content block */

.entry-content {
  padding: 20px 0 0 20px;
  @include span-columns(12);
  p:first-child {
    margin-top: 0;
  }
  @include media($large) {
    @include span-columns(9.0);
  }
  /* nice link underlines */
  p > a,
  li > a {
    border-bottom: 1px dotted lighten($link-color, 50);
    &:hover {
      border-bottom-style: solid;
    }
  }
}

/*
   Disqus
   ========================================================================== */

#disqus_thread {
  margin-top: 2em;
}

/*
   Pagination
   ========================================================================== */

.pagination {
  margin-top: 2em;
  text-align: center;
}

/*
   Overrides
   ========================================================================== */

/* adjust width for lack of meta/author column */

#home,
#page {
  .entry-wrapper {
    max-width: em(760);
  }
  .entry-title {
    text-align: center;
    max-width: 100%;
  }
  .entry-content {
    @include span-columns(12);
  }
}

/*
   Kramdown generated table of contents
   ========================================================================== */

#markdown-toc {
  font-family: $alt-font;
  margin-top: $gutter;
  margin-bottom: $gutter;
  padding-left: 0;
  border: 1px solid $border-color;
  border-radius: $border-radius;
  ul {
    list-style-type: none;
    padding-left: 0;
  }
  li {
    @include font-size(16,no,18);
    border-bottom: 1px solid $border-color;
    list-style-type: none;
  }
  h6 {
    margin: 0;
    padding: (.25 * $gutter) (.5 * $gutter);
    background: $table-stripe-color;
  }
  a {
    display: block;
    padding: (.25 * $gutter) (.5 * $gutter);
    border-left: 2px solid transparent;
    border-bottom: 0 solid transparent;
    &:hover,
    &:focus {
      background: lighten($border-color,5);
    }
  }
}

/*
   Tables
   ========================================================================== */

/** For nicer looking tables apply the .table class
 *  Example:
 *  <table class="table">
 *    <tr>
 *      <td>cell1</td>
 *      <td>cell2</td>
 *      <td>cell3</td>
 *    </tr>
 *  </table>
*/

.table {
  border-collapse: collapse;
  margin: ((0px + $doc-line-height) / 2) 0;
  margin: ((0rem + ($doc-line-height / $doc-font-size)) / 2) 0;
  width: 100%;
  tbody {
    tr:hover > td, tr:hover > th {
      background-color: $table-hover-color;
    }
  }
  thead {
    tr:first-child td {
      border-bottom: 2px solid $table-border-color;
    }
  }
  th {
    padding: (0px + $doc-line-height) / 2;
    padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
    font-family: $alt-font;
    font-weight: bold;
    text-align: left;
    background-color: $table-header-color;
    border-bottom: 1px solid darken($border-color, 15%);
  }
  td {
    border-bottom: 1px solid $border-color;
    padding: (0px + $doc-line-height) / 2;
    padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
    @include font-size(18);
  }
  tr, td, th {
    vertical-align: middle;
  }
}

That was it! From now on, all I need to do is to create new posts in markdown syntax.

I have promised to myself that I will manage time from now on, to publish methods, tools, and R, Python and Shell code snippets for geostatistical analyses, spatial(statistical) analyses of ecological and environmental data and large scale environmental data management. I will also post FAQs on my and other available tools and solutions to the problems that I encounter.

I would like to welcome the open community out there to my spatiotemporal@avit blog. I hope that you would find it useful. Finally, a big hand for jekyll to make it happen!

Leave a Comment

Your comments and discussion will enrich my blog. You can comment by logging in to your social network or disqus sites (options are shown in the login drop-cap or when you click on the comment box). You can also comment as a guest by clicking on the "Name" box under "sign up with disqus" and ticking "I'd rather post as a guest" (your e-mail will be kept confidential).

comments powered by Disqus