The ChrisDev Bloghttp://blog.chrisdev.com/2016-01-22T00:00:00-04:00Introducing wagtail-cookiecutter-foundation2016-01-22T00:00:00-04:00Christopher Clarketag:blog.chrisdev.com,2016-01-22:introducing-wagtail-cookiecutter-foundation.html<div class="figure">
<img alt="Wagtail Cookiecutter Foundation" src="http://blog.chrisdev.com/images/wagtail-cookiecutter-foundation.jpg" />
</div>
<p>In this article we introduce you to <a class="reference external" href="http://wagtail-cookiecutter-foundation.readthedocs.org/en/latest/">wagtail-cookiecutter-foundation</a>, a <a class="reference external" href="https://github.com/audreyr/cookiecutter">Cookiecutter</a>
template for quickly generating <a class="reference external" href="https://djangoproject.com">Django</a> sites powered by <a class="reference external" href="https://wagtail.io">Wagtail</a> and
<a class="reference external" href="https://foundation.zurb.com">Zurb Foundation for Sites 6</a>. The websites generated with our
Cookiecutter are pretty full featured and come with most of the
components you are likely to need for the typical website project, including: various
kinds of top level menus (drop-down, off-canvas), feature sliders, photo galleries,
contact forms, various kinds of homepage designs, product and portfolio pages,
blog and events events module and so on. But its pretty easy to customize and include only the modules and components to match your project's requirements. For an idea of what to expect check out our live <a class="reference external" href="http://wagtail.chrisdev.com">demo</a> site.</p>
<p>Wagtail CMS has been described as:</p>
<blockquote>
<a class="reference external" href="http://www.revsys.com/blog/2015/apr/29/wagtail-best-django-cms/">The all around best and most flexible Django CMS currently available</a>.</blockquote>
<p>One of the big selling points for <a class="reference external" href="https://wagtail.io">Wagtail</a> is its easy of use especially for
non-technical end-users. Many of the content creators and editors we've
introduced to it tell us that <a class="reference external" href="https://wagtail.io">Wagtail</a> is especially easy understand and they are
quickly able to get useful work done. Indeed, many of these users have expressed
a clear preference for <a class="reference external" href="https://wagtail.io">Wagtail</a> over some of the more well known "brands" in the
Content Managenment world such as Wordpress and Drupal. Another strength of Wagtail, is the
flexibility of the underlying CMS model which allows for the representation of everything from
the most simple pages with a few media elements to more complex unstructured
pages where text may be interspersed with subheading, pull quotes, videos or
specialized content types like maps and charts. It is important to note that
<a class="reference external" href="https://wagtail.io">Wagtail</a> does not rely on any arcane plugins architecture but rather on
standard Python/Django modules, classes and methods. As a consequence, it
plays well with the other reusable applications in the Python/Django ecosystem
such as the <a class="reference external" href="http://www.django-rest-framework.org">Django Rest Framework</a>. There are also hooks into important tools
like <a class="reference external" href="https://github.com/elastic/elasticsearch">ElasticSearch</a>. Additionally, <a class="reference external" href="https://wagtail.io">Wagtail</a> comes with a built in "Form
builder" application that allows end users to build their own data collection forms.
<a class="reference external" href="https://wagtail.io">Wagtail</a> also has excellent Image and Document management tools.</p>
<p><a class="reference external" href="https://foundation.zurb.com">Zurb Foundation</a> is a <em>mobile first</em> responsive framework that provides
all the components required for building websites. These include a responsive
grid and HTML, JavaScript and CSS UI components, templates, and code snippets covering
typography, forms, buttons, navigation and other interface components.
While <a class="reference external" href="https://foundation.zurb.com">Zurb Foundation</a> may not be as popular as some other front-end
frameworks, we find that it provides a better platform for customization sites
and web apps. So while the out-of-the-box look and feel is
a "flat" design, a few tweaks to the underlying <a class="reference external" href="http://foundation.zurb.com/sites/docs/global.html">Sass</a> can yield some
pretty dramatic changes.</p>
<div class="section" id="up-and-running">
<h2>Up and Running</h2>
<p>To create a new <a class="reference external" href="https://djangoproject.com">Django</a> project based on wagtail-cookiecutter-foundation
you need to have <a class="reference external" href="https://github.com/audreyr/cookiecutter">Cookiecutter</a> installed on your machine. If you have not
installed it, then install it:</p>
<div class="highlight"><pre><span class="nv">$ </span>pip install cookiecutter
</pre></div>
<p>Note we always recommend that you installed Cookiecutter system wide, as you are bound to want to try our some of the other <a class="reference external" href="https://github.com/audreyr/cookiecutter#available-templates">cookiecutter templates</a> out there.</p>
<p>Next run cookiecutter against the wagtail-cookiecutter-foundation repo:</p>
<div class="highlight"><pre><span class="nv">$ </span>cookiecutter https://github.com/chrisdev/wagtail-cookiecutter-foundation.git
</pre></div>
<p>You will be prompted to answer the following questions:</p>
<div class="highlight"><pre>Cloning into <span class="s1">'wagtail-cookiecutter-foundation'</span>...
remote: Counting objects: 611, <span class="k">done</span>.
remote: Compressing objects: 100% <span class="o">(</span>13/13<span class="o">)</span>, <span class="k">done</span>.
remote: Total <span class="m">611</span> <span class="o">(</span>delta 3<span class="o">)</span>, reused <span class="m">0</span> <span class="o">(</span>delta 0<span class="o">)</span>, pack-reused 598
Receiving objects: 100% <span class="o">(</span>611/611<span class="o">)</span>, 423.98 KiB <span class="p">|</span> <span class="m">0</span> bytes/s, <span class="k">done</span>.
Resolving deltas: 100% <span class="o">(</span>264/264<span class="o">)</span>, <span class="k">done</span>.
Checking connectivity... <span class="k">done</span>.
project_name <span class="o">(</span>default is <span class="s2">"Wagtail Project"</span><span class="o">)</span>?
repo_name <span class="o">(</span>default is <span class="s2">"wagtail_project"</span><span class="o">)</span>?
version_control_system <span class="o">(</span>default is <span class="s2">"hg"</span><span class="o">)</span>?,
vcs_host <span class="o">(</span>default is <span class="s2">"bitbucket"</span><span class="o">)</span>?,
author_name <span class="o">(</span>default is <span class="s2">"Your Name"</span><span class="o">)</span>?
email <span class="o">(</span>default is <span class="s2">"Your email"</span><span class="o">)</span>?
description <span class="o">(</span>default is <span class="s2">"A short description of the project."</span><span class="o">)</span>?
timezone <span class="o">(</span>default is <span class="s2">"UTC"</span><span class="o">)</span>?
now <span class="o">(</span>default is <span class="s2">"2015/04/16"</span><span class="o">)</span>?
year <span class="o">(</span>default is <span class="s2">"2015"</span><span class="o">)</span>?
production_host_name <span class="o">(</span>default is example.org<span class="o">)</span>?
use_ssl_in_production <span class="o">(</span>default is <span class="nb">true</span><span class="o">)</span>?
staging_host_name <span class="o">(</span>default is staging.example.org<span class="o">)</span>?
use_vagrant_staging <span class="o">(</span>default is <span class="nb">true</span><span class="o">)</span>?
deploy_user_name <span class="o">(</span>default is django<span class="o">)</span>
django_admin_user <span class="o">(</span>default is my_admin_user<span class="o">)</span>
</pre></div>
<p>Enter the project and take a look around</p>
<div class="highlight"><pre><span class="nv">$ </span><span class="nb">cd </span>my_wagtail_project/
<span class="nv">$ </span>ls
</pre></div>
<p>Create a GitHub or Bitbucket repo for the project and push it there</p>
<div class="highlight"><pre><span class="nv">$ </span>git init
<span class="nv">$ </span>git add .
<span class="nv">$ </span>git commit -m <span class="s2">"first awesome commit"</span>
<span class="nv">$ </span>git remote add origin git@github.com:cclarke/my_wagtail_project.git
<span class="nv">$ </span>git push -u origin master
</pre></div>
</div>
<div class="section" id="development">
<h2>Development</h2>
<p>Before you start ensure that you've installed and got the following working.</p>
<ul class="simple">
<li><a class="reference external" href="https://pip.pypa.io/en/stable/">pip</a></li>
<li><a class="reference external" href="https://virtualenv.pypa.io/en/latest/">virtualenv</a>/<a class="reference external" href="https://docs.python.org/3/library/venv.html#module-venv">pyenv</a>/<a class="reference external" href="https://virtualenvwrapper.readthedocs.org/en/latest/">virtualenvwrapper</a></li>
<li><a class="reference external" href="http://postgresql.org">PostgreSQL</a></li>
<li><a class="reference external" href="https://nodejs.org/en/">node/npm</a>, <a class="reference external" href="http://git-scm.com">git</a> (and or <a class="reference external" href="https://www.mercurial-scm.org">mercurial</a>) and <a class="reference external" href="http://bower.io">bower</a></li>
</ul>
<p>Your project will contain a Makefile that allows you to setup your development
environment with a single command. To do this run:</p>
<div class="highlight"><pre>make all
</pre></div>
<p>This command will create your project's virtual environment,
install all pip dependencies, create
the development database, run migrations and load initial data to database,
install front-end dependencies and finally start the development server
for you. You can access your site at <strong>http://localhost:8000</strong>. The Admin
back-end is available at <strong>http://localhost:8000/admin/</strong>.</p>
<p>Your project will come with a set of application modules to use for building
the sites functionality including:</p>
<ul class="simple">
<li><tt class="docutils literal">pages</tt> - Different kinds of pages including, Homepage, Standard Pages, Faqs Page etc.</li>
<li><tt class="docutils literal">blog</tt> - Blog or site news</li>
<li><tt class="docutils literal">contact</tt> - Contact Page with included contact us form</li>
<li><tt class="docutils literal">events</tt> - Events</li>
<li><tt class="docutils literal">photo_gallery</tt> - Create photo galleries using wagtail tags</li>
<li><tt class="docutils literal">documents</tt> - Organize documents in folders using wagtail tags .</li>
<li><tt class="docutils literal">products</tt> - Ideal for a product or portfolio showcase</li>
<li><tt class="docutils literal">feeds</tt> - RSS/Atom feeds which support enclosures to work with services like Mailchimp and Flipboard</li>
<li><tt class="docutils literal">people</tt> - For the people in your organization or team.</li>
<li><tt class="docutils literal">faq</tt> - FAQ and answers.</li>
<li><tt class="docutils literal">utils</tt> - Various utility functions, templatetags and filters</li>
</ul>
<p>However, we take a modular approach so the can pick and choose the modules to
include the project by simple adjusting the <tt class="docutils literal">INSTALLED_APPS</tt> in settings.</p>
</div>
<div class="section" id="provisioning-and-deployment">
<h2>Provisioning and Deployment</h2>
<p>When you are ready to provision your Ubuntu production server, simply run:</p>
<div class="highlight"><pre>make provision
</pre></div>
<p>Running this commands will:</p>
<ul class="simple">
<li>Create a deployment user on the server to use for the project.</li>
<li>Create and download download a deployment key for use on services
like Github or Bitbucket</li>
<li>Install all the required Linux packages and libraries on the server.</li>
<li>Install and configure the latest version of <a class="reference external" href="http://postgresql.org">PostgreSQL</a>.</li>
<li>Install and configure <a class="reference external" href="http://redis.io">Redis</a> and <a class="reference external" href="https://github.com/elastic/elasticsearch">ElasticSearch</a>.</li>
<li>Setup basic security on the Linux box using <a class="reference external" href="https://help.ubuntu.com/community/UFW">UFW Firewall</a> and
<a class="reference external" href="http://www.fail2ban.org/wiki/index.php/Main_Page">fail2ban</a>.</li>
<li>Clone the project's VCS repository, setup a virtual environment and install
all the python and django dependencies required to run the site</li>
<li>Install and configure all required front-end dependencies</li>
<li>Configure and install a Celery worker process.</li>
<li>Install and configure an Nginx Virtaul Host for your site.</li>
<li>Install and configure your SSL certificate (if required) and ensure that
you can score an <em>A</em> in the popular <a class="reference external" href="https://www.ssllabs.com">SSL Labs</a> SSL server test.</li>
</ul>
<p>Need to deploy to a staging server? Run run:</p>
<div class="highlight"><pre>make provision <span class="nv">DEPLOY_ENV</span><span class="o">=</span>staging
</pre></div>
<p>What! You're running a <a class="reference external" href="https://www.vagrantup.com">Vagrant</a> based staging server? Then run:</p>
<div class="highlight"><pre>make provision <span class="nv">DEPLOY_ENV</span><span class="o">=</span>vagrant
</pre></div>
<p>Finally, made some changes to your site and ready to deploy them? Then run:</p>
<div class="highlight"><pre>make deploy
</pre></div>
<p>The <tt class="docutils literal">deploy</tt> and <tt class="docutils literal">provision</tt> commands drive <a class="reference external" href="http://docs.ansible.com">Ansible</a> playbooks that
run the provisioning and deployment tasks on your servers.
<a class="reference external" href="https://www.vagrantup.com">Vagrant</a> based staging servers are supported, so you
can "stage" your site locally and tweak and experiment with different
deployment configurations before expending your resources on hosting providers.
To keep things simple, we assume that all your application components such as;
<tt class="docutils literal">Django</tt>, <tt class="docutils literal">PostgreSQL</tt>, <tt class="docutils literal">redis</tt> and so on, are all deployed on a single
server. However, it is a relatively straightforward procedure to tweak the
playbooks support more complex provisioning scenarios. In this way, you can
support for example, independent database server, multiple upstream <tt class="docutils literal">wsgi</tt>
servers and so on. For more check the online <a class="reference external" href="http://wagtail-cookiecutter-foundation.readthedocs.org/en/latest/">documentation</a>.</p>
</div>
<div class="section" id="summary">
<h2>Summary</h2>
<p>Over the last few months <a class="reference external" href="http://wagtail-cookiecutter-foundation.readthedocs.org/en/latest/">wagtail-cookiecutter-foundation</a> has been a great time
saver for us here at <a class="reference external" href="http://chrisdev.com">ChrisDev</a>, but there are many
features that we'd love to include in future releases. These include:</p>
<ul class="simple">
<li>Make more use of the Wagtail <a class="reference external" href="http://docs.wagtail.io/en/v1.3.1/topics/streamfield.html">StreamField</a> in more complex pages such as the
homepage</li>
<li>The use of with <a class="reference external" href="https://letsencrypt.org">Lets Encrypt</a> for the generation and maintenance of SSL
certificates.</li>
<li>Turn some of the bundled modules like Feeds into stand alone reusable Django applications.</li>
<li>Add more funtional tests for the the projects generated with the cookiecutter</li>
</ul>
<p>You can find more of of these as well a bug reports in our <a class="reference external" href="https://github.com/chrisdev/wagtail-cookiecutter-foundation/issues">issue tracker</a>.
We're open to new ideas and happy to take your pull requests.</p>
</div>
How I Setup my Macs for Python Development2014-04-17T00:00:00-04:00Christopher Clarketag:blog.chrisdev.com,2014-04-17:setting-up-your-python-development-environment-on-osx-mavericks.html<div class="figure">
<img alt="This is a test" src="http://blog.chrisdev.com/images/setting-up-my-mac-for-python-dev.jpg" />
</div>
<p>I've been asked about this a few times already this month so I've decided to
write down what I do to set up a new Mac for (mainly) Python Development.</p>
<div class="section" id="first-install-dropbox-and-sync-folders">
<h2>First, Install Dropbox and Sync Folders</h2>
<p>I keep my development folders on <a class="reference external" href="http://dropbox.com">Dropbox</a>
as this gives me some degree of machine independence.
More recently, I've also started to keep my <tt class="docutils literal">dotfiles</tt>
on <tt class="docutils literal">Dropbox</tt> and use <a class="reference external" href="https://github.com/lra/mackup/">MackUp</a> to handle
the syncing of the <tt class="docutils literal">dotfiles</tt> between machines.
<tt class="docutils literal">MackUp</tt> is a pretty straight forward symbolic linking system and it
basically does what I would have done if I had rolled my own utility.
Be aware though that <tt class="docutils literal">Mackup's</tt> default behavior is to put your
<tt class="docutils literal">.ssh</tt> folder and its contents on Dropbox.
If you don't like this behavior then it must be overridden manually. I always
start by installing <tt class="docutils literal">Dropbox</tt> and syncing my Development folders, as
I typically have lots of stuff of on <tt class="docutils literal">Dropbox</tt> so it takes a while to
sync everything. You may want to consider using the
<a class="reference external" href="https://www.dropbox.com/help/175/en">Selective Sync</a>
feature to control the syncing process.</p>
</div>
<div class="section" id="upgrade-your-terminal-install-iterm-2">
<h2>Upgrade your Terminal: Install Iterm 2</h2>
<p>You're going to need a decent terminal application for your command line work.
While the bundled OS X terminal application has gotten a lot better
with recent releases of the <tt class="docutils literal">OS X</tt> it still has a way to go to match
<a class="reference external" href="http://www.iterm2.com/">Item2</a>. Some of the many features of <tt class="docutils literal">Iterm</tt>
are listed <a class="reference external" href="http://www.iterm2.com/#/section/features/full_screen">here</a>. So use
<a class="reference external" href="http://www.iterm2.com/">Item2</a> as your terminal.</p>
</div>
<div class="section" id="install-xcode-you-ll-need-at-least-the-command-line-tools">
<h2>Install XCode: You'll need at least the Command Line Tools</h2>
<p>You need to install either the full version <tt class="docutils literal">Xcode</tt> or at least to the
Command line tools.
These can be actually installed from the command line by entering the following
in you terminal window</p>
<div class="highlight"><pre>xcode-select --install
</pre></div>
<p>You will then be prompted to either install the full <tt class="docutils literal">Xcode</tt> or
just the command line developer tools, with the latter being the default.
Once you’ve installed one or the other, you can proceed to installing <tt class="docutils literal">Homebrew</tt>.</p>
</div>
<div class="section" id="install-homebrew">
<h2>Install Homebrew</h2>
<p><a class="reference external" href="http://brew.sh">Homebrew</a> is a package management system that simplifies
the installation of libraries, tools and utilities you typically need for
development. <tt class="docutils literal">Homebrew</tt> is actually a Ruby application and to install it
just visit the <tt class="docutils literal">Homebrew</tt>
homepage copy and paste the code listed under <em>Install Homebrew</em> into your
terminal. The install snippet changes occasionally and it is currently</p>
<div class="highlight"><pre>ruby -e <span class="s2">"</span><span class="k">$(</span>curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install<span class="k">)</span><span class="s2">"</span>
</pre></div>
<p>But be remember to visit <a class="reference external" href="http://brew.sh">Homebrew homepage</a> to get the
correct code snippet. Next run</p>
<div class="highlight"><pre>brew doctor
</pre></div>
<p>and then</p>
<div class="highlight"><pre>brew update
</pre></div>
<p>Then to install some packages to make sure everything works</p>
<div class="highlight"><pre>brew install ssh-copy-id git mercurial mackup
</pre></div>
</div>
<div class="section" id="set-up-your-shell-environment">
<h2>Set Up Your Shell Environment</h2>
<p>I'm a convert to <tt class="docutils literal">Zsh</tt> or really
<a class="reference external" href="https://github.com/robbyrussell/oh-my-zsh/">oh-my-zsh</a>. However,
the same would apply if you used <tt class="docutils literal">bash</tt> or any other shell
If you are using the bash shell then edit your <tt class="docutils literal">bash_profile</tt></p>
<div class="highlight"><pre>vi ~/.bash_profile
</pre></div>
<p>or for <tt class="docutils literal"><span class="pre">oh-my-zsh</span></tt></p>
<div class="highlight"><pre>vi ~/.zshrc
</pre></div>
<p>Add the following lines</p>
<div class="highlight"><pre><span class="c"># set the architecture flags</span>
<span class="nb">export </span><span class="nv">ARCHFLAGS</span><span class="o">=</span><span class="s2">"-arch x86_64"</span>
<span class="c"># Ensure that local bin is first in path</span>
<span class="nb">export </span><span class="nv">PATH</span><span class="o">=</span>/usr/local/bin:<span class="nv">$PATH</span>
</pre></div>
<p>These changes will take effect the next time you restart the shell.
Rather, than restarting your shell simply type the following in the terminal.</p>
<div class="highlight"><pre><span class="nb">source</span> ~/.zshrc
</pre></div>
<p>or if you are using <tt class="docutils literal">bash</tt></p>
<div class="highlight"><pre><span class="nb">source</span> ~/.bash_profile
</pre></div>
</div>
<div class="section" id="use-the-homebrew-python">
<h2>Use the Homebrew Python</h2>
<p>Apple has always bundled <tt class="docutils literal">Python</tt> along with its OS releases.
However, we advise you not to use the bundled <tt class="docutils literal">Python</tt> for development
and instead to install <tt class="docutils literal">Python</tt> via <tt class="docutils literal">homebrew</tt>. We prefer the <tt class="docutils literal">brew</tt>
Python for a number of reasons including :</p>
<ul class="simple">
<li>Apple makes changes to its bundled Python and this can
gives rise to bugs and incompatibilities.</li>
<li>If you use the bundled <tt class="docutils literal">Python</tt> you can upgrade to the latest and the
greatest version of <tt class="docutils literal">OS X</tt> you may find that your packages,
<tt class="docutils literal">virtualenvs</tt> etc. may all need to be reinstalled and recreated</li>
<li>As new versions of <tt class="docutils literal">Python</tt> are released, the bundled <tt class="docutils literal">Python</tt> becomes
more and more out-of-date. <tt class="docutils literal">Homebrew</tt> will allow you the upgrade to
the most recent versions of Python (2 or 3).</li>
<li><tt class="docutils literal">Homebrew</tt> allows you to easily play around with <tt class="docutils literal">Python 3</tt> as it comes
with <tt class="docutils literal">pip3</tt> for installing packages</li>
</ul>
<p>To install <tt class="docutils literal">Python</tt> with <tt class="docutils literal">homebrew</tt> enter</p>
<div class="highlight"><pre>brew install python
</pre></div>
<p>And optionally install Python 3</p>
<div class="highlight"><pre>brew install python3
</pre></div>
</div>
<div class="section" id="install-virtualenv-and-virtualenv-wrapper">
<h2>Install VirtualEnv and VirtualEnv Wrapper</h2>
<p>A <em>Virtual Environment</em>, is an isolated working copy of <tt class="docutils literal">Python</tt> and installed
packages that allows you to work on a specific project without the worry of
affecting other projects.</p>
<p>The <tt class="docutils literal">virtualenv</tt> package allows you to create virtual environments while the
<tt class="docutils literal">virtualenvwrapper</tt> package provides a framework for organizing
your virtual environments. Install them using <tt class="docutils literal">pip</tt></p>
<div class="highlight"><pre>pip install virtualenv
pip install virtualenvwrapper
</pre></div>
<p>Next, create a directory to store your virtual environments</p>
<div class="highlight"><pre>mkdir -p ~/virtualenvs
</pre></div>
<p>We’ll then edit the <tt class="docutils literal"><span class="pre">~/.zshrc</span></tt> file or (<tt class="docutils literal">.bashrc</tt> or <tt class="docutils literal">.bash_profile</tt>)</p>
<div class="highlight"><pre>vim ~/.zshrc
</pre></div>
<p>and add the following lines to it</p>
<div class="highlight"><pre><span class="c"># cache pip-installed packages to avoid re-downloading</span>
<span class="nb">export </span><span class="nv">PIP_DOWNLOAD_CACHE</span><span class="o">=</span><span class="nv">$HOME</span>/.pip/cache
<span class="nb">export </span><span class="nv">WORKON_HOME</span><span class="o">=</span><span class="nv">$HOME</span>/virtualenvs
<span class="nb">source</span> /usr/local/bin/virtualenvwrapper.sh
</pre></div>
<p>Restart your terminal or type the following in the terminal window</p>
<div class="highlight"><pre><span class="nb">source</span> ~/.zshrc
</pre></div>
<p>or</p>
<div class="highlight"><pre><span class="nb">source</span> ~/.bash_profile
</pre></div>
<p>Next, we want to test out your setup by building a <tt class="docutils literal">C</tt> based python package.
Start by installing some shared libraries via brew</p>
<div class="highlight"><pre>brew install libjpeg lcms libtiff libpng freetype
</pre></div>
<p>Next create a test <tt class="docutils literal">virtualenv</tt> and install the <tt class="docutils literal">C</tt> based python package
in this case <a class="reference external" href="https://pypi.python.org/pypi/Pillow/">Pillow</a> which
needs to be built against the shared libraries that you just installed
using <tt class="docutils literal">brew</tt></p>
<div class="highlight"><pre>mkvirtalenv <span class="nb">test</span>-env
pip install Pillow
</pre></div>
<p>Everything is fine if you get a post install message like similar to the
one shown below</p>
<pre class="literal-block">
PIL SETUP SUMMARY
--------------------------------------------------------------------
version Pillow 2.4.0
platform darwin 2.7.6 (default, Apr 9 2014, 11:48:52)
[GCC 4.2.1 Compatible Apple LLVM 5.1 (clang-503.0.38)]
--------------------------------------------------------------------
--- TKINTER support available
--- JPEG support available
*** OPENJPEG (JPEG2000) support not available
--- ZLIB (PNG/ZIP) support available
--- LIBTIFF support available
--- FREETYPE2 support available
*** LITTLECMS2 support not available
*** WEBP support not available
*** WEBPMUX support not available
</pre>
</div>
<div class="section" id="extras">
<h2>Extras</h2>
<div class="section" id="postgresql">
<h3>PostgreSQL</h3>
<p>You can of course use <tt class="docutils literal">homebrew</tt> to install <tt class="docutils literal">PostgreSQL</tt>.
However, I've found that that it takes a lot of manual tweaking to get all
the procedural languages (<tt class="docutils literal">PL/pgSQL</tt>, <tt class="docutils literal">PL/Python</tt>, <tt class="docutils literal">PLV8</tt> etc.) as well
as extensions like <a class="reference external" href="http://postgis.net/">PostGIS</a>, <tt class="docutils literal">hstore</tt> etc. working.
In contrast, <a class="reference external" href="http://postgresapp.com/">Postgresapp</a>
pretty much works out of the box and gives you stable, up-to-date version
PostgreSQL/PostGIS pretty much configured for any kind of development that
you are likely to do. <tt class="docutils literal">Postgresapp</tt> also comes with
the full set of <tt class="docutils literal">PostgeSQL/PostGIS</tt> command line tools however, you need to
add the bin directory to your path. As before, depending on you shell
of choice add the following to your <tt class="docutils literal">.zshrc</tt> , <tt class="docutils literal">.bash_profile</tt> or
<tt class="docutils literal">.bashrc</tt></p>
<div class="highlight"><pre><span class="nv">PATH</span><span class="o">=</span><span class="s2">"/usr/local/bin:/Applications/Postgres.app/Contents/MacOS/bin:</span><span class="nv">$PATH</span><span class="s2">"</span>
</pre></div>
<p>Restart you terminal app or type the following in the terminal window</p>
<div class="highlight"><pre><span class="nb">source</span> ~/.zshrc
</pre></div>
<p>or if you use another shell example <tt class="docutils literal">bash</tt></p>
<div class="highlight"><pre><span class="nb">source</span> ~/.bash_profile
</pre></div>
<p>Finally, test out your setup by typing</p>
<div class="highlight"><pre>createdb <span class="nb">test</span>-db <span class="c">#create a new database</span>
psql <span class="nb">test</span>-db
dropdb <span class="nb">test</span>-db
</pre></div>
</div>
<div class="section" id="install-a-gui-version-control-client">
<h3>Install a GUI Version Control Client</h3>
<p>While we can use <tt class="docutils literal">Homebrew</tt> to install source control tools (i.e <tt class="docutils literal">git</tt>
and or <tt class="docutils literal">mercurical</tt>) many new developers, or those coming from backgrounds
in design can sometimes feel a bit intimidated by using
<tt class="docutils literal">git</tt> and <tt class="docutils literal">mecurical</tt> from the command line.
So to help them get over the hump we usually recommend they also install a free
<tt class="docutils literal">git</tt> and <tt class="docutils literal">mercurial</tt> GUI client such as
<a class="reference external" href="http://www.sourcetreeapp.com">SourceTree</a>.</p>
</div>
<div class="section" id="python-data-tools">
<h3>Python Data Tools</h3>
<p>Python is becomming more and more popular for statistics, data analysis and data
science tasks. In particular you may be interested in in developing solutions
using the <a class="reference external" href="http://scipy.org">SciPy</a> stack and using tools like <a class="reference external" href="http://ipython.org">IPython</a>,
<a class="reference external" href="http://matplotlib.org">Matplotlib</a>, <a class="reference external" href="http://pydata.pandas.org">Pandas</a> , <a class="reference external" href="http://matplotlib">scikit-learn</a> , etc. The usual recommendation
is to use a binary distribution such as <a class="reference external" href="https://store.continuum.io/cshop/anaconda/">Anaconda</a> or <a class="reference external" href="https://www.enthought.com/downloads/">Enthought Canopy</a>, but
as a developer you will want/need to use the source distribution. Start by adding
these lines to your <tt class="docutils literal">.zshrc</tt> or <tt class="docutils literal">.bash_profile</tt>.</p>
<div class="highlight"><pre><span class="nb">export </span><span class="nv">CFLAGS</span><span class="o">=</span><span class="s2">"-arch i386 -arch x86_64"</span>
<span class="nb">export </span><span class="nv">FFLAGS</span><span class="o">=</span><span class="s2">"-m32 -m64"</span>
<span class="nb">export </span><span class="nv">LDFLAGS</span><span class="o">=</span><span class="s2">"-Wall -undefined dynamic_lookup -bundle -arch i386 -arch x86_64"</span>
<span class="nb">export </span><span class="nv">CC</span><span class="o">=</span>gcc
<span class="nb">export </span><span class="nv">CXX</span><span class="o">=</span><span class="s2">"g++ -arch i386 -arch x86_64"</span>
</pre></div>
<p>This should take care of problems you can sometimes encounter in building
some <tt class="docutils literal">numpy</tt> and <tt class="docutils literal">scipy</tt> extensions.</p>
<p>Next install some of the perquisites libraries and applications using
<tt class="docutils literal">homebrew.</tt></p>
<div class="highlight"><pre>brew install gfortran pkg-config zeromq readline
</pre></div>
<p>Then install <tt class="docutils literal">numpy</tt> and <tt class="docutils literal">scipy</tt> using pip. We will also install
<tt class="docutils literal">nose</tt> so we can run the test suite.</p>
<div class="highlight"><pre>pip install numpy
pip install scipy
pip install nose
</pre></div>
<p>Note, I'm installing these packages directly to the system site packages i.e.
in <tt class="docutils literal"><span class="pre">/usr/local/lib/python-2.7/site-packages</span></tt> as opposed to a
particular <tt class="docutils literal">virtualenv</tt> as I often use <tt class="docutils literal">pydata</tt> packages for ad-hoc
hacking and experimentation.
You can run the test suite by starting <tt class="docutils literal">Python</tt> and running</p>
<div class="highlight"><pre><span class="kn">import</span> <span class="nn">scipy</span>
<span class="kn">import</span> <span class="nn">numpy</span>
<span class="n">numpy</span><span class="o">.</span><span class="n">test</span><span class="p">()</span>
<span class="n">scipy</span><span class="o">.</span><span class="n">test</span><span class="p">()</span>
</pre></div>
<p>Almost all the <tt class="docutils literal">numpy</tt> test should pass but interestingly there will be quite
a few known failures with <tt class="docutils literal">scipy</tt>. This should not be a problem</p>
<p>Next install <tt class="docutils literal">pandas</tt></p>
<div class="highlight"><pre>pip install pandas
</pre></div>
<p>Then we can install <tt class="docutils literal">IPython</tt> (including support for the IPython notebook) ,
as well as <tt class="docutils literal">matplotlib</tt> and the <tt class="docutils literal">ipython sql extension</tt>
which allows you to to connect to a database and then issue SQL
commands within <tt class="docutils literal">IPython</tt> or <tt class="docutils literal">IPython Notebook</tt>.</p>
<div class="highlight"><pre>pip install jinga2
pip install ipython pyzmq tornado pygments
pip install matplotlib
pip install pycopg2
pip install ipython-sql
</pre></div>
<p>Check that everything is setup properly by launching the IPython notebook with
<tt class="docutils literal">matplotlib</tt> integration.</p>
<div class="highlight"><pre>ipython notebook --pylab<span class="o">=</span>inline
</pre></div>
<p>Here is a sample session from notebook I created</p>
<p>Start by importing <tt class="docutils literal">pandas</tt> and load the <tt class="docutils literal">sql</tt> magics</p>
<pre class="code python literal-block">
<span class="kn">import</span> <span class="nn">pandas</span> <span class="kn">as</span> <span class="nn">pd</span>
<span class="o">%</span><span class="n">load_ext</span> <span class="n">sql</span>
</pre>
<p>Connect to a <tt class="docutils literal">PosgreSQL</tt> database with data from the Trinidad and Tobago
stock exchange and execute sql</p>
<pre class="code python literal-block">
<span class="o">%%</span><span class="n">sql</span> <span class="n">postgresql</span><span class="p">:</span><span class="o">//</span><span class="n">localhost</span><span class="o">/</span><span class="n">mass</span><span class="o">-</span><span class="n">db</span>
<span class="n">select</span> <span class="n">sd</span><span class="o">.</span><span class="n">dateix</span><span class="p">,</span> <span class="n">s</span><span class="o">.</span><span class="n">ticker</span><span class="p">,</span> <span class="n">sd</span><span class="o">.</span><span class="n">close_price</span><span class="p">,</span> <span class="n">sd</span><span class="o">.</span><span class="n">volume</span> <span class="kn">from</span> <span class="nn">markets_symboldata</span> <span class="nn">sd</span><span class="p">,</span> <span class="n">markets_symbol</span> <span class="n">s</span>
<span class="n">where</span> <span class="n">s</span><span class="o">.</span><span class="n">id</span><span class="o">=</span><span class="n">sd</span><span class="o">.</span><span class="n">symbol_id</span> <span class="n">order</span> <span class="n">by</span> <span class="n">sd</span><span class="o">.</span><span class="n">dateix</span> <span class="n">desc</span> <span class="n">limit</span> <span class="mi">10</span><span class="p">;</span>
</pre>
<pre class="literal-block">
10 rows affected.
</pre>
<table>
<tr>
<th>dateix</th>
<th>ticker</th>
<th>close_price</th>
<th>volume</th>
</tr>
<tr>
<td>2014-01-27 00:00:00-04:00</td>
<td>NCBJ</td>
<td>1.0</td>
<td>1901965</td>
</tr>
<tr>
<td>2014-01-27 00:00:00-04:00</td>
<td>RBL</td>
<td>116.52</td>
<td>8109</td>
</tr>
<tr>
<td>2014-01-27 00:00:00-04:00</td>
<td>GHL</td>
<td>14.0</td>
<td>4294</td>
</tr>
<tr>
<td>2014-01-27 00:00:00-04:00</td>
<td>JMMB</td>
<td>0.49</td>
<td>18500</td>
</tr>
<tr>
<td>2014-01-27 00:00:00-04:00</td>
<td>NEL</td>
<td>18.25</td>
<td>1348</td>
</tr>
<tr>
<td>2014-01-27 00:00:00-04:00</td>
<td>NFM</td>
<td>0.96</td>
<td>15500</td>
</tr>
<tr>
<td>2014-01-27 00:00:00-04:00</td>
<td>AHL</td>
<td>11.0</td>
<td>1000</td>
</tr>
<tr>
<td>2014-01-27 00:00:00-04:00</td>
<td>FIRST</td>
<td>42.4</td>
<td>3891</td>
</tr>
<tr>
<td>2014-01-27 00:00:00-04:00</td>
<td>CIF</td>
<td>22.75</td>
<td>3210</td>
</tr>
<tr>
<td>2014-01-27 00:00:00-04:00</td>
<td>SBTT</td>
<td>73.12</td>
<td>624</td>
</tr>
</table><p>Execute another query using the connection established above to retrieve
the last 100 days of data for GHL. Store the result in a variable called
results</p>
<pre class="code python literal-block">
<span class="n">result</span> <span class="o">=</span> <span class="o">%</span><span class="n">sql</span> <span class="n">select</span> <span class="n">sd</span><span class="o">.</span><span class="n">dateix</span><span class="p">,</span> <span class="n">s</span><span class="o">.</span><span class="n">ticker</span><span class="p">,</span> <span class="n">sd</span><span class="o">.</span><span class="n">close_price</span><span class="p">,</span> <span class="n">sd</span><span class="o">.</span><span class="n">volume</span> <span class="kn">from</span> <span class="nn">markets_symboldata</span> <span class="nn">sd</span><span class="p">,</span> <span class="n">markets_symbol</span> <span class="n">s</span> <span class="n">where</span> <span class="n">s</span><span class="o">.</span><span class="n">id</span><span class="o">=</span><span class="n">sd</span><span class="o">.</span><span class="n">symbol_id</span> <span class="ow">and</span> <span class="n">s</span><span class="o">.</span><span class="n">ticker</span><span class="o">=</span><span class="s">'GHL'</span> <span class="n">order</span> <span class="n">by</span> <span class="n">sd</span><span class="o">.</span><span class="n">dateix</span> <span class="n">desc</span> <span class="n">limit</span> <span class="mi">100</span>
</pre>
<pre class="literal-block">
100 rows affected.
</pre>
<p>Because pandas is available we can use the <tt class="docutils literal">DataFrame</tt> method to
create a DataFrame from the resultset</p>
<pre class="code python literal-block">
<span class="n">df</span> <span class="o">=</span> <span class="n">result</span><span class="o">.</span><span class="n">DataFrame</span><span class="p">()</span>
<span class="n">df</span><span class="o">.</span><span class="n">info</span><span class="p">()</span>
</pre>
<pre class="literal-block">
<class 'pandas.core.frame.DataFrame'>
Int64Index: 100 entries, 0 to 99
Data columns (total 4 columns):
dateix 100 non-null object
ticker 100 non-null object
close_price 100 non-null float64
volume 100 non-null int64
dtypes: float64(1), int64(1), object(2)
</pre>
<p>Convert the <tt class="docutils literal">df</tt> to a time series by setting the index to the
<tt class="docutils literal">dateix</tt></p>
<pre class="code python literal-block">
<span class="n">df</span><span class="o">.</span><span class="n">set_index</span><span class="p">(</span><span class="s">'dateix'</span><span class="p">,</span> <span class="n">inplace</span><span class="o">=</span><span class="bp">True</span><span class="p">)</span>
</pre>
<p>Statistical summary of the closing price and volume</p>
<pre class="code python literal-block">
<span class="n">df</span><span class="o">.</span><span class="n">describe</span><span class="p">()</span>
</pre>
<div style="max-height:1000px;max-width:1500px;overflow:auto;">
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th>close_price</th>
<th>volume</th>
</tr>
</thead>
<tbody>
<tr>
<th>count</th>
<td> 100.000000</td>
<td> 100.000000</td>
</tr>
<tr>
<th>mean</th>
<td> 14.806300</td>
<td> 11008.670000</td>
</tr>
<tr>
<th>std</th>
<td> 0.902168</td>
<td> 16633.468579</td>
</tr>
<tr>
<th>min</th>
<td> 13.500000</td>
<td> 21.000000</td>
</tr>
<tr>
<th>25%</th>
<td> 14.000000</td>
<td> 1718.750000</td>
</tr>
<tr>
<th>50%</th>
<td> 14.975000</td>
<td> 4447.000000</td>
</tr>
<tr>
<th>75%</th>
<td> 15.600000</td>
<td> 12569.250000</td>
</tr>
<tr>
<th>max</th>
<td> 16.450000</td>
<td> 82430.000000</td>
</tr>
</tbody>
</table>
<p>8 rows × 2 columns</p>
</div><p>Use <tt class="docutils literal">matplotlib</tt> to plot the closing price</p>
<pre class="code python literal-block">
<span class="n">df</span><span class="p">[</span><span class="s">'close_price'</span><span class="p">]</span><span class="o">.</span><span class="n">plot</span><span class="p">()</span>
</pre>
<pre class="literal-block">
<matplotlib.axes.AxesSubplot at 0x11650bcd0>
</pre>
<div class="figure">
<img alt="map to buried treasure" src="/theme/images/output_13_1.png" />
</div>
</div>
</div>
Book Review: Getting Started with Zurb Foundation 4 by Andrew D. Patterson2014-02-23T00:00:00-04:00Christopher Clarketag:blog.chrisdev.com,2014-02-23:book-review-getting-started-with-zurb-foundation.html<p>I was really looking forward to reviewing this book as I'm a big fan of <a class="reference external" href="http://foundation.zurb.com">Zurb
Foundation</a> as I think that it is by far the <a class="reference external" href="http://responsive.vermilion.com/compare.php?framework=current">best</a> responsive framework out
there. Indeed, at work here at <a class="reference external" href="http://chrisdev.com">ChrisDev</a>, we use Foundation for all our web
based projects.</p>
<p>The book is supposed to aimed at web architects, designers, and builders who
were already familiar with the basics principles of responsive design and
is divided up into four chapters. I found that
<cite>Chapter 1: Getting The Most from the Grid System</cite> was the most useful of the
lot. The author discussed in some detail his approach
to dealing with a number of practical layout issues including: nesting rows in
columns; understanding and customizing column gutters; maintaining row and page
width; mobile first design (or what the author calls designing from small to to
large); rearranging columns and so on. While I found that this chapter hit
all the basics I felt more emphasis should have been placed on the implications
of mobile first design as this has always been Foundation's big selling
point over rivals such as <a class="reference external" href="http://getbootstrap.com">Twitter BootStrap</a>. Also, it was strange
that there was no mention of some of the great resources provided by Zurb such
as the <a class="reference external" href="http://foundation.zurb.com/templates4.html">Foundation 4 Templates</a> which provide a number of canned layouts for
various kinds of sites (blogs, marketing product page etc.) that can be a great
starting point for customizing layout.</p>
<p>I was a little disappointed in the next two chapters which covered the CSS and
JavaScript components provided with Foundation. These seemed a little cursory and
there was little that went beyond the <a class="reference external" href="http://docs.foundation.com">online documentation</a>.
Of course Foundation comes with more than twenty CSS components about twelve
JavaScript Plugins so it would have been unrealistic to expect a comprehensive
treatment of all these components, but maybe the author could have singled out
the more popular component such as Orbit for more comprehensive treatment.</p>
<p>The final chapter covered <a class="reference external" href="http://sass-lang.com">Sass</a>. I felt that there was a lot of good material
here and readers unfamiliar with Sass would find it quite enlightening.
I particularly liked the sections entitled <em>Customizing with Variables</em> and
<em>Understanding functions and mixins</em>. However, I felt that more emphasis should
have been placed on this topic given that Sass has become the most efficient
way to customize and style layout, components and plugins. I would have
preferred if Sass could have been introduced very early on (probably as Chapter
2) and the subsequent chapters covering CSS and JavaScript components each
contain a section on how to customize one or more of the components or plugins
with Sass.</p>
<p>Overall, I would have to give this book a 3 out of 5 stars since it covers the
basics and provides a good supplement for the <a class="reference external" href="http://docs.foundation.com">online documentation</a>. However,
I feel that for more experienced designers, architects and builders the book
will prove to be a bit of a disappointment. Aside from <cite>Chapter 1</cite>, it provides
little in the way of a practical approach or even some guidelines for building
real world responsive sites with Foundation. This is important in the context
of a rapidly evolving framework like Zurb Foundation, where we are we are
reviewing a book about <cite>version 4</cite> while <a class="reference external" href="http://foundation.zurb.com/docs/changelog.html">Foundation 5</a> has been out since
November 21, 2013.</p>
Welcome To My Blog2014-02-28T00:00:00-04:00Christopher Clarketag:blog.chrisdev.com,2013-05-01:welcome.html<p>I've started experimenting with a static blog in the hope that this will
encourage me to post on a more frequently . I've decided to go with
<a class="reference external" href="https://github.com/getpelican/pelican">pelican</a> as it's written in python, set up and has good documentation and
I'm using <tt class="docutils literal">github pages</tt> for hosting.</p>
<div class="section" id="getting-started">
<h2>Getting Started</h2>
<p>First, I created a virtualenv for
the project and installed the main requirements.</p>
<div class="highlight"><pre>mkvirtualenv chrisdev-blog
pip install pelican
</pre></div>
<p>I then used <tt class="docutils literal"><span class="pre">pelican-quickstart</span></tt> to create the skeleton of my project</p>
<div class="highlight"><pre>pelican-quickstart
</pre></div>
<p>Since I was going to host on Github I felt that I did not need the
generated Makefile, and all the other helper scripts.
Instead, I created a settings file that initially
looked like this:</p>
<div class="highlight"><pre><span class="n">AUTHOR</span> <span class="o">=</span> <span class="s">'Christopher Clarke'</span>
<span class="n">DEFAULT_DATE_FORMAT</span> <span class="o">=</span> <span class="s">'%A, %B </span><span class="si">%d</span><span class="s">, %Y'</span>
<span class="n">DISQUS_SITENAME</span> <span class="o">=</span> <span class="s">'chrisdev'</span>
<span class="n">GITHUB_URL</span> <span class="o">=</span> <span class="s">'https://github.com/chrisdev/chrisdev-blog'</span>
<span class="n">GOOGLE_ANALYTICS</span><span class="o">=</span><span class="s">''</span>
<span class="n">SITEURL</span> <span class="o">=</span> <span class="s">'http://blog.chrisdev.com'</span>
<span class="n">FEED_DOMAIN</span> <span class="o">=</span> <span class="n">SITEURL</span>
<span class="n">SITENAME</span> <span class="o">=</span> <span class="s">'TheChrisDev Blog'</span>
<span class="n">SOCIAL</span> <span class="o">=</span> <span class="p">((</span><span class="s">'twitter'</span><span class="p">,</span> <span class="s">'http://twitter.com/realchrisdev'</span><span class="p">),</span>
<span class="p">(</span><span class="s">'github'</span><span class="p">,</span> <span class="s">'https://github.com/chrisdev'</span><span class="p">),</span>
<span class="p">(</span><span class="s">'facebook'</span><span class="p">,</span> <span class="s">'http://www.facebook.com/chrisdevtt'</span><span class="p">),)</span>
<span class="n">TAG_FEED_ATOM</span> <span class="o">=</span> <span class="s">'feeds/</span><span class="si">%s</span><span class="s">.atom.xml'</span>
<span class="n">TIMEZONE</span> <span class="o">=</span> <span class="s">"America/Port_of_Spain"</span>
<span class="n">TWITTER_USERNAME</span> <span class="o">=</span> <span class="s">'realchrisdev'</span>
</pre></div>
<p>To generate the site I created a test <tt class="docutils literal">rst</tt> file in the content directory
and ran the following:</p>
<div class="highlight"><pre>pelican content -s settings.py -o .
</pre></div>
<p>To view the generated site just open the index file in your browser or if you are
on a Mac</p>
<div class="highlight"><pre>open index.html
</pre></div>
</div>
<div class="section" id="theming-the-blog">
<h2>Theming The Blog</h2>
<p>By default <a class="reference external" href="https://github.com/getpelican/pelican">pelican</a> will theme your site using <tt class="docutils literal">notmyidea</tt>.
But I wanted to use a theme based on <a class="reference external" href="http://foundation.zurb.com">Zurb Foundation 4</a>.
Fortunately, the official <a class="reference external" href="https://github.com/getpelican/pelican-themes">pelican-themes</a> repository already contained
a <tt class="docutils literal">Foundation 4</tt> theme called <tt class="docutils literal">tuxlite_zf</tt>.
This is a minimalist theme with a main column and a right sidebar.
That I felt would provide a good starting point for a custom theme.
To install the
<tt class="docutils literal"><span class="pre">pelican-themes</span></tt> we simply cloned the repository to our local machine.</p>
<div class="highlight"><pre>git clone https://github.com/getpelican/pelican-themes ~/Development/pelican-themes
</pre></div>
<p>We then copied the <tt class="docutils literal">tuxlite_zf</tt> theme folder to a new folder <tt class="docutils literal">chrisdev_zf</tt>
so that we could customize it. Next, we edited <tt class="docutils literal">settings.py</tt>
file to include this line:</p>
<div class="highlight"><pre><span class="n">THEME</span> <span class="o">=</span> <span class="s">"../pelican-themes/chrisdev_zf"</span>
</pre></div>
<p>Finall, we regenerated the site as before to confirm that <tt class="docutils literal">tuxlite_zf</tt> was
indeed generating a <tt class="docutils literal">Foundation 4</tt> site.</p>
</div>
<div class="section" id="customization-with-sass-and-compass">
<h2>Customization with SASS and Compass</h2>
<p>The best way to customize a <tt class="docutils literal">Foundation 4</tt> site is to use
<a class="reference external" href="http://sass-lang.com/">Sass</a> and <a class="reference external" href="http://compass-style.org">Compass</a></p>
<p>This normally means that <tt class="docutils literal">ruby</tt> needs to be installed on your system.
If you are on a Mac then you are in luck since a fairly recent version of
<tt class="docutils literal">ruby</tt> ships with <tt class="docutils literal">Mountain Lion</tt>.
Update your <tt class="docutils literal">ruby</tt> installation and install <tt class="docutils literal">Foundation 4</tt> and all the
necessary dependencies i.e. <a class="reference external" href="http://sass-lang.com/">Sass</a> and <a class="reference external" href="http://compass-style.org">Compass</a> .</p>
<div class="highlight"><pre>sudo gem update --system
sudo gem install compass
sudo gem install zurb-foundation
</pre></div>
<p>Next create a project for
your custom theme.</p>
<div class="highlight"><pre>compass create custom-foundation4 -r zurb-foundation --using foundation
</pre></div>
<p>You can view <tt class="docutils literal">index.html</tt> in your browser confirm that your project is
a standard <tt class="docutils literal">Foundation 4</tt> site. Next, you will want to start
by making changes to the <tt class="docutils literal">Scsss</tt> files and use
with <tt class="docutils literal">compass</tt> to generate <tt class="docutils literal">css</tt> output.</p>
<p>The Foundation folks have made this easy for us as you can
modify almost any Foundation <tt class="docutils literal">CSS</tt> component by editing <tt class="docutils literal">_settings.scss</tt>
file which is located in the <tt class="docutils literal">sass</tt>
folder of the <tt class="docutils literal"><span class="pre">custom-foundation</span></tt> project.
For example, to change the colors of the <tt class="docutils literal"><span class="pre">Top-nav</span></tt> we made the following
changes to <tt class="docutils literal">_settings.scss</tt></p>
<div class="highlight"><pre><span class="vg">$topbar</span><span class="o">-</span><span class="n">dropdown</span><span class="o">-</span><span class="ss">bg</span><span class="p">:</span> <span class="c1">#3498db;</span>
<span class="vg">$topbar</span><span class="o">-</span><span class="n">dropdown</span><span class="o">-</span><span class="n">toggle</span><span class="o">-</span><span class="ss">alpha</span><span class="p">:</span> <span class="mi">0</span><span class="o">.</span><span class="mi">1</span><span class="p">;</span>
<span class="vg">$dropdown</span><span class="o">-</span><span class="n">label</span><span class="o">-</span><span class="ss">color</span><span class="p">:</span> <span class="c1">#fff;</span>
</pre></div>
<p>Next run</p>
<div class="highlight"><pre>compass compile
</pre></div>
<p>You can also set <tt class="docutils literal">compass</tt> in watch mode so that it
will watch for saves and compile each time you save an Scss file.
Additionally, you can also configure compass to generate compressed code
by editing the 'config.rb'
and uncommenting</p>
<div class="highlight"><pre><span class="nv">output_style</span> <span class="o">=</span> :compressed <span class="c"># or :compressed expanded or :nested or</span>
</pre></div>
<p>Once you are satisfied, you can copy <tt class="docutils literal">app.css</tt> as <tt class="docutils literal">foundation.css</tt> to your
custom pelican-theme's static directory.</p>
<p>Once you have gained more experience with compass/sass you will want to
target particular CSS components to modify them instead of
regenerating the entire
<tt class="docutils literal">foundation.css</tt> every time you make a few changes to components.
To achieve this we
simply created a new <tt class="docutils literal">scss</tt> called <tt class="docutils literal">style.scss</tt> and imported just those
components that we wished to modify.
So as in the example above where we just wanted to change the
<tt class="docutils literal"><span class="pre">top-nav</span></tt> colors we just add the following lines to <tt class="docutils literal">style.sccs</tt></p>
<div class="highlight"><pre><span class="vg">$topbar</span><span class="o">-</span><span class="n">dropdown</span><span class="o">-</span><span class="ss">bg</span><span class="p">:</span> <span class="c1">#3498db;</span>
<span class="vg">$topbar</span><span class="o">-</span><span class="n">dropdown</span><span class="o">-</span><span class="n">toggle</span><span class="o">-</span><span class="ss">alpha</span><span class="p">:</span> <span class="mi">0</span><span class="o">.</span><span class="mi">1</span><span class="p">;</span>
<span class="vg">$dropdown</span><span class="o">-</span><span class="n">label</span><span class="o">-</span><span class="ss">color</span><span class="p">:</span> <span class="c1">#fff;</span>
<span class="vi">@import</span> <span class="s2">"foundation/components/grid"</span><span class="p">;</span>
<span class="vi">@import</span> <span class="s2">"foundation/components/top-bar"</span><span class="p">;</span>
</pre></div>
<p>Note, you need to define the new colors etc. <strong>before</strong> you
import the foundation components.</p>
<p>As before, compile the <tt class="docutils literal">style.css</tt> and copy this
to the static directory of your pelican theme.</p>
</div>
<div class="section" id="deployment-on-github">
<h2>Deployment On Github</h2>
<p>I started by creating a repository on my <a class="reference external" href="http://github.com">github</a>
called <tt class="docutils literal">chrisdev.github.com</tt>.
The use of my <tt class="docutils literal">github</tt> account name as the first part of the
repository name was necessary to indicate that this was a special repository
for serving <tt class="docutils literal">User</tt> or <tt class="docutils literal">Organization</tt> html pages from the master branch of a
repository. The site would be viewable at <a class="reference external" href="http://chrisdev.github.io">http://chrisdev.github.io</a>.</p>
<p>Next in the the directory where I created the pelican blog I ran the followig</p>
<div class="highlight"><pre>git init
git add .
git commit -m <span class="s2">"initial commit"</span>
git remote add origin git@github.com:chrisdev/chrisdev.github.com.git
</pre></div>
<p>To update the site I just have to push to the origin</p>
<div class="highlight"><pre>git push -u origin master
</pre></div>
<p>I also set up a custom domain for the blog at <a class="reference external" href="http://blog.chrisdev.com">http://blog.chrisdev.com</a>
by simply setting up a <tt class="docutils literal">CNAME</tt> record in my DNS
to set <tt class="docutils literal">blog.chrisdev.com</tt> as an alias for <tt class="docutils literal">chrisdev.github.com</tt>.
I also had to add a file to the <tt class="docutils literal">github</tt> repository called
<tt class="docutils literal">CNAME</tt> which contained
a sigle line with the alias i.e <tt class="docutils literal">blog.chrisdev.com</tt>.</p>
</div>