Skip to content
Browse files

Add post title to page title.

  • Loading branch information...
1 parent 5caf783 commit db134908a6de1cc92d6065925a6bc47f60407e4f @rsese committed
View
2 _layouts/post.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <title>Hella Robots</title>
+ <title>{{ page.title }}</title>
<link rel="stylesheet" media="screen" href="/assets/css/master.css"/>
<!-- enable HTML5 elements in IE7+8 -->
View
110 server/2011/11/25/reading-data-from-a-spreadsheet-with-roo.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>: Hella Robots</title>
+ <link rel="stylesheet" media="screen" href="/assets/css/master.css"/>
+
+ <!-- enable HTML5 elements in IE7+8 -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <script type="text/javascript">
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-25803931-1']);
+ _gaq.push(['_setDomainName', 'hellarobots.com']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
+ </head>
+ <body id="home">
+ <div id="container">
+ <header class="group">
+ <div class="header-inner">
+ <h1 class="logo"><a href="/">Hella Robots.</a></h1>
+ <nav class="main-nav">
+ <ul>
+ <li><a href="/">home</a></li>
+ <li><a href="/projects.html">projects</a></li>
+ <li><a href="/blog.html">blog</a></li>
+ <li><a href="/#about">about</a></li>
+ </ul>
+ </nav>
+ </div>
+ </header>
+ <div id="content">
+ <section id="main" class="group">
+ <div class="span16 first">
+ <h2>Reading Data From a Spreadsheet with Roo</h2>
+<p>Have you ever been given a spreadsheet full of data that you need to use in an application? Were you super not excited about copying and pasting the data from each cell for 2 hours? The roo gem can be your bff when you have to read data from a spreadsheet. Feel free to download the sample files for this example.</p>
+<div class="download">
+ <a href="https://github.com/rsese/roo-example" class="std-btn download-btn">View Code on GitHub</a>
+</div>
+<h3>What's This Roo Business?</h3>
+<p>Roo is a ruby gem that gives you a simple interface for reading data from a spreadsheet in .ods, .xls, .xlsx, and Google Doc spreadsheet format (and writing data in the case of a Google Docs spreadsheet). Cell data types are recognized, data can be output in YAML and CSV format, and formulas are recognized in .odt and Google doc spreadsheets. Roo is available on <a href="http://roo.rubyforge.org/">RubyForge</a> and <a href="http://www.thopre.com">Thomas Preymesser</a> is the gem maintainer. Note that if you come across the <a href="https://github.com/hmcgowan/roo">GitHub</a> repository page, that repository is no longer maintaind by Hugh McGowan as mentioned in this <a href="https://github.com/hmcgowan/roo/issues/10#issuecomment-2522827">issue comment</a>.</p>
+<h3>Using Roo</h3>
+<p>Using Roo is fairly straightforward. First install the gem using:</p>
+<pre><code>gem install roo</code></pre>
+<p>Then, hopefully you can use the following example and the references section as a starting point for working with Roo. For this example, we'll use a stripped down version of the <a href="http://www.alistapart.com/articles/survey2010">A List Apart 2010 Web Design Survey</a> data. The <a href="http://aneventapart.com/alasurvey2010/add.html">raw data</a> is kindly made available for further analysis; we'll just use it as sample data for our example. And instead of using the whole spreadsheet (which is relatively huge), we'll just use the first six columns and the first one hundred rows.</p>
+
+<p>The below example is super simple; it reads data from an Excel spreadsheet and writes the data to standard out. Instead of printing data to standard out, you could of course do something more interesting like read data from a client-provided Excel spreadsheet, write the data out to YAML files, and use those files to populate HTML email templates built with <a href="http://nanoc.stoneship.org/">Nanoc</a> (i.e. what I used Roo for).</p>
+<pre><code>require 'roo'
+
+workbook = Excel.new('a-list-apart-web-design-survey-sample.xls')
+
+# Set the worksheet you want to work with as the default worksheet. You could
+# also iterate over all the worksheets in the workbook.
+workbook.default_sheet = workbook.sheets[0]
+
+# Create a hash of the headers so we can access columns by name (assuming row
+# 1 contains the column headings). This will also grab any data in hidden
+# columns.
+headers = Hash.new
+workbook.row(1).each_with_index {|header,i|
+headers[header] = i
+}
+
+# Iterate over the rows using the `first_row` and `last_row` methods. Skip
+# the header row in the range.
+((workbook.first_row + 1)..workbook.last_row).each do |row|
+ # Get the column data using the column heading.
+ age = workbook.row(row)[headers['What is your age in years?']]
+ gender = workbook.row(row)[headers['What is your gender?']]
+ most_identify_with = workbook.row(row)[headers['With which of these groups do you most identify?']]
+ global_region = workbook.row(row)[headers['In which global region are you located?']]
+ country = workbook.row(row)[headers['In which country are you located?']]
+ education = workbook.row(row)[headers['What is the highest level of education you have completed?']]
+ academics_helpfulness = workbook.row(row)[headers['How much have your academic studies helped you in your web work?']]
+
+ print "Row: #{age}, #{gender}, #{most_identify_with}, #{global_region}, #{country}, #{education}, #{academics_helpfulness}\n\n"
+end</code></pre>
+<p>We start by opening the spreadsheet and setting the default worksheet we want to work with using the <code>Excel.new</code> class method. Then the <code>sheets</code> property gives us access to all the worksheets in the spreadsheet in an array. The sample spreadsheet has only one worksheet, so we set the default worksheet to the first worksheet in the array using <code>sheets[0]</code>.</p>
+<p>Next we create a hash of the column position and the header names to make it somewhat easier to work with the data. This hash will let us ask for data from the fields/columns in each row using the column headings from the first row. We can then iterate over all the rows in the spreadsheet using <code>first_row</code> and <code>last_row</code> methods. We iterate over the number of rows in the spreadsheet passing the row block variable to the <code>row</code> method, which returns an array of all the columns in the row. We use the <code>headings</code> hash we created earlier to access the columns by the heading name, and finally, we print the data to standard out.</p>
+<h3>References and Further Reading</h3>
+<ul class="references">
+ <li><a href="http://roo.rubyforge.org/">Roo</a>. Retrieved October 10, 2011.<br />The project home page on RubyForge. There's a nice walkthrough of many of the methods and properties provided by Roo, and there is a similar <q>reading data from a spreadsheet and printing the data to standard out</q> example, though it's implemented in a slightly different way. There is also a discussion about cell data types, formulas, and writing data to Google Doc spreadsheets. The most detailed discussion on using Roo.</li>
+ <li><a href="http://groups.google.com/group/ruby-roo">ruby-roo | Google Groups</a>. Retrieved November 13, 2011.<br />Google group for support using Roo. There's a lot of a good information here, so if you're having trouble with Roo, you can browse/search the archive, or post your own question. Preymesser, the gem author is active on the list.</li>
+ <li><a href="http://roo.rubyforge.org/rdoc/index.html">roo-1.2.3 Documentation</a>. Retrieved November 10, 2011.<br />The Roo API documentation. Check here for more detailed information on the methods and properites provided by Roo.</li>
+ <li>Pack, Mike. <a href="http://mikepackdev.com/blog_posts/15-parsing-excel-files-on-heroku-with-roo">Parsing Excel files on Heroku with roo</a>. August 2, 2011. Retrieved November 13, 2011.<br />Discusses a workaround for using Roo in a Rails application on Heroku because Pack states that the file system on Heroku is not writeable by your application. Pretty specific issue, but since Heroku has been gaining popularity, this reference might save someone some time if they run into this problem.</li>
+ <li><a href="http://stackoverflow.com/search?q=%2Broo+%2Bgem">Questions containing &#39;+roo +gem&#39; - StackOverflow</a>. Retrieved November 15, 2011.<br />Search results page for questions (and answers) related to the Roo gem (you may want to play with the search terms if you have a particular issue). Not a ton of results right now, but you can always ask a question if you sign up for a StackOverflow account.</li>
+ <li><a href="http://spreadsheet.rubyforge.org/">Documentation spreadsheet 0.6.5.9</a>. Retrieved November 13, 2011.<br />Project home page for the spreadsheet gem, an alternate gem for working with Excel spreadsheets (support for Open Office and Google Doc spreadsheets is not yet available).</li>
+ <li>Mullet, David. <a href="http://rubyonwindows.blogspot.com/">RUBY ON WINDOWS</a>. Retrieved November 15, 2011.<br />David Mullet's blog on using Ruby on the Windows platform. A lot of great code samples for doing various tasks with Microsof Word, Excel, Outlook, etc. Has a short post on <a href="http://rubyonwindows.blogspot.com/2008/01/parsing-spreadsheets-with-roo-gem.html">using Roo to read Excel spreadsheets</a>, but also has <a href="http://rubyonwindows.blogspot.com/search/label/excel">a number of posts on using Win32OLE</a> to work with Excel. Win32OLE comes with Ruby as of version 1.8, though it is not included if you're on Linux.</li>
+ <li>Sulc, David. <a href="http://davidsulc.com/blog/2011/03/27/using-ruby-and-win32ole-to-manipulate-excel/">Using Ruby and Win32OLE to manipulate Excel</a>. Retrieved November 10, 2011.<br />The first in a series of posts using Win32OLE to work with Excel documents. Along with Mullet's blog, we can see that Win32OLE provides more funcationality than Roo, but the big drawback is that you have to be on Windows for it to work (though there are some options like Wine if you are on Linux).</li>
+</ul>
+
+ </div>
+ </section>
+ </div>
+ <footer>
+ <div class="footer-inner">
+ <p>&copy; 2011 HellaRobots</p>
+ </div>
+ </footer>
+ </div>
+ </body>
+</html>
View
210 server/2011/12/20/up-and-running-on-phpfog-with-codeigniter.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>: Hella Robots</title>
+ <link rel="stylesheet" media="screen" href="/assets/css/master.css"/>
+
+ <!-- enable HTML5 elements in IE7+8 -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <script type="text/javascript">
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-25803931-1']);
+ _gaq.push(['_setDomainName', 'hellarobots.com']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
+ </head>
+ <body id="home">
+ <div id="container">
+ <header class="group">
+ <div class="header-inner">
+ <h1 class="logo"><a href="/">Hella Robots.</a></h1>
+ <nav class="main-nav">
+ <ul>
+ <li><a href="/">home</a></li>
+ <li><a href="/projects.html">projects</a></li>
+ <li><a href="/blog.html">blog</a></li>
+ <li><a href="/#about">about</a></li>
+ </ul>
+ </nav>
+ </div>
+ </header>
+ <div id="content">
+ <section id="main" class="group">
+ <div class="span16 first">
+ <h2>Up and Running on PHPFog with CodeIgniter</h2>
+<p>If you're a web developer, chances are you've heard of or used <a href="http://rubyonrails.org/">Ruby on Rails</a> to develop a web application. As a Ruby programmer, there are other options like <a href="http://www.sinatrarb.com/">Sinatra</a>, but Rails is the dominant Ruby framework today (by at least <a href="http://www.bryceboe.com/2011/02/21/using-stackoverflows-api-to-find-the-top-web-frameworks/">one measure</a>). PHP on the other hand has a number of <a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller">MVC</a> frameworks that you can experiment with. <a href="http://cakephp.org/">CakePHP</a>, <a href="http://www.zend.com/en/">Zend</a>, and <a href="http://codeigniter.com/">CodeIgniter</a> are just a few that come to mind; <a href="http://fuelphp.com/">FuelPHP</a> is a bit younger, but looks pretty interesting too.</p>
+<p>I haven't had a chance to work with these PHP frameworks much aside from skimming their introductory tutorials, so I thought it might be helpful to get my hands slightly dirty with CodeIgniter in <a href="http://xkcd.com/908/">THE CLOUD</a>.</p>
+<p>We'll be using <a href="http://git-scm.com/">git</a> to track our source code, and <a href="https://phpfog.com/">PHPFog</a> to deploy the application. You know what git is, but in case you haven't heard of PHPFog, it's another Platform as a Serivce (think <a href="http://www.heroku.com">Heroku</a>) with an easy to use web control panel for configuring and deploying your PHP-based web applications.</p>
+
+<h3>Setup</h3>
+<p>For simplicity's sake, we'll assume in this article that you have access to a Unix-y command line interface (think <a href="http://www.cygwin.com/">Cygwin</a> or the <a href="http://code.google.com/p/msysgit/">Git Bash shell</a> if you're on Windows). My setup for this article is Windows 7 64-bit Home Premium, <a href="http://www.wampserver.com">WAMP Server 2.2A</a>, and Git Bash shell 1.7.7.1 mostly because I'm on Windows and haven't had a chance to install Cygwin or <a href="">VMware Player</a> yet.</p>
+
+<h3>PHPFog</h3>
+<p>Normally, we might start by grabbing the latest CodeIgniter package, unzipping it, adding the files to our local development server, and checking that we can access the default <q>Welcome to CodeIgniter</q> page. But since we'll be using PHPFog to deploy our application, we'll start by getting our PHPfog setup prepared. PHPFog lets you deploy 3 free application to the Shared Cloud, which is great for development.</p>
+<p>After <a href="https://phpfog.com/users/new">registering</a> for an account, <a href="http://docs.phpfog.com/indxe.php/features/article/generating_a_ssh_key"> create your SSH keys</a> if you don't already have a key pair you want to use. Then in your My Account dashboard, click on the <q>SSH Keys</q> tab, fill in your public key details (or click on the <q>Add another SSH Key</q> button if you're adding another key), and then click on <q>Save SSH Key</q>.</p>
+
+<div class="figure">
+ <img src="/assets/images/2011/12/ssh-keys-screenshot-medium.png" />
+</div>
+
+<p>With your SSH keys all setup, click on the <q>Clouds</q> tabs in your dashboard and launch a new application in the Shared Cloud. Since we're creating a CodeIgniter application we could choose the CodeIgniter option in the Frameworks section, but we can also create a Custom App and then just add all the CodeIgniter files ourselves. Both options are really straightforward, but using the Custom App option does allow us to use the latest version of CodeIgniter.</p>
+<p>The PHPFog documentation actually gives us a nice walkthrough for <a href="http://docs.phpfog.com/index.php/features/article/getting_started_custom_application">setting up a custom application</a>, which is basically what we're going to do at first before adding the CodeIgniter framework files. The instructions are largely the same, so we'll try not to repeat too much of the same information. Start by clicking on the <q>Custom App</q> button in the Frameworks section.</p>
+
+<div class="figure">
+ <img src="/assets/images/2011/12/custom-app-screenshot-medium.png" />
+</div>
+
+<p>Next, we have to enter in our application details, which includes a MySQL password (we can set this now for future use), and our domain name. For testing, using a .phpfogapp.com domain is fine, but you can use your own domain name if you want with more configuration (and assuming you own the domain name you want to use). We'll set our MySQL password and then use the the URL hello-ci.phpfogapp.com for our application and click <q>Create App</q>. hello-ci.phpfogapp.com will of course be taken (unless I delete the application), so fill in your own domain name.</p>
+
+<div class="figure">
+ <img src="/assets/images/2011/12/application-details-screenshot-medium.png" />
+</div>
+
+<p>You'll be re-directed to your App Console where you'll see the status of your application move from Starting to Running if there are no problems.</p>
+
+<div class="figure">
+ <img src="/assets/images/2011/12/app-console-screenshot-medium.png" />
+</div>
+
+<p>If you click on the <q>View Live Site</q> button, you'll see "Hello World" in your browser. Your bare Custom App is now running on the PHPFog Shared Cloud.</p>
+<p>Now click on the <q>Source Code</q> tab in the sidebar, you'll see a git command for cloning the repository for your application. PHPFog creates this repository for your application, and we'll work with this repository by adding the CodeIgniter Framework files and pushing these changes to PHPFog remote repository. To use this repository, you'll need to setup and use git on your local machine.</p>
+
+<h3>Git</h3>
+<p>Now that we have our PHPFog application setup, we need to use git to grab the source code, add the CodeIgniter framework files, and the push the changes back to the remote repository. There's a ton of great information on using git, so to keep this article relatively short, we'll assume you're at least familiar with the basic commands. See this helpful <a href="http://help.github.com/win-set-up-git/">article</a> from the GitHub folks on installing and using git. They have instructions on installing git on Windows, Mac, and Linux, and basic command usage, so you should be up and running in no time.</p>
+
+<p>With git installed, we can now clone the PHPFog remote repository. First change directories to the root directory where you'll be working on this application. Since I'm working on Windows with WAMP, in the Git Bash client, I changed directories to the WAMP applications directory.</p>
+
+<pre><code>cd /c/wamp/apps</code></pre>
+
+<p>Now if our SSH keys are setup correctly, we can clone the remote PHPFog repository. Click on the <q>Source Code</q> tab in sidebar and copy the git clone command and paste the command shown for your application</p>
+
+<div class="figure">
+ <img src="/assets/images/2011/12/source-code-screenshot-medium.png" />
+</div>
+
+<pre><code>git clone git@git01.phpfog.com:hello-ci.phpfogapp.com</code></pre>
+
+<p>Replace <q>hello-ci</q> with the name of your application. This creates the following directory on my machine:</p>
+
+<pre><code>/c/wamp/apps/hello-ci.phpfogapp.com</code></pre>
+
+<p>The only source file in this directory should be an index.php file that prints out "Hello World" (the default file you get for Custom Apps in PHPFog).</p>
+
+<p>At this point, if you are developing locally on your own machine, to make sure things are in place and setup correctly, we would need a local web server setup with PHP (and MySQL if you're going to use a database backend at some point). These days, regardless of what platform you're on, setting up Apache, PHP, and MySQL isn't super-difficult, and there's definitely a <a href="#lamp-setup">a lot of information</a> you can find on the Internet for your platform. Developing on your local machine makes it easier to see how code changes affect your application; otherwise you would have to commit and push changes to your remote PHPFog repository before your changes take effect.</p>
+
+<p>Since I happen to be on a Windows machine running WAMP while writing this article, I added an alias for hello-ci in WAMP and then opened this URL in my browser:</p>
+
+<pre><code>http://localhost/hello-ci/</code></pre>
+
+<p>The URL you visit will differ depending on how you setup your local environment. You should see the same "Hello World" output in your browser.</p>
+
+<p>The next step is to add the CodeIgniter framework files to the repository and push the code to the remote PHPFog repository. Keep in mind, as mentioned earlier, if you choose the CodeIgniter option when creating the application instead of the Custom App option, you would be done already and could skip the next section. Using the Custom App option lets us get our hands slightly dirty and we can use the latest version of the CodeIgniter framework which might be important in some cases.</p>
+
+<h3>CodeIgniter</h3>
+<p>You can download the CodeIgniter framework from the CodeIgniter website - the current version as of this writing is 2.1.0. The CodeIgniter source is also currently hosted on <a href="https://github.com/EllisLab/CodeIgniter">GitHub</a>. Either way, you'll end up with a .zip file with the CodeIgniter framework. In your application directory, unzip the CodeIgniter zip file:</p>
+
+<pre><code>unzip CodeIgniter_2.1.0.zip</code></pre>
+
+<p>You'll end up with a directory called CodeIgniter_2.1.0. Move all the files in the CodeIgniter_2.1.0 subdirectory up one directory to your application root, and then delete the now empty directory.</p>
+
+<pre><code>mv CodeIgniter_2.1.0/* .
+rmdir CodeIgniter_2.1.0</code></pre>
+
+<p>The only file that gets overwritten is the "Hello World" index.php file which is replaced by CodeIgniter's router file. If everything went well, we can check for the default CodeIgniter index page at the local URL for your application:</p>
+
+<div class="figure">
+ <img src="/assets/images/2011/12/hello-ci-screenshot-medium.png" />
+</div>
+
+<p>If everything looks good, we can commit our changes and then push them to the remote PHPFog repository. First, add our changes to the git staging area:</p>
+
+<pre><code>git add .</code></pre>
+
+<p>Then commit the changes:</p>
+
+<pre><code>git commit -m "Add CodeIgniter files."</code></pre>
+
+<p>Finally, push the changes to the PHPFog remote repository:</p>
+
+<pre><code>git push origin master</code></pre>
+
+<p>Now when we visit our PHPFog application URL, we should see the same default CodeIgniter page that we saw on our local machine:</p>
+
+<div class="figure">
+ <img src="/assets/images/2011/12/hello-ci-screenshot-medium.png" />
+</div>
+
+<h3>Next Steps</h3>
+
+<p>At this point, if you're also new to CodeIgniter, you can move on to the CodeIgniter <a href="http://codeigniter.com/user_guide/">User Guide</a>, which will get you familar with building web applications with the CodeIgniter framework. There are also a number of <a href="http://speckyboy.com/2011/06/20/codeigniter-toolbox-essential-tutorials-and-resources/">online resources</a> on using CodeIgniter, though there aren't many up to date books to read unfortunately.</p>
+
+<p>If you're interested in exploring more of PHPFog, they have <a href="http://docs.phpfog.com/">documentation</a> and a <a href="http://community.phpfog.com/">community</a> forum that can help answer your questions. The service is still evolving and new features continue to be added, so their <a href="http://blog.phpfog.com/">blog</a> is also a good way to keep up with new developments. If you want to deploy a production application, I would read their description of the <a href="http://phpfog.com/platform">platform</a> and their <a href="http://docs.phpfog.com/index.php/features/article/what_you_need_to_know">article on scaling</a> to see if PHPFog meets your needs.</p>
+
+<h3 id="references">References and Further Reading</h3>
+
+<h4>PHPFog</h4>
+<ul class="references">
+ <li><a href="http://www.phpfog.com">PHPFog</a>. Retrieved December, 2011.<br />There doesn't seem to be too much 3rd party information on the web about using PHPFog, so see their <a href="http://docs.phpfog.com/">documentation</a>, <a href="http://community.phpfog.com/">community forum</a>, and <a href="http://blog.phpfog.com/">blog</a> for definitive information for now.</li>
+</ul>
+
+<h4>Git</h4>
+<p>The Git Community Book and Pro Git are two fairly comprehensive references on using git.</p>
+<ul class="references">
+ <li><a href="http://help.github.com/">Help.GitHub - Welcome</a>. Retrieved December 2011.<br />Easy to follow tutorial on Git that starts with the basics and then moves on to more advanced usage.</li>
+ <li><a href="http://book.git-scm.com/">Git Community Book</a>. Retrieved December 2011.</li>
+ <li>Chacon, Scott. <a href="http://progit.org/book/">Pro Git</a>. Retrieved December 2011.</li>
+</ul>
+
+<h4>CodeIgniter</h4>
+<ul class="references">
+ <li><a href="http://codeigniter.com/">CodeIgniter</a>. Retrieved 2011.<br />Also see their <a href="http://codeigniter.com/user_guide/">User Guide</a>, <a href="http://codeigniter.com/forums/">forums</a>, and <a href="http://codeigniter.com/wiki/">wiki</a>.</li>
+ <li>Mokhov, Oleg. <a href="http://speckyboy.com/2011/06/20/codeigniter-toolbox-essential-tutorials-and-resources/">CodeIgniter Toolbox - Essential Tutorials and Resources</a>. Retrieved December 2011.<br />There currently aren't many tutorials for CodeIgniter 2, but most older CodeIgniter tutorials will work with a bit of modification (e.g. <a href="http://codeigniter.com/forums/viewthread/180347/#853909">new constructor calls</a>). This article from Mokhov lists a number of good CodeIgniter references.</li>
+</ul>
+
+<h4>Background Information and Setup Help</h4>
+<h5 id="lamp-setup">LAMP Setup</h5>
+<p></p>
+<ul class="references">
+ <li><a href="http://www.apachefriends.org/en/xampp.html">XAMPP</a>. Retrieved December 2011.<br />One click installer for Apache, PHP, and MySQL for OSX, Linux, and Windows.</li>
+ <li><a href="http://www.wampserver.com/">WampServer</a>. Retrieved December 2011.<br />Windows only one click installer for Apache, PHP, and MySQL.</li>
+ <li><a href="www.mamp.info">MAMP</a>. Retrieved December 2011.<br />Mac OSX one click installer for Apache, PHP, and MySQL.</li>
+ <li><a href="http://articles.slicehost.com/ubuntu-10">Ubuntu Lucid Slice setup from base Slice install to fully working, secure server.</a>. Retrieved December 2011.<br />A series of articles from SliceHost on setting up basic server software on Ubuntu 10.x, which is still applicable to Ubuntu 11.x. More involved and time-consuming than the one click installers, but also a lot more interesting to setup. There are detailed articles on Apache, PHP, and MySQL setup.</li>
+</ul>
+
+<h5>Ruby Web Application Frameworks</h5>
+<p>Three of the more popular Ruby web application frameworks including Rails, probably the most popular.</p>
+<ul class="references">
+ <li><a href="http://rubyonrails.org/">Ruby on Rails</a>. Retrieved December 2011.</li>
+ <li><a href="http://www.merbivore.com/">Merb</a>. Retrieved December 2011.</li>
+ <li><a href="http://www.sinatrarb.com">Sinatra</a>. Retrieved December 2011.</li>
+</ul>
+
+<h5>PHP Web Application Frameworks</h5>
+<p>These are just a few of the more popular PHP frameworks - see the first reference from Coetzee for hints on what to consider when comparing frameworks.
+<ul class="references">
+ <li>Coetzee, Christof. <a href="http://www.christofcoetzee.co.za/zend-framework-vs-codeigniter-vs-cakephp-vs-others">Zend Framework vs Codeigniter vs CakePHP vs others</a>. Retrieved December 2011.</li>
+ <li><a href="http://www.cakephp.org">CakePHP</a>. Retrieved December 2011.</li>
+ <li><a href="http://www.codeigniter.com">CodeIgniter</a>. Retrieved December 2011.</li>
+ <li><a href="http://www.zend.com">Zend</a>. Retrieved December 2011.</li>
+</ul>
+
+ </div>
+ </section>
+ </div>
+ <footer>
+ <div class="footer-inner">
+ <p>&copy; 2011 HellaRobots</p>
+ </div>
+ </footer>
+ </div>
+ </body>
+</html>
View
347 server/2012/01/06/blogging-with-jekyll-quickstart.html
@@ -0,0 +1,347 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>: Hella Robots</title>
+ <link rel="stylesheet" media="screen" href="/assets/css/master.css"/>
+
+ <!-- enable HTML5 elements in IE7+8 -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <script type="text/javascript">
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-25803931-1']);
+ _gaq.push(['_setDomainName', 'hellarobots.com']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
+ </head>
+ <body id="home">
+ <div id="container">
+ <header class="group">
+ <div class="header-inner">
+ <h1 class="logo"><a href="/">Hella Robots.</a></h1>
+ <nav class="main-nav">
+ <ul>
+ <li><a href="/">home</a></li>
+ <li><a href="/projects.html">projects</a></li>
+ <li><a href="/blog.html">blog</a></li>
+ <li><a href="/#about">about</a></li>
+ </ul>
+ </nav>
+ </div>
+ </header>
+ <div id="content">
+ <section id="main" class="group">
+ <div class="span16 first">
+ <h2>Blogging With Jekyll Quickstart</h2>
+<p>If you want to blog these days, you have a number of choices. You can use a free hosted service like <a href="http://www.blogger.com">Google's Blogger</a> or the ever-hip <a href="http://www.tumblr.com">Tumblr</a>, or you can host your own blog using something like <a href="http://www.wordpress.org">Wordpress</a>. Or, if you want a simple setup with no databases or WYSIWIG editors, you can go the static site generator route using <a href="https://github.com/mojombo/jekyll">Jekyll</a>.</p>
+<p>We'll run through the basics of Jekyll so you can try it out too. This post will quickly cover just enough about installation, setup, <a href="https://github.com/mojombo/jekyll/wiki/yaml-front-matter">YAML Front Matter</a>, writing blog posts, and deploying on GitHub for you to get started. For definitive information see the <a href="https://github.com/mojombo/jekyll">README</a> and <a href="https://github.com/mojombo/jekyll/wiki">wiki</a> on the project's GitHub page.</p>
+<p>Feel free to download the code for this example on GitHub.</p>
+
+<div class="download">
+ <a href="https://github.com/rsese/jekyll-quickstart" class="std-btn download-btn">View Code on GitHub</a>
+</div>
+
+<h3>The Setup</h3>
+<p>This article was written using Ubuntu 11.10 running under VMware Player on Windows 7. The version of Ruby is:</p>
+
+<pre><code>robert@ubuntu:~/projects$ ruby -v
+ruby 1.9.3p0 (2011-10-30 revision 33570) [i686-linux]</code></pre>
+
+<h3>What's the Deal With Jekyll?</h3>
+<p>Jekyll is a Ruby static site generator; it's code that takes input data like what layout you want to use, what page title to use, and the actual page content you're trying to publish, and it generates an HTML page. In particular, Jekyll is useful for writing blog posts. Once you establish the structure of your posts (i.e. the layout), you can concentrate on just writing the actual content of your post. What you're left with is just static content that you can post on any webserver without having to worry about things like setting up a database to store your posts, because your posts are just files.</p>
+<p>This approach isn't for everyone of course, but it's definitely worth giving a try. Jekyll was create by <a href="http://tom.preston-werner.com">Tom Preston-Werner</a> of GitHub fame, and it is also used by GitHub for <a href="http://pages.github.com/">GitHub Pages</a>. GitHub Pages can be used for both a blog and project pages on GitHub, and we'll be using it publish a blog to the web using git and GitHub. This setup allows you to quickly and easily setup and publish a blog or website.</p>
+
+<h3>Installation and Setup</h3>
+<p>Installing Jekyll is pretty simple:</p>
+
+<pre><code>robert@ubuntu:~/projects$ gem install jekyll
+</code></pre>
+
+<p>There are other features you can install, but we'll stick with the default setup (see the <a href="https://github.com/mojombo/jekyll/wiki/install">Install</a> page on the Jekyll wiki for more details on adding features like syntax highlighting in your posts). Now we can use the <code>jekyll</code> command at the command line.</p>
+
+<h4>Jekyll Setup</h4>
+<p>When you start a project with Jekyll, you need to create a particular layout that Jekyll understands. We'll just reference the Jekyll <a href="https://github.com/mojombo/jekyll/wiki/Usage">Usage instructions</a> directly to show you the layout you'll need to start with:</p>
+
+<pre>.
+|-- _config.yml
+|-- _includes
+|-- _layouts
+| |-- default.html
+| `-- post.html
+|-- _posts
+| |-- 2007-10-29-why-every-programmer-should-play-nethack.textile
+| `-- 2009-04-26-barcamp-boston-4-roundup.textile
+|-- _site
+`-- index.html
+</pre>
+
+<p>From the top down:</p>
+
+<ul>
+ <li><strong>_config.yml:</strong> YAML formatted configuration file that can hold information like how many posts to display per page or what base URL to serve your site from. You can start with an empty file, and Jekyll will just use default settings.</li>
+ <li><strong>_includes/:</strong> Put any partials (reusable bits of code) here so you can use them in your layouts and posts. You can start with nothing in this directory, and as you create more and more posts or if you decide to have multiple layouts, you'll find that you can extract common code into partials.</li>
+ <li><strong>_layouts/:</strong> Put the templates for your posts and any other content you want to publish. You can specify what layout to use for individual posts/files. In your posts, you use the tag <code>&#123;&#123; content &#125;&#125;</code> to insert the post content into a layout.</li>
+ <li><strong>_posts/:</strong> Put your blog posts into this directory. Again, these are just HTML, Markdown or Textile files, and they are just the content part of the post. The file names should be of the format <code>year-month-day-title.markupextension</code>. So if you created a blog post in HTML called "Hello World" published on January 1, 2012, you would name the file <q>2012-01-01-hello-world.html</q>.</li>
+ <li><strong>_site/:</strong> Jekyll puts it output in this directory. The content in this directory is your site in HTML format.</li>
+ <li><strong>index.html:</strong> The root page of your blog.</li>
+</ul>
+
+<p>So to get started right away, you only really need to create two layouts, your first blog post, and the root page for your blog. Any other directories will be copied over by Jekyll, so you could have an <code>assets</code> directory with <code>images</code> and <code>css</code> subdirectories to hold your images and stylesheets.</p>
+
+<h4>YAML Front Matter</h4>
+<p>Jekyll will process files only if they have YAML front matter, which just looks like this:</p>
+
+<pre><code>---
+layout: post
+title: Hello World
+---</code></pre>
+
+<p>In the YAML front matter, you specify variable name/value pairs in between three dash characters, and these variables become available in your layout and posts using liquid tags. For example, to access the <code>title</code> you would use this tag - <code>&#123;&#123; page.title &#125;&#125;</code>.</p>
+
+<p>The <code>layout</code> and <code>title</code> variables are all you really need to get started. You'll use the <code>title</code> in your layout to specify the blog post HTML page title, and you use the <code>layout</code> variable to tell Jekyll which layout (from your <code>_layouts</code> directory) to use for the file being processed.</p>
+
+<h3>Writing Your First Blog Post</h3>
+<p>Now you should know enough to get started using Jekyll. We'll start by creating the directory structure discussed earlier for our blog, and we'll create everything in a directory called <code>jekyll-quickstart</code>:</p>
+
+<pre><code>robert@ubuntu:~/projects$ mkdir jekyll-quickstart
+robert@ubuntu:~/projects$ cd jekyll-quickstart
+robert@ubuntu:~/projects/jekyll-quickstart$ mkdir {_layouts,_posts,_site}
+</code></pre>
+
+<p>Then we'll create an empty configuration file.</p>
+
+<pre><code>robert@ubuntu:~/projects/jekyll-quickstart$ touch _config.yml</code></pre>
+
+<p>Since it's empty, Jekyll will just use default settings, but it's good to have it when we're starting out since we'll be checking it in with git. As you continue working with Jekyll, if you have the need to set configuration options in you <code>_config.yml</code> file. See the <a href="https://github.com/mojombo/jekyll/wiki/configuration">Configuration</a> page on the Jekyll project page for more information.</p>
+
+<p>Now that we have the minimal layout done, we can create our two layouts; one for the blog post index, and one for our blog posts. Since we're mainly interested in Jekyll, we'll keep things simple. Our index layout looks like this:</p>
+
+<pre><code>---
+layout: default
+title: Hello World Blog
+---
+
+&lt;!DOCTYPE html&gt;
+&lt;html lang=&quot;en&quot;&gt;
+&lt;head&gt;
+&lt;title&gt;Hello World Blog&lt;/title&gt;
+&lt;link rel=&quot;stylesheet&quot; media=&quot;screen&quot; href=&quot;/assets/css/master.css&quot;/&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;div id=&quot;container&quot;&gt;
+ &lt;header class=&quot;group&quot;&gt;
+ &lt;div class=&quot;header-inner&quot;&gt;
+ &lt;h1 class=&quot;logo&quot;&gt;&lt;a href=&quot;/&quot;&gt;Hello World Blog.&lt;/a&gt;&lt;/h1&gt;
+ &lt;/div&gt;
+ &lt;/header&gt;
+ &lt;div id=&quot;content&quot;&gt;
+
+ &lt;/div&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre></code>
+
+<p>Save this file in your <code>_layouts</code> directory as <code>default.html</code>. This layout template will be used for our blog home page, which will just be an index of all our blog posts. You can see that the layout is essentially just everything about the HTML page except the actual content, which we'll fill in with our index page.</p>
+
+<p>The other layout we want to create, is the layout for our blog posts. Because our example is pretty simple, the same basic layout we created for our index page will work fine for our posts. Copy the <code>default.html</code> layout you created to a file called <code>post.html</code>:
+
+<pre><code>robert@ubuntu:~/projects/jekyll-quickstart$ cp _layouts/default.html _layouts/post.html
+</code></pre>
+
+<p>So if you want to have a slightly different layout for your posts (e.g. you want your blog posts to have a sidebar), you would change your <code>post.html</code> layout. And if you had a particular post that you wanted to layout differently than any other post, you can create another layout just for that post, and then you would connect the post to the layout in the YAML front matter. Just to add a tiny bit of variety to our layouts, we'll add a bit of HTML to our <code>post.html</code> layout, which adds a link back to the blog index page at the end of each post. Open <code>_layouts/post.html</code> and change the <code>&lt;div&gt;</code> with <code>id="content"</code> to look like this:</p>
+
+<pre><code>.
+.
+.
+&lt;div id=&quot;content&quot;&gt;
+ &lt;section id=&quot;main&quot; class=&quot;group&quot;&gt;
+ &#123;&#123; content&#125;&#125;
+ &lt;div&gt;
+ &lt;a href=&quot;/&quot;&gt;Back Home&lt;/a&gt;
+ &lt;/div&gt;
+ &lt;/section&gt;
+&lt;/div&gt;
+.
+.
+.</code></pre>
+
+<h4>Creating the Index Page</h4>
+<p>Now that we have our layouts, we'll start by creating our blog home page, which will just be a list of all our posts. Jekyll uses <a href="http://liquidmarkup.org/">Liquid</a> for template processing, and you can read more about the different tags you can use with Jekyll at the <a href="https://github.com/mojombo/jekyll/wiki/liquid-extensions">Liquid Extensions</a> page of the Jekyll project. For our index page, we'll just need a few tags and one filter.</p>
+
+<p>We'll start by using the <code>for</code> tag to loop through all our posts:</p>
+
+<pre><code>&lt;ul&gt;
+&#123;% for post in site.posts %&#125;
+&lt;li&gt;...&lt;/li&gt;
+&#123;% endfor %&#125;
+&lt;/ul&gt;</code></pre>
+
+<p>You can probably guess that this code just loops through all our sites posts, and we're going to populate an unordered list with information from each of our blog posts (everything in our <code>_posts</code> directory). We'll fill in the loop with each post date and title:</p>
+
+<pre><code>&lt;span class="post-date"&gt;&#123;&#123; post.date | date_to_string &#125;&#125;&lt;/span&gt; &lt;a href="&#123;&#123; post.url &#125;&#125;"&gt;&#123;&#123; post.title &#125;&#125;&lt;/a&gt;</code></pre>
+
+<p>Jekyll makes a lot of data available to you when processing blog posts, and you use Liquid tags to grab this information. In this case, we're using date, title, and URL of each blog post. We also use a Jekyll specific Liquid filter <code>date_to_string</code> that converts our post date to a string for output. See the <a href="https://github.com/mojombo/jekyll/wiki/template-data">Template Data</a> page on the Jekyll project page for a complete list of all the data available to you.</p>
+
+<h4>Add Some CSS</h4>
+<p>We won't spend too much time on this point, but just to add a little bit of style to this blog so as not to look too plain, we'll add some CSS to our blog. Adding the CSS also demonstrates how we can add whatever other directories we want to our Jekyll site layout (aside from the necessary directories like the <code>_layouts</code> directory), and they are copied over to the <code>_site</code> directory where we can reference them in our posts and layouts.</p>
+
+<p>If you noticed in our <code>default.html</code> and <code>post.html</code> layouts, we have a link to our <code>master.css</code> file, which is in the <code>assets/css</code> directory:</p>
+
+<pre><code>&lt;link rel="stylesheet" media="screen" href="/assets/css/master.css"/&gt;</code></pre>
+
+<p>You'll of course need to create these directories first:</p>
+
+<pre><code>robert@ubuntu:~/projects/jekyll-quickstart$ mkdir -p assets/css</code></pre>
+
+<p>When we run Jekyll later on, it will copy over our <code>assets</code> directory and the <code>css</code> subdirectory. You can grab the <a href="http://github.com/rsese/jekyll-quickstart">CSS</a> at the <a href="http://github.com/rsese/jekyll-quickstart">GitHub repository</a> for this project.</p>
+
+<h4>Writing Our First Post</h4>
+<p>We don't have any posts yet, so let's write one before we run Jekyll and check out our blog. Remember that you can write your posts in HTML, Markdown, and Textile; our first post is just going to say "Hello World", so we'll just stick with HTML. We'll date our post for January 1, 2012, so we'll name the file for our post <code>_posts/2012-01-01-hello-world.html</code>:</p>
+
+<pre><code>---
+layout: post
+title: Hello World
+---
+
+&lt;h1&gt;Hello World!&lt;/h1&gt;
+&lt;p&gt;
+Bacon ipsum dolor sit amet pastrami ribeye turducken short loin
+biltong. Kielbasa t-bone ham hock short ribs, sausage ribeye prosciutto
+salami sirloin. Pancetta rump pork loin, prosciutto short loin bacon pork
+pork chop andouille jerky t-bone meatball shank. Meatloaf fatback pork short
+loin andouille. Sausage pork chop prosciutto tail turkey ball tip. Jowl
+shoulder jerky beef ribs hamburger bacon, short ribs leberkase flank
+meatball filet mignon spare ribs brisket sausage. Swine meatball pancetta
+t-bone shoulder, corned beef frankfurter pork.
+&lt;/p&gt;</pre></code>
+
+<p>We added a little <a href="http://www.baconipsum.com">Bacon Ipsum</a> to fill out our post. Now we have everything we need to run Jekyll.</p>
+
+<h3>Using Jekyll</h3>
+<p>Compiling our Jekyll site is very simple. Just run <code>jekyll</code> from the command line in the root directory of your Jekyll site:</p>
+
+<pre><code>robert@ubuntu:~/projects/jekyll-quickstart$ jekyll
+WARNING: Could not read configuration. Using defaults (and options).
+Invalid configuration - /home/robert/projects/jekyll-quickstart/_config.yml
+
+Building site: /home/robert/projects/jekyll-quickstart -> /home/robert/projects/jekyll-quickstart/_site
+Successfully generated site: /home/robert/projects/jekyll-quickstart -> /home/robert/projects/jekyll-quickstart/_site
+</code></pre>
+
+<p>This will compile your site and generate its output in the <code>_site</code> directory. Don't mind the <code>WARNING</code> - Jekyll is just complaining that we have an empty configuration file and that processing will continue with default settings. Once you add any configuration you need for you site to your <code>_config.yml</code> file, this warning will go away.</p>
+
+<p>You can now run Jekyll's bundled web server to check out your site:</p>
+
+<pre><code>robert@ubuntu:~/projects/jekyll-quickstart$ jekyll --server
+WARNING: Could not read configuration. Using defaults (and options).
+Invalid configuration - /home/robert/projects/jekyll-quickstart/_config.yml
+Building site: /home/robert/projects/jekyll-quickstart -> /home/robert/projects/jekyll-quickstart/_site
+Successfully generated site: /home/robert/projects/jekyll-quickstart -> /home/robert/projects/jekyll-quickstart/_site
+[2012-01-06 00:00:56] INFO WEBrick 1.3.1
+[2012-01-06 00:00:56] INFO ruby 1.9.3 (2011-10-30) [i686-linux]
+[2012-01-06 00:00:56] WARN TCPServer Error: Address already in use - bind(2)
+[2012-01-06 00:00:56] INFO WEBrick::HTTPServer#start: pid=9462 port=4000</code></pre>
+
+<p>Your site will be available at <code>localhost:4000</code>, and if everything went well, you should see your blog index page:</p>
+
+<div class="figure">
+ <img src="/assets/images/2012/01/jekyll-quickstart-index.png" />
+</div>
+
+<p>If you click on the <code>Hello World</code> link you should see the post that we wrote earlier:</p>
+
+<div class="figure">
+ <img src="/assets/images/2012/01/hello-world-post.png" />
+</div>
+
+<p>Notice the link back to the blog home page, so we know that our <code>_layouts/post.html</code> layout is being used.</p>
+
+<p>To verify that our index page will actually loop through all our posts, you can create a couple of more posts. I created one title "Hello Again" and another called "Bye For Now". Run <code>jekyll</code> again so that the new posts are processed, start the server with <code>jekyll --server</code> (if it's not still running; if you start the server in another terminal, you can leave it running, and any changes you make will be visible when you refresh the page), and you should see your new posts listed on the index page:</p>
+
+<div class="figure">
+ <img src="/assets/images/2012/01/updated-blog-index.png" />
+</div>
+
+
+<p>The last thing you'll want to do is publish your blog. You can use some free webhost, or maybe you already have a hosting service, and you could deploy your <code>_site</code> directory there. Or you can go the easy route and just use GitHub to publish your blog.</p>
+
+<h3>Deploying on GitHub</h3>
+<p>If you're a GitHub user and you want to get your blog up quickly, GitHub makes it pretty easy for you. If you don't have one yet, just give in and <a href="https://github.com/signup/free">create an account</a> like everyone else (just kidding, there's are other good options for your source control needs like <a href="https://bitbucket.org/">bitbucket</a>). The only other requirement is that you have git installed and you're at least familiar with basic git usage. We won't cover that that here as there's quite a few good <a href="http://help.github.com/">resources</a> on using git.</p>
+
+<p>The one thing you need to note from your account is your username. Then all you need to do is create a repository called <code>username.github.com</code>, where <code>username</code> is your GitHub username. Then in the root directory of your Jekyll site, <code>init</code> a repository:</p>
+
+<pre><code>robert@ubuntu:~/projects/jekyll-quickstart$ git init</pre></code>
+
+<p>Before we add and commit the code, we'll create a small <code>.gitignore</code> file so we track the generated site in the <code>_site</code> directory (since jekyll will be run on our repository through GitHub Pages). Since I use <a href="http://www.vim.org/">vim</a>, I also add an entry for the temp files created by my editor:</p>
+
+<pre><code>*.swp
+_site/</code></pre>
+
+<p>Now you can <code>add</code> and <code>commit</code> your code:</p>
+
+<pre><code>robert@ubuntu:~/projects/jekyll-quickstart$ git add .
+robert@ubuntu:~/projects/jekyll-quickstart$ git commit -m "Initial commit."</pre></code>
+
+<p>Add a remote reference to your GitHub repository:</p>
+
+<pre><code>robert@ubuntu:~/projects/jekyll-quickstart$ git remote add origin git@github.com:rsese/rsese.github.com.git</pre></code>
+
+<p>Finally, <code>push</code> your code to GitHub:</p>
+
+<pre><code>robert@ubuntu:~/projects/jekyll-quickstart$ git push -u origin master</pre></code>
+
+<p>It takes few minutes for your site to become available, but eventually, if you visit <code>http://username.github.com</code>, you should see your blog index page. And the great thing is, the only thing you need to do to publish a blog post is to <code>add</code>, <code>commit</code>, and <code>push</code> your code, and it will be added to your blog.</p>
+
+<h3>References and Further Reading</h3>
+<h4>Background Information</h4>
+<p>See the GitHub project page for definitive information on Jekyll.</p>
+<ul class="references">
+ <li><a href="https://github.com/mojombo/jekyll">mojombo/jekyll - GitHub</a>. Retrieved December 2011.<br />Official GitHub project page - should be your first stop for definitive information on Jekyll. See especially the pages on <a href="https://github.com/mojombo/jekyll/wiki/Usage">Usage</a>, <a href="https://github.com/mojombo/jekyll/wiki/yaml-front-matter">YAML front matter</a>, <a href="https://github.com/mojombo/jekyll/wiki/Configuration">configuration</a>, <a href="https://github.com/mojombo/jekyll/wiki/Template-Data">Template Data</a>, and <a href="https://github.com/mojombo/jekyll/wiki/Liquid-Extensions">Liquid Extensions</a>.</li>
+ <li><a href="http://pages.github.com/">Introduction to Pages</a>. Retrieved December 2011.<br />Introduction to GitHub pages and how to deploy your content for your user page or project page using git and GitHub.</li>
+ <li>Preston-Werner, Tom. <a href="http://tom.preston-werner.com/2008/11/17/blogging-like-a-hacker.html">Blogging Like a Hacker</a>. Published November 17, 2008. Retrieved December 2011.<br />Preton-Werner's announcement of and rationale behind Jekyll.</li>
+ <li><a href="https://github.com/mojombo/jekyll/wiki/Sites">Sites</a>. Retrieved December 2011.<br />A big list of sites that are built with Jekyll; there's a lot of interesting sites to peruse, and they all have links to the source code to give you a number of ideas for developing your own blog.</li>
+ <li><a href="http://liquidmarkup.org/">Liquid</a>. Retrieved December 2011.<br />Home page for the Liquid templating language used by Jekyll for template processing.</li>
+</ul>
+
+<h4>Articles and Tutorials</h4>
+<p>There is a good number of articles on using Jekyll, so feel free to use your favorite search engine and search for "<a href="http://us.yhs4.search.yahoo.com/yhs/search;_ylt=A0oGdOYArAhPhmcAJMGl87UF;_ylc=X1MDMjE0MjQ3ODk0OARfcgMyBGZyA2FsdGF2aXN0YQRuX2dwcwMwBG9yaWdpbgNzeWMEcXVlcnkDYmxvZ2dpbmcgd2l0aCBqZWt5bGwEc2FvAzE-?p=blogging+with+jekyll&fr=altavista&fr2=sfp&iscqry=">blogging with Jekyll</a>" (you'll also find a lot of posts about why someone decided to give Jekyll a try, and how they customized their setup). Here's a couple of good resources to help you work with Jekyll.</p>
+<ul class="references">
+ <li>Sornberger, Kevin. <a href="http://www.ksornberger.com/blog/blogging-with-jekyll-and-github/">Blogging With Jekyll and Github</a>. Published March 1, 2011. Retrieved January 2011.<br />Nice concise hands-on introduction to using Jekyll and GitHub.</li>
+ <li>Burgess, Andrew. <a href="http://net.tutsplus.com/tutorials/other/building-static-sites-with-jekyll/">Building Static Sites with Jekyll</a>. Retrieved January 2011.<br />A bit more detailed walkthrough of how to build a site with Jekyll. The final product is a photo portfolio site with a bit more emphasis on the design of the site.</li>
+</ul>
+
+<h4>Related Projects</h4>
+<p>Two projects built off of Jekyll; Jekyll-Bootstrap gets you started with Jekyll quickly and gives you a good point to start from, while Octopress goes a bit further by giving you additional functionality out of the box.</p>
+<ul class="references">
+ <li><a href="http://jekyllbootstrap.com/">This is Jekyll-Bootstrap</a>. Retrieved December 2011.<br />Bootstrap project to get up and running with Jekyll quickly (e.g. takes care of the manual setup for you). Also has a great <a href="http://jekyllbootstrap.com/lessons/jekyll-introduction.html">introduction</a> to Jekyll as well.</li>
+ <li><a href="http://octopress.org/">Octopress</a>. Retrieved December 2011.<br />Another project that helps you get up and running with Jekyll, but Octopress also starts you off with a number of plugins and liquid filters out of the box as well as a default theme.</li>
+</ul>
+
+<h4>Git</h4>
+<p>The Git Community Book and Pro Git are two fairly comprehensive references on using git.</p>
+<ul class="references">
+ <li><a href="http://help.github.com/">Help.GitHub - Welcome</a>. Retrieved December 2011.<br />Easy to follow tutorial on Git that starts with the basics and then moves on to more advanced usage.</li>
+ <li><a href="http://book.git-scm.com/">Git Community Book</a>. Retrieved December 2011.</li>
+ <li>Chacon, Scott. <a href="http://progit.org/book/">Pro Git</a>. Retrieved December 2011.</li>
+</ul>
+
+
+ </div>
+ </section>
+ </div>
+ <footer>
+ <div class="footer-inner">
+ <p>&copy; 2011 HellaRobots</p>
+ </div>
+ </footer>
+ </div>
+ </body>
+</html>
View
15 server/README.markdown
@@ -0,0 +1,15 @@
+# Jekyll Quickstart
+
+## Description
+
+Starter code for getting up and running with Jekyll. Gives an example of the layout and files you'll need to start writing and publish a blog using git and GitHub.
+
+## References and Further Reading
+
+Jekyll's project home page:
+
+ https://github.com/mojombo/jekyll
+
+The author of Jekyll is Tom Preston-Werner:
+
+ http://tom.preston-werner.com/
View
336 server/assets/css/master.css
@@ -0,0 +1,336 @@
+/*
+ * Hella Robots master stylesheet
+ */
+
+/* [TODO]: mini-reset. replace with a real reset. */
+h1, h2, h3, h4, h5, div, p, ul, li, section, aside {
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ color: rgba(0,0,0, 0.75);
+ font-size: 100%;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ line-height: 1;
+ margin: 0;
+ padding: 0;
+}
+
+a:link,
+a:visited {
+ color: #F33;
+ font-weight: bold;
+ text-decoration: none;
+}
+
+a:hover {
+ color: #F33;
+ font-weight: bold;
+ text-decoration: underline;
+}
+
+em {
+ font-style: italic;
+}
+
+code {
+ background-color: #EEEEEE;
+ border: 1px solid #AAAAAA;
+}
+
+pre {
+ margin: 2em 1.5em;
+}
+
+pre code {
+ display: block;
+ line-height: 1.75;
+ overflow: auto;
+ padding: 15px;
+}
+
+#container {
+ /* bump down global font size. */
+ font-size: .95em;
+}
+
+#content {
+ margin: 0 auto;
+ padding: 25px 0 0;
+ width: 850px;
+}
+
+p {
+ margin-bottom: 1.3em;
+}
+
+header {
+ border-bottom: 1px dashed #000;
+ margin: 0;
+ padding: 10px 0;
+}
+
+header .logo {
+ float: left;
+ font-size: 2em;
+ margin: 0;
+ text-transform: uppercase;
+}
+
+header .logo a:link,
+header .logo a:hover,
+header .logo a:visited {
+ color: #000000;
+ text-decoration: none;
+}
+
+.main-nav ul {
+ float: right;
+ list-style-type: none;
+ margin-top: 10px;
+}
+
+.main-nav ul li {
+ float: left;
+ margin: 0 0 0 25px;
+}
+
+.main-nav ul li a:link,
+.main-nav ul li a:visited {
+ background-color: #333;
+ color: #FFF;
+ padding: 3px 6px;
+}
+
+.main-nav ul li a:hover {
+ background-color: #FFF;
+ color: #333;
+ padding: 3px 6px;
+ text-decoration: none;
+}
+
+.footer-inner,
+.header-inner {
+ margin: 0 auto;
+ width: 850px;
+}
+
+section {
+}
+
+#main {
+ line-height: 1.5;
+ margin: 0;
+ padding: 0;
+}
+
+#main h2 {
+ font-size: 1.75em;
+ margin-bottom: 0.2em;
+}
+
+#main h3,
+#main h4 {
+ margin-bottom: 0.75em;
+}
+
+#main h5 {
+ margin-bottom: 0.5em;
+ font-style: italic;
+}
+
+#main ul {
+ list-style-type: none;
+}
+
+#main ul li {
+ margin-bottom: 1em;
+}
+
+#sup-about p {
+ font-size: 1.25em;
+}
+
+.projects,
+.posts {
+ list-style-type: none;
+}
+
+.projects li,
+.posts li {
+ border-bottom: 1px dashed #999;
+ margin: 10px 0 13px 0;
+ padding-bottom: 13px;
+}
+
+.posts li p {
+ margin-bottom: 1em;
+}
+.projects li p {
+ margin-bottom: 0;
+}
+
+/*
+.posts li {
+ border-bottom: 0;
+ margin: 0 0 10px 0;
+ padding-bottom: 0;
+}
+*/
+
+.sidebar {
+ margin: 0;
+ padding: 0;
+}
+
+.sidebar h2 {
+ font-size: 1em;
+}
+
+footer {
+ border-top: 1px dashed #000;
+ margin-top: 30px;
+ text-align: center;
+}
+
+footer p {
+ font-size: 0.80em;
+ padding-top: 15px;
+}
+
+.hero {
+ margin-bottom: 30px;
+ position: relative;
+}
+
+.hero img {
+ border-bottom: 1px solid #000;
+ border-top: 1px solid #000;
+}
+
+.hero .overlay {
+ background-color: #4B4B4B;
+ background-color: rgba(75,75,75, 0.75);
+ color: #fff;
+ font-size: 0.85em;
+ line-height: 1.5;
+ margin-right: -10px;
+ padding: 20px 20px 10px 20px;
+ position: absolute;
+ right: 0;
+ top: 25px;;
+ width: 245px;
+}
+
+.figure {
+ margin: 1.75em 0;
+}
+
+.span5 {
+ width: 245px;
+}
+
+.span6 {
+ width: 300px;
+}
+
+.span11 {
+ width: 575px;
+}
+
+.span16 {
+ width: 850px;
+}
+
+.span5, .span6, .span11, .span16 {
+ display: inline;
+ float: left;
+ margin-left: 30px;
+}
+
+.first {
+ margin-left: 0;
+}
+
+.full {
+ clear: both;
+}
+
+
+/* miscellaneous
+----------------------------------------*/
+
+.hero .cite {
+ border-top: 1px dashed #ccc;
+ font-size: 0.85em;
+ padding-top: 1em;
+}
+
+.post-meta {
+ color: #999999;
+ font-size: .9em;
+ font-weight: normal;
+ margin-bottom: .8em;
+}
+
+.references {
+ list-style-type: none;
+ margin-bottom: 1.5em;
+}
+
+.references li {
+ margin-bottom: 10px;
+}
+
+.download {
+ margin-bottom: 30px;
+}
+
+.std-btn {
+ padding: 8px 12px;
+}
+
+.download-btn {
+ background-color: #FF3333;
+ border: 1px solid #FF5555;
+ color: #FFFFFF;
+}
+
+.download-btn:link,
+.download-btn:visited {
+ background-color: #FF3333;
+ border: 1px solid #FF7777;
+ color: #FFFFFF;
+ text-decoration: none;
+}
+
+.download-btn:hover {
+ background-color: #FF0000;
+ border: 1px solid #FF7777;
+}
+
+#main .coming-soon {
+ font-size: 65px;
+ font-weigth: normal;
+}
+
+
+/* clearfix */
+
+.group:after {
+ content: ".";
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+}
+
+* html .group {
+ height: 1%;
+}
+
+*:first-child+html .group {
+ min-height: 1px;
+}
+
View
BIN server/assets/images/2011/12/app-console-screenshot-medium.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN server/assets/images/2011/12/application-details-screenshot-medium.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN server/assets/images/2011/12/create-app-screenshot-medium.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN server/assets/images/2011/12/custom-app-screenshot-medium.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN server/assets/images/2011/12/hello-ci-screenshot-medium.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN server/assets/images/2011/12/source-code-screenshot-medium.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN server/assets/images/2011/12/ssh-keys-screenshot-medium.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN server/assets/images/2012/01/hello-world-post.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN server/assets/images/2012/01/jekyll-quickstart-index.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN server/assets/images/2012/01/updated-blog-index.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN server/assets/images/gort.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
72 server/blog.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>: Hella Robots</title>
+ <link rel="stylesheet" media="screen" href="/assets/css/master.css"/>
+
+ <!-- enable HTML5 elements in IE7+8 -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <script type="text/javascript">
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-25803931-1']);
+ _gaq.push(['_setDomainName', 'hellarobots.com']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
+ </head>
+ <body id="home">
+ <div id="container">
+ <header class="group">
+ <div class="header-inner">
+ <h1 class="logo"><a href="/">Hella Robots.</a></h1>
+ <nav class="main-nav">
+ <ul>
+ <li><a href="/">home</a></li>
+ <li><a href="/projects.html">projects</a></li>
+ <li><a href="/blog.html">blog</a></li>
+ <li><a href="/#about">about</a></li>
+ </ul>
+ </nav>
+ </div>
+ </header>
+ <div id="content">
+ <section id="main" class="group">
+ <div class="span16 first">
+ <div id="sup-blog" class="span11 first">
+ <h2>Blog</h2>
+ <ul>
+
+ <li>
+ <h3><span class="post-meta">06 Jan 2012</span> <a href="/2012/01/06/blogging-with-jekyll-quickstart.html">Blogging With Jekyll Quickstart</a></h3>
+ </li>
+
+ <li>
+ <h3><span class="post-meta">20 Dec 2011</span> <a href="/2011/12/20/up-and-running-on-phpfog-with-codeigniter.html">Up and Running on PHPFog with CodeIgniter</a></h3>
+ </li>
+
+ <li>
+ <h3><span class="post-meta">25 Nov 2011</span> <a href="/2011/11/25/reading-data-from-a-spreadsheet-with-roo.html">Reading Data From a Spreadsheet with Roo</a></h3>
+ </li>
+
+ </ul>
+</div>
+
+ </div>
+ </section>
+ </div>
+ <footer>
+ <div class="footer-inner">
+ <p>&copy; 2011 HellaRobots</p>
+ </div>
+ </footer>
+ </div>
+ </body>
+</html>
View
103 server/index.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Hella Robots</title>
+ <link rel="stylesheet" media="screen" href="/assets/css/master.css"/>
+
+ <!-- enable HTML5 elements in IE7+8 -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <script type="text/javascript">
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-25803931-1']);
+ _gaq.push(['_setDomainName', 'hellarobots.com']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
+ </head>
+ <body id="home">
+ <div id="container">
+ <header class="group">
+ <div class="header-inner">
+ <h1 class="logo"><a href="/">Hella Robots.</a></h1>
+ <nav class="main-nav">
+ <ul>
+ <li><a href="/">home</a></li>
+ <li><a href="/projects.html">projects</a></li>
+ <li><a href="/blog.html">blog</a></li>
+ <li><a href="/#about">about</a></li>
+ </ul>
+ </nav>
+ </div>
+ </header>
+ <div id="content">
+ <div class="hero">
+ <img src="/assets/images/gort.jpg" alt="Gort" />
+ <div class="overlay">
+ <p>Klaatu barata nikto. How many explosions just went off in your head?</p>
+ <p class="cite">Image via <a href="http://www.denofgeek.com/movies/234437/exclusive_pictorial_the_day_the_earth_stood_still_1951.html">Den of Geek</a>.</p>
+ </div>
+ </div>
+ <section id="main" class="group">
+ <div id="sup-blog" class="span11 first">
+ <h2>Blog</h2>
+ <ul class="posts">
+ <li>
+ <h3><a href="2012/01/06/blogging-with-jekyll-quickstart.html">Blogging With Jekyll Quickstart</a></h3>
+ <div class="post-meta">January 6, 2012</div>
+ <p>If you want to blog these days, you have a number of choices. You can use a free hosted service like <a href="http://www.blogger.com">Google's Blogger</a> or the ever-hip <a href="http://www.tumblr.com">Tumblr</a>, or you can host your own blog using something like <a href="http://www.wordpress.org">Wordpress</a>. Or, if you want a simple setup with no databases or WYSIWIG editors, you can go the static site generator route using <a href="https://github.com/mojombo/jekyll">Jekyll</a>.</p>
+ <p><a href="2012/01/06/blogging-with-jekyll-quickstart.html">Read more...</a></p>
+ </li>
+ <li>
+ <h3><a href="2011/12/20/up-and-running-on-phpfog-with-codeigniter.html">Up and Running on PHPFog with CodeIgniter</a></h3>
+ <div class="post-meta">December 20, 2011</div>
+ <p>If you're a web developer, chances are you've heard of or used Ruby on Rails to develop a web application. As a Ruby programmer, there are other options like Sinatra, but Rails is the dominant Ruby framework today (by at least one measure). PHP on the other hand has a number of MVC frameworks that you can experiment with. CakePHP, Zend, and CodeIgniter are just a few that come to mind; FuelPHP is a bit younger, but looks pretty interesting too.</p>
+ <p><a href="2011/12/20/up-and-running-on-phpfog-with-codeigniter.html">Read more...</a></p>
+ </li>
+ <li>
+ <h3><a href="2011/11/25/reading-data-from-a-spreadsheet-with-roo.html">Reading Data From a Spreadsheet with Roo</a></h3>
+ <div class="post-meta">November 25, 2011</div>
+ <p>Have you ever been given a spreadsheet full of data that you need to use in an application? Were you super not excited about copying and pasting the data from each cell for 2 hours? The roo gem can be your bff when you have to read data from a spreadsheet.</p>
+ <p><a href="2011/11/25/reading-data-from-a-spreadsheet-with-roo.html">Read more...</a></p>
+ </li>
+ </ul>
+</div>
+<div id="sup-projects" class="span5">
+ <h2>Projects</h2>
+ <ul class="projects">
+ <li>
+ <h3><a href="http://slis.hellarobots.com">SLIS Mobile</a></h3>
+ <p>JQuery Mobile, HTML, CSS, PHP.</p>
+ </li>
+ <li>
+ <h3><a href="https://github.com/rsese/lets-do-this">Let's Do This</a></h3>
+ <p>Rails, HTML, CSS.</p>
+ </li>
+ <li>
+ <h3><a href="http://www.jaguardesignstudio.com">Jaguar Design Studio Website</a></h3>
+ <p>HTML, CSS.</p>
+ </li>
+ </ul>
+</div>
+<div id="sup-about" class="span16 first">
+ <h2 id="about">About</h2>
+ <p>Robert is a web-ish developer who is interested in building websites, web applications, probably mobile applications. He is also a fan of libraries (the kind where you can check out books), and other things unrelated to computers. Robert's down with buzzwords like Ruby and the very same Ruby but <em>on Rails</em>, and he may have been exposed to a tiny bit of C, C++, and Java programming back in the day. Robert recently started using <a href="https://github.com/rsese">GitHub</a>, thinks you are all attractive people, and is enjoying speaking in the third person. Say <a href="mailto:hi@hellarobots.com">hello</a>.</p>
+</div>
+
+ </section>
+ </div>
+ <footer>
+ <div class="footer-inner">
+ <p>&copy; 2011 HellaRobots</p>
+ </div>
+ </footer>
+ </div>
+ </body>
+</html>
View
56 server/projects.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>: Hella Robots</title>
+ <link rel="stylesheet" media="screen" href="/assets/css/master.css"/>
+
+ <!-- enable HTML5 elements in IE7+8 -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <script type="text/javascript">
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-25803931-1']);
+ _gaq.push(['_setDomainName', 'hellarobots.com']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
+ </head>
+ <body id="home">
+ <div id="container">
+ <header class="group">
+ <div class="header-inner">
+ <h1 class="logo"><a href="/">Hella Robots.</a></h1>
+ <nav class="main-nav">
+ <ul>
+ <li><a href="/">home</a></li>
+ <li><a href="/projects.html">projects</a></li>
+ <li><a href="/blog.html">blog</a></li>
+ <li><a href="/#about">about</a></li>
+ </ul>
+ </nav>
+ </div>
+ </header>
+ <div id="content">
+ <section id="main" class="group">
+ <div class="span16 first">
+ <h2 class="coming-soon">Coming Soon</h2>
+<p>For now, you can see a list of some of the projects I've done on the <a href="/">home page</a>.</p>
+
+ </div>
+ </section>
+ </div>
+ <footer>
+ <div class="footer-inner">
+ <p>&copy; 2011 HellaRobots</p>
+ </div>
+ </footer>
+ </div>
+ </body>
+</html>

0 comments on commit db13490

Please sign in to comment.
Something went wrong with that request. Please try again.