bdewilde.github.io - On Starting Over with Jekyll

On Starting Over with Jekyll

Bdewilde.github.io Spined HTML

On Starting Over with Jekyll Burton DeWildeWell-nighMe Archive CV On Starting Over with Jekyll 2014-08-10 blogging DataKind Disqus Harmony Institute Jekyll website diamond After flipside lengthy hiatus from blogging, I’m back! Long story short, I got so frustrated with Blogger’s shortcomings and complications, not to mention the unstipulated lack of tenancy over my content, that I lost the will to update my old blog. At the same time, I was putting in longer hours at Harmony Institute and volunteering on the side for DataKind, so I didn’t have much to say outside of official channels. That said, my data life has not gone entirely un-blogged: Measuring Shifts in National Discourse: ASpecimenStudyTowersand Analyzing Issue-Focused Social Networks on Twitter Big Data, Big Impact Highlights from Project Accelerator Night Why Jekyll? Recently, life slowed lanugo a bit, so I started exploring my options for towers a custom blog / personal website. Wordpress is well-known, urgently maintained, and extensively customizable, but it’s slow, bloated, vulnerable to spamming and hacking. Pass. SquareSpace is a slick, drag-and-drop website builder with blogging functionality built-in, but it seems geared towards designer-types with image-rich content to present. Not me. On the other end of the spectrum, there’s unchangingly the start-from-scratch approach, but I’m no web developer, and I’d rather spend my time blogging than towers the blogging infrastructure. It didn’t take long for Jekyll to sally as my preferred option, for a number of reasons: It’s simple: Jekyll automagically converts a directory of specially marked-up text files into a static website. My content lives in files on my local machine rather than a remote database. It’s lightweight: Since the site is static and generated surpassing deployment to a server, it loads much faster and can handle far increasingly traffic than a dynamic site. Plus, the relatively bare-bones HTML+CSS is easier to understand and customize. It’s coder-friendly: Jekyll was built by the folks at GitHub for use by readme-writing coders and tech-savvy bloggers — people like me. Posts are written in Markdown; lists, links, images, quotes, lawmaking blocks, and increasingly are all seamlessly integrated into text. I can produce new content entirely from the repletion of my terminal and favorite text editor. It’s free: GitHub provides self-ruling hosting (!) for Jekyll blogs in the form of GitHub Pages. My site is just a GitHub repository; version tenancy is intrinsic. So, I went for it, and surpassing long, I had myself this lovely new website. Getting Started I found a few “helpers” for towers out Jekyll sites — Octopress, poole, JekyllBootstrap — that provide ready-made templates, themes, and plugins to get you going faster and easier, but I opted to build and customize everything myself considering I’m a stubborn workaholic tenancy freak. After reading through much of the documentation, I set up a default site on my computer with the pursuit directory structure: $ ls -1 _config.yml _includes _layouts _posts about.md css feed.xml index.html When you run Jekyll, it parses markdown files; adds tags, categories, and other properties specified in YAML; and builds pages from layout templates and Liquid code, all of which goes into a _site folder. _config.yml contains site-wide configuration settings used when Jekyll builds the static HTML. As is convention, index.html is the home page of the site, while about.md is a Markdown file that builds into a new “about” page on the site. The _layouts directory contains vanilla HTML templates into which content will be inserted, while _includes contains small snippets of HTML, such as that for headers and footers. Blog posts go in the _posts folder as individual .md files. Site content comes in the form of spare pages and blog posts. I threw together a quick bio for theWell-nighMe page then began filling my site with content from my old blog. Jekyll has a package for migrating from other blogging systems, but I transcribed all of my old posts into Markdown manually (see: stubborn, workaholic, tenancy freak). In the process, I learned some new tricks in both Markdown and HTML+CSS, so it wasn’t entirely pointless… Customization The default home page layout featured a simple list of all posts in the blog formatted as [date, blog title]. Super boring. After a lot of tinkering, I settled on a increasingly detailed preview of each post, including the title, publication date, post tags, an optional image thumbnail, and a text excerpt which defaults to the first paragraph in the post. I moreover split the full list of posts into chunks spread over multiple pages via Jekyll’s pagination functionality. The lawmaking looks something like this: <div class="previews"> {% for post in paginator.posts %} <div class="preview"> <h1><a href="{{ post.url }}">{{ post.title }}</a></h1> <div class="post-meta"> <div class="post-date">{{ post.date | date: '%Y-%m-%d' }}</div> <div class="post-tags"> {% for tag in post.tags %} <span>{{tag}}</span> {% endfor %} </div> </div> {{ post.excerpt }} <a href="{{ post.url }}">ReadIncreasingly&raquo;</a> {% if post.preview_pic %} <div class="preview-pic"> <a href="{{ post.url }}"><img src="{{ post.preview_pic }}"></a> </div> {% endif %} </div> {% endfor %} </div> Lines with special syntax such as {% for tag in post.tags %} come from the Liquid template language, which lets you use programming logic and wangle site/page/post data to dynamically generate the static site structure with Jekyll. Liquid can be frustrating to use and is pretty limited, but I suppose it’s largest than nothing. I moreover widow an Archive page that reproduced the default alphabetize page’s full list of blog posts, but included lawmaking to emphasize the passage of time by grouping posts by year of publication: {% assign years = "2014,2013,2012" | split: "," %} {% for year in years %} <h3>{{ year }}</h3> <ul> {% for post in site.posts %} {% assign post_year = post.date | date: "%Y" %} {% if post_year == year %} <li> <span class="post-meta">{{ post.date | date: "%d %b" }}</span> <a href="{{ post.url }}">{{ post.title }}</a> </li> {% endif %} {% endfor %} </ul> {% endfor %} I knew that I wanted to enable commenting on my blog posts, and the standard option seemed to be Disqus. Fortunately, they make the setup process very simple, going so far as to provide the well-constructed script needed to add comments to each post. I put this comments.html script in my _includes folder, then widow it to the marrow of the _layouts/post.html template: {% if page.comments %} {% include comments.html %} {% endif %} With this, I can turn comments on/off for each individual blog post with a simple configuration flag at the top of the post file. Lastly, I widow Google Analytics to my site — it seemed like a good idea to track readership data on my data blog. Almost exactly as with Disqus, I registered my site, saved an automatically generated google_analytics.html script in the _includes folder, then modified the _layouts/default.html template with {% include google_analytics.html %}. Piece of cake.DiamondI could go on and on well-nigh how I came to the current diamond of this site (there were literally dozens of iterations…), but instead I’ll focus on a couple overall aspects. Color: In general, I prefer (almost-)black-on-white content, with shades of gray to demarcate special or unshared regions or elements; verisimilitude is used sparingly, for emphasis. Standard links are a cornflower blue, while special links — blog titles linking to the full blog content, header links to pages, footer links to my social media finance — go from woebegone to orchid upon mouseover. The coloring of lawmaking blocks was customized to include these two colors, plus a striking untried for numbers and orange for strings. Typography: I went with a sans-serif font-family (Helvetica/Arial) throughout considering it feels cleaner and increasingly modern to me, and kept the baseline font size somewhat large for readability. I reduced the letter spacing of headlines slightly, to add density and visual weight without relying on unvigilant font, which I save for list item pseudo-headers. As is standard, lawmaking blocks and the like use a monospace font. Lastly, I gave my name / site title Burton DeWilde a special font (Serifa) that has a technical but still archetype vibe. Iconography: I used the Font Awesome toolkit to incorporate customizable vector icons into my site where clarity and/or brevity is needed. In the site footer, I list links out to my web presence in the form of icons rather than words: email as , Twitter as , and so on. I moreover supplemented the metadata shown unelevated post titles with icons: for publication stage and for tags, in specimen the content’s meaning wasn’t self-evident. And that’s how I made this new site! I hope you like it, and I sincerely hope the joy of blogging with Jekyll will alimony me coming when with updates. ← previous ↑ next → Please enable JavaScript to view the comments powered by Disqus. comments powered by Disqus Burton DeWilde data scientist / physicist / filmmaker © 2014 Burton DeWilde. All rights reserved.