20seven

Devigner blog about development and design

Octopress: My Thoughts So Far

A week or so ago, I got rid of my dedicated server and handed the clients off to a friend who’s managing the hosting now. It’s a breath of fresh air for me after hosting client sites for the better part of a decade. During this change over I decided to take my sites over to rackspace (this site and gregnewman.org). This was the perfect time to resurect this site. I had done an almost two year experiment to see if mixing code and art in a blog would suffice. It doesn’t. And may warrant another post down the road sometime.

I had been running 20seven off Movable Type for many years and figured it was time to kill it. I wanted something simple so I opted for a static site generator. There’s a lot of good one’s out there. I won’t go into the specifics but my friend Rich Leland wrote a nice post detailing the strenths and weaknesses of most of them. Octopress is what I settled on. Not sure really why, aside from the great logo. Day two and so far I’m impressed.

Ease of Setup

Setting up Octopress was very easy and painless. In all, the setup took less than ten minutes, including importing Movable Type data. Deployment took a little longer but that’s due to having to setup the server.

If you have RVM installed, you’ll need to install Ruby 1.9.2. Macs ship with Ruby 1.8.7.

1
rvm install 1.9.2 && rvm use 1.9.2

Clone Octopress, cd into the directory and use Ruby 1.9.2.

1
2
3
git clone git://github.com/imathis/octopress.git octopress
cd octopress
rvm use 1.9.2

Install the dependencies

1
2
gem install bundler
bundle install

Install this theme that I’m using for the next few days

1
rake install

That’s the extent of the setup of you’re starting from scratch. There are some configurations for the blog that I won’t cover here but it’s pretty straight forward. There are also a hand full of handy plugins that ship with Octopress, to include disqus for comments.
Look in the docs to find out more and since Octopress is based on Jekyll you can check out some of their documentation as well.

Movable Type Import

I had a lot of posts to import from Movable Type. I setup my database locally and ran the script provided by Jekyll to import the data.

I first had to install the sequel and mysqlplus gems

1
gem install sequel mysqlplus

Then the import was painless

1
ruby -rubygems -e 'require "jekyll/migrators/mt"; Jekyll::MT.process("database", "user", "pass")'

There are a number of importers to include Wordpress, Drupal, Typo 4+, TextPatter, Mephisto, Blogger, Tumblr and Posterous. The [Jekyll docs[(https://github.com/mojombo/jekyll/wiki/Blog-Migrations) have all the info.

Syntax: Markdown or Textile

Since Octopress supports textile and markdown, all my old posts were brought in flawlessly. I always used textile, but thankfully I can now write posts in markdown though.

Writing Posts

Posts are simple to write. Just save the file in the _posts directory with the extension of .markdown or .textile and save.

1
2
rake generate # generates the html from markdown (or textile)
rake preview # to view it locally before deploying at localhost:4000

Deployment

I won’t go into all the deployment steps. That really depends on where your hosting and what support you have. I’m using Rsync which was cake to setup and deploying is as simple as writing a post and running the two commands to refresh 20seven.org.

1
2
rake generate # generates the html from markdown (or textile)
rake deploy # makes my blabber available to the world

Octopress also supports Github pages and Heroku out of the box. If you’re using those platforms for blogging, you can’t go wrong.

What I like about Octopress

I’m tired of having to fudge with databases or coding my own blog platform. It’s much easier to just write a post and serve it up in static files. Why? Because I have the posts in plain text format that are stored in a github repo. No worrying about problems. If something happens, I just redeploy.

Also the fact that the time expense was so small it’s really refreshing. I would say I had no more than an hour total (with server setup) to get 20seven.org back up and running. Now I’m not a fan of the design, but I can fix that later.

Also, Sass/Compass is built in so that’s another plus for css.

What I wish Octopress supported

I wish I could write these posts in restructured text or better yet, orgmode files. That’s a small gripe and one I can live with.

20seven Is Revived and on Octopress

For those of you who have this site in their feed readers (what’s that?) and saw some updates today it’s because I’m reviving the site.
I moved the site to Rackspace last week in a hurry and took the old Movable Type down. This is now running on Octopress, a fantastic static site generator. Sorry for the ugly design. That will be fixed very soon. For now it’s back up and running and should be working ok. If you run into any issues, please ping me on twitter and let me know.

I’ll be doing a post this weekend on my experiences with Octopress. So far I’m very pleased. I also have a few more posts lined up to include an old Emacs article I wrote for Python mag for the one person who may read it.

I’m still keeping my other site gregnewman.org up for my illustration side. I found mixing the two (code and art) doesn’t work.

Cheers!

New Year, New Site

It’s a new year and time to roll out a new site over at http://gregnewman.org. This is something I’ve been trying to get done for a long time now and just haven’t been able to find the time or inspiration to get it done. I even failed at sitesprint twice in this endeavor.

Then came along Anton Peck with this bright idea to do a post per week for a year, hence Project 52. I couldn’t resist. It’s a doable goal in my opinion and apparently over 500 other people think so too.

hello!newman

One of the things I have wanted to do was write and post more of my personal artwork. I haven’t done it in the past for many reasons but one that stands out for me is the fact that I didn’t want to flood the developers with art and didn’t want to flood the artists with code. So I wrote this engine dubbed `hello!newman` using Django to help segregate the content a little better and each journal has it’s own feeds. hello!newman is up on github and will be an ongoing project for me as this site evolves. Please feel free to comment here or create a ticket on github if you find any issues. If you’re using IE6 and you find an issue… bite me. I don’t care.

So far, I’m pleased with the direction I’m going with the design. While I have a few details to work out and some more features to add it will serve its purpose nicely.

20seven.org

For those who don’t already know me, I’ve been blogging at 20seven.org for many years and I decided it’s time to archive that domain and go with a little personal branding. It’s too much work to get all that data into a fresh app and do all the redirects so I’m archiving it. If you are subscribed to the feed over at 20seven.org, please update your feeds to the new site (below).

Feeds

Backing Up Org-Mode Files

As many already know, I live in org-mode and keep my org files in a private bitbucket repository for safe keeping. One thing I don’t (or didn’t) do is push those files to the repository on a regular basis. The other morning I ate my wheaties and gained enough super power to rectify the issue.
h3. The bash script

I keep all my dotfiles in this uber-private repository, not just my org files. To continue with this approach I added a bash script within my dot files directory which will do my grunt work.
#!/bin/sh

  1. Add dot file changes to bitbucket – to include my org files
    REPOS=“hgfiles”

for REPO in $REPOS
do
echo “Repository: $REPO
cd ~/$REPO

  1. Add new files
    hg add .
    hg commit -m “$(date)”
    hg push
    done

    The variable “REPOS” holds the directories that I want pushed to bitbucket. If you have more than one, add them to this variable. Basically, the script just loops through the REPOS and adds any new files, commits them with a message of the current date and time and pushes it. If there are no new files it just fails silently and my world doesn’t implode on me.

If you are using github or a similar service, just change out the hg commands with the git commands. If you’re using svn… I’m so sorry to hear that.

The plist

Now since I’m horrible at pushing these on a regular basis and don’t have the money to buy a trained monkey to push them for me, I added them to Mac OS X’s launchctl. To do that it’s fairly simple.

I created a plist file which is also stored in my dot files directory.
cd to/the/directory touch greg.dotfiles.orghg.plist
Open this plist file in your favorite editor and add the following code.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>Label</key> <string>greg.dotfiles.orghg</string> <key>ProgramArguments</key> <array> <string>/Users/greg/hgfiles/management/hg.commit</string>

StartInterval 3600


ProgramArguments is the path to the bash script I created earlier so Mac knows where to find it. The StartInterval is the interval to run the script. In my case I have it push every hour. 3600 seconds divided by 60 equals 60 minutes. You get the picture.

Schedule it!

Now that this is saved it’s time to hook it up and test it. For testing purposes, I changed the StartInterval to 2 minutes (180) so I could watch the console for errors in the log.

The plist file needs to be copied to the proper directory and added to the daemons.
cp greg.dotfiles.orghg.plist /Library/LaunchAgents/greg.dotfiles.orghg.plist launchctl load /Library/LaunchAgents/greg.dotfiles.orghg.plist
All done and I can once again sleep knowing my org files are safe and sound within my repositories.

If you’re a linux user, you won’t need the plist parts, just create a cron job that will run the bash script every hour (or whatever your desired interval).

Twitter Change

After two years or more I have finally been able to get my real name on twitter (gregnewman) and will be switching over to using that as my main twitter account. I will keep 20seven around as a pointer to gregnewman but please re-follow me there and I’ll be working on re-following all my friends under that account.

Personal Site Sprint

The beginning of August, following my relocation to Charlotte, will kick off the Personal Site Sprint along with my friends Chris Harrison and Bryan Veloso. The sprint will end with a launch date of September 1st.

What this means is we will all be redesigning and documenting the process of our personal site refresh. I will be detailing the process from initial pencil sketches all the way through to final launch. I might even throw in some screencasts.

I am also going to take this opportunity to leave Movable Type in favor of Django. This is something I’ve wanted to do for a while and haven’t had the time or energy to do.

Personal projects are a PITA so I’m hoping that doing the sprint with two other great designers will keep me motivated.

Pyrohose Logo Design

I spent last weekend finishing up a logo for a super secret project I can’t go into yet at the client’s request. I can share the logo in the meantime.

Pyrohose Logo Design

When the client gives me the green-light I’ll come back and update the post with a link to the project.

Django-Loupe for Design Collaboration

I’ve been using Basecamp for years and have a love/hate relationship with it simply because it costs me money for clients that don’t want to use it. However, I can’t get rid of it because there are a few clients I have that need collaboration for designs. For coding projects I use various ticketing systems from Trac to Sifter and I won’t get into that in this post.

noteform

During a current project Trac is being used for the backend parts but it falls apart on design collaboration. After a few late nights I’m thrilled with the progress of Django-Loupe for design collab.
h3. Features

  • Projects
  • Corkboards
  • Images (screenshots, sketches, etc.)
  • Comments
  • Image Notes
  • Fully pluggable so you can add it to your existing Django projects

How it works?

Like other project management tools Loupe allows the site admin to create projects and assign the users that have access to them.

project

Each project has what’s called corkboards. A corkboard is a grouping of images for a project such as home page mockups. The corkboard stores all revisions of this design and it’s relative conversations using django’s comments framework.

corkboard

Each image in the corkboard has it’s own comments thread and notes. Notes are flickr-style image notes drawn directly on the image to help pin-point problem areas in the design process.

ful image

Dependencies

  • Python imaging library
  • ImageKit
  • Django-extensions

Instructions

The project is hosted on bitbucket. Clone the project or download a package and add ‘Loupe’ to your projects settings under INSTALLED_APPS.

Add the following to your settings.py or local_settings.py and adjust appropriately:


# Width in pixels of the thumbnail
LOUPE_RESIZE_THUMB_WIDTH = 100
# Height in pixels of the thumbnail
LOUPE_RESIZE_THUMB_HEIGHT  = 75
# Crop thubmnails? True or False 
LOUPE_RESIZE_THUMB_CROP = True
# Width in pixels of the display size (not full size image)
LOUPE_RESIZE_DISPLAY_WIDTH = 800
# Pre-cache images on upload? True or False
LOUPE_PRE_CACHE_IMAGES = True
# Increment the view count on images? True or False
LOUPE_INCREMENT_COUNT = True

Loupe assumes that users are registered and authenticated and does not handle user registration. For that I suggest django-registration.

Included in the project is an sample project for an example of how to work with Loupe. It currently does not have registration included. You will be running this as the administrator.

Planned additional features

  • RSS and/or Atom feeds
  • Notifications

These features will be rolled into the project hopefully this weekend.

If anyone would like to see other features added to this, feel free to jump in, leave a ticket, shoot me an email at greg at 20seven dot org, or find me on twitter

Org-mode Logo Refresh

Next out of the gate this week is the org-mode logo refresh. Well, actually it done last week but I’m only getting around to posting it now. As I mentioned in the last post, it’s been hell-busy here.

org-mode-blog.png

Org-mode is an Emacs Mode for keeping notes, maintaining ToDo lists, doing project planning, and authoring with a fast and effective plain-text system. I live in org-mode daily and when it was announced that it is up for a Sourceforge Community award I freshened up the logo for Carsten Dominik. The original logo was by french illustrator
Christophe Bataillon.

The image shows the before and after of the logo. The site now has the new logo posted.

Djangodose Logo

I finally got some time to work on my backlog of logos this week and they are starting to hit the streets. So if you’re waiting on me to finish the commissioned logos, they are coming quickly! Sorry for delays, it’s been hell-busy here.

djangodose_logo.png

First out the door is the new djangodose logo for they great guys of TWiD fame Eric Florenzano, Brian Rosner and Kevin Fricovsky. I believe they have announced they are recording this Sunday for those (including myself) who are anxious for the new show. I’m still working on the site design which will be finished just in time for the show release.