Last year (around August 2011), I wrote the initial version of my website. It contained personal details and project details condensed into several 500 by 300 px pages. This was sufficient for the time, but I need more space for extended projects posts and blog posts. This year, I decided to write a new website that’s not limited by scale and allows me to easily add new content.
There a lot of options when it comes to presenting information in a blog format. WordPress and Blogger are often used, but I wanted full control of the website. With those blogging engines, I could have created a theme or grabbed an overused generic theme, but such tools obscure the data from the user. Instead I chose to use Jekyll. Jekyll is a static blog generator, which allows content generation from markdown files. Using such a tool means that deploying new content to the website can be done with a few short steps: 1) create markdown file, 2) run generator, 3) push results to git repository.
Previous Version of My Website
The previous version of my website presented the necessary personal information, as well as limited overview of my projects. The home page was limited to contact information and a link to my résumé. Due to the condensed form of the website, a user would have to navigate away from the home page to get to content.
Beyond the home page there was a short about me page, a skill set page, and a project page. The projects page contained a slider showing the different projects. Each page could have about two tweets worth of information (about 300 characters). That’s no where near enough to describe the details of a project. This led me to rewriting my website.
Using Jekyll to Generate Website
- must be able to write posts in markdown (no cms)
- must be able to filter posts into blog and project sections
- must be capable of pagination when listing posts
- must be able to completely customize the visual appearance
- must be cable of highlighting code
- must be stable/reliable
After confirming that Jekyll met all of my requirements, it was a matter of configuring the folder structure, styling the html, writing posts, and generating the website.
Structuring a Jekyll website is a matter setting up the proper folder structure and setting the proper tags. My website builds upon the following folder structure:
* ├── _layouts/ │ ├── default.html │ ├── post.html │ - ├── _posts/ │ ├── 2012-8-3-New-Website.md │ - ├── _site/ │ ├── (generated website goes here) │ - ├── css/ │ ├── style.css │ - ├── _config.yml ├── index.html -
default.html contains the HTML frame for all pages using the default
layout. It contains the header, navigation, content, sidebar, and footer. The
content section of the layout is set to a content
liquid tag, and Jekyll will replace the tag with
the generated content. The content is derived from markdown files, which
post.html layout. For the purpose of my website, the two are
sufficient, but in a more extensive website Jekyll is capable of using
I chose a simple design consisting of a light foreground, a dark background, and a blue accent for links. I used a few external resources to accentuate certain details of the page:
- denim pattern from Subtle Patterns
- title font from The League of Moveable Type
- header font from The League of Moveable Type
Since the majority of the website is styled in CSS, I wanted to create a fluid layout that would scale to the browser size. Using CSS Media Queries, I was able to create CSS styles that were specific to a set of page sizes. I chose to use three size: small, medium, and (you guessed it) large. The small size targets mobile devices, while the medium and large sizes target tablets and PCs.
If you can, try resizing the page; you’ll notice the layout snapping to the correct scale according to the current width of the browser. Once the media queries are in place, it’s just a matter of reconfiguring the layout. In the small stylesheet, the div styles are overwritten to force the divs to display at full width in a single vertical column:
In addition to setting the page up with different stylesheets, I also enabled the viewport meta tag to lock the scale on mobile screens:
Adding new content to the website couldn’t be simpler. I create a new markdown
file according to the naming convention
year-month-day-title.md in either the
blog posts folder or the project posts folder. At which point I fill in the
YAML Front Matter, which consists of a layout, title, and
--- layout: post title: New Website category: post --- ...
If necessary I can use the
<!--more--> tag to specify the excerpt length to
show when browsing through posts, and I can even add a
<ul id="toc"></ul> tag
to insert a table of contents (generated from the page headers). At this point,
it’s a matter of using markdown
to write the content of a post.
Generating the website is probably the
hardest easiest step. All I have
to do is execute
jekyll --server from within root project directory. Once
the website is generated, I deploy it via a git post-update hook.
August 03, 2012