Migrating a Wordpress blog to Awestruct

2012-06-14  |   |  website   awestruct   blog  

As I said earlier, I moved my blog from a Wordpress instance to Awestruct, a framework for creating static HTML sites and blogs.

The process is roughly made of these steps:

  1. Move comments to Disqus or another hosted service
  2. Initialize Awestruct's structure
  3. Import the blog posts from Wordpress to Awestruct
  4. Add the necessary Awestruct extensions
  5. Write the correct redirect rules

Moving comments to a hosted service

Because Awestruct is a static HTML generator, you need to use a hosted service like IntenseDebate or Disqus. I personally use Disqus. The import process is easy and involve installing a Disqus plugin in your Wordpress instance.

Initialize Awestruct's structure

Awestruct has a decent getting started section but I find the easiest approach is to fork an existing Awestruct example and change what you want. You can take my website source as an example if you want.

Import blog posts

I wanted to keep my old content and get rid of the Wordpress instance. In Wordpress, export your blog content (Tools->Export, all content). The XML file will be used to create the various blog entries in Awestruct.

The import script is available here and takes the Wordpress xml file and the output directory. In my case my blog is at http://emmanuelbernard.com/blog/

./_bin/import ~/Downloads/wordpress-export.xml ./blog

Edit it to reference your previous blog URL. With that the script will make sure local images, PDF etc are properly imported as well instead of simply referenced.

For each blog entry, a .erb file is created.

Note that the import process might fail. Don't worry, simply read the error message and try and fix the xml file and run the import process again. In my case, I needed to add an empty line right before </pre> or </blockquote> elements. After a few stop and go you will have your data fully imported.

Add the necessary Awestruct extensions

Blogs in Awestruct are build by a few extensions:

  • Posts: creates the blog structure and pages based on the content of a directory
  • Paginator (optional): paginate the blog entries
  • Tagger (optional): generate the tag structure and pages
  • TagCloud (optional): generate a tag cloud
  • Atomizer: generate the atom feed
  • Disqus: add the Disqus integration to your site

Check out my website source for an example. Note that at the time of writing, I use some custom versions of these extensions but these changes are being pushed to Awestruct.

Write the correct redirect rules

If your URL structure has changed either because of a relative URL change, because you move to a new (sub)domain or both, you will need to write 301 redirect rules:

  • old links spread on the internet will still work
  • people registered to your old feed will not get lost
  • Google will understand you moved your blog, reindex it and remove the old references
  • Disqus will move your comments from the old blog to the new blog

In my .htaccess file, you can see 5 main redirections:

  • redirect / from the old domain to the new domain
  • redirect the old feed to the new feed
  • redirect old posts to new posts (with a regexp or manual)
  • redirect category urls to the new tag urls
  • redirect anything else to the new blog

Let's look at the file

RewriteEngine on
RewriteCond %{HTTP_HOST} ^blog.emmanuelbernard.com$

# Old feed redirected
RewriteRule feed/ http://emmanuelbernard.com/blog/feed.atom [R=301,L]

# Redirect 2012/04/07/something to http://emmanuelbernard.com/blog/2012/04/07/something
RewriteRule ([0-2][0-9][0-9][0-9])/([0-1][0-9])/([0-3][0-9])/([^/]+)/ http://emmanuelbernard.com/blog/$1/$2/$3/$4/ [R=301,L]

# Redirect category/slug to http://emmanuelbernard.com/tags/slug
RewriteRule category/([^/]+)/ http://emmanuelbernard.com/blog/tags/$1/ [R=301,L]

# Top level url redurect
RewriteRule ^/?$ http://emmanuelbernard.com/blog/ [R=301,L]

# Manual redirect form old URL scheme yyyy/mm to new blog
RewriteRule 2007/01/activerecord-pattern-so-what[/]? http://emmanuelbernard.com/blog/2007/01/07/activerecord-pattern-so-what/ [R=301,L]
# ...

# Redirect anything else to new blog
RewriteRule ^(.*)$ http://emmanuelbernard.com/blog/

Because my old url scheme was yyyy/mm/slug and the new one is yyyy/mm/dd/slug, I could not write a regexp based redirect rules. But I used a small Ruby script to convert the old URLs to the new URLs based on the content of my Awestruct blog directory. Check out the script here.

#!/usr/bin/env ruby
#
# Generate a htaccess rule for each old blog entry from
# http://blog.emmanuelbernard.com/yyyy/mm/slug to http://emmanuelbernard.com/blog/yyyy/mm/dd/slug
# Has to be manual as the day is unknown in the URL
#
Dir.foreach("../blog") { |file| 
    if (file =~ /(20[0-1][0-9])-([0-1][0-9])-([0-3][0-9])-([^\/]+).html.erb/)
        result = "RewriteRule " << $1 << "/" << $2 << "/" << $4 << "[/]?"
        result = result << " http://emmanuelbernard.com/blog/"
        result = result << $1 << "/" << $2 << "/" << $3 << "/" << $4 << "/ [R=301,L]"
        puts result
    end
}

Publish

Publish your Awestruct website on your server and test :)

The final step is to ask Disqus to listen to the 301 redirects to attach the old comments to the new Blog entries. It's in Admin -> Migrate tools -> Redirect Crawler.

And voilà! You have a fully upgraded blog :)


Feedback on Twitter Bootstrap

2012-04-11  |   |  css   website   tool  

Everyone and his dog is in love with Twitter Bootstrap, so I figured I would give it a try and build my website with it.

What is Twitter Bootstrap

Twitter Bootstrap is a HTML(5), CSS and JavaScript toolkit offering a grid based scaffolding and a set of UI components to quickly get started. And best of all it does not look bad :)

It is not too difficult to get into it. While it will not really revolutionize people already familiar with Blueprint CSS and CSS in general, it does however bring a set of standardized components that tend to bring good practice to your website:

  • nice styling for common constructs like code, tables, inputs etc
  • nice set of sprited icons for various elements
  • good looking buttons and labels
  • nice navigation tools like breadcrumbs, pagination, and of course nav bars
  • good largely spaced headline styles
  • closable alert and informative messages
  • progress bar
  • and many more things both static and dynamic

Responsive design

One very interesting feature is built-in support for responsive design. By combining the grid scaffolding and a bit of JavaScript magic, the content of the page adjusts itself to look best for your browser size. That's particularly useful to make a website that looks nice for both big screens and smartphones.

Check it out, change the size of your browser's window and you will see how the website reacts. It's not perfect and cannot match a dedicated website but that's pretty good.

Using it

Understanding how Twitter Bootstrap works and how to use it is relatively easy and quick. The documentation is pretty good and driven by examples. It could use a few extra examples here and there though.

It is not exempt of bugs but overall things are working as expected. I stumbled upon several bugs but most of them were fixed in their latest version (2.0.3). I am unfortunately stuck on version 2.0.1. Does it work on Internet Explorer? Good question, I don't have a IE installed to check it out. If my website looks like crap and you are using Internet Explorer, then the answer is no.

Twitter Bootstrap is built using Less. I unfortunately use SCSS and had to use a port that has not upgraded to 2.0.3 yet.

The curse

Now the big problem with Twitter Bootstrap is that pretty much all websites using it look alike. The most defining element is the nav bar that unfortunately is one of the main signature component of a website. Some themes exist, otherwise you will have to use Less or their Boostrap customizer to get something more unique. I am also not a big fan of their default font style and size which I changed personally.

Verdict

Overall it was a good experience and the UI components at my disposal helped me make a better website. Yes my site look like many Twitter Bootstrap sites out there ; though I took the extra time to customize it more than the average Joe. It is hopefully different enough :)

If you want to explore Twitter Bootstrap with a practical example, check out my website source code.


The perfect storm creates new website and blog

2012-04-10  |   |  website  

I have been fed up with Wordpress for a while now. Having to upgrade the core plus an average of 4 plugins every time I went to blog was too much. And I am not even mentioning the security risk or the fact that some services flag wordpress installs as malicious websites...

I have been wanting to migrate the blog to Awestruct for a while but frankly got lazy. My core website was already generated with Awestruct and I wanted to give Twitter Bootstrap a try. Twitter Bootstrap is a CSS / javascript / HTML 5 toolkit to get started quickly.

So I started with that and moved my main website to use Twitter Bootstrap. While I was at it, I have refreshed both content and style to get:

  • less chatty pages: especially the home page
  • better page titles
  • add a section on what projects I work on

And boom, I decided to go all in and also update my blog, importing them from Wordpress. I'll give my feedback on both Twitter Bootstrap and moving a blog in a later post. But let me tell you, the actual content migration was the easy part. Realizing after the fact that a couple of 301 redirects were mandatory for Google to be happy was an interesting experience :)

Anyways, let me know what you think of the website and blog refresh.


Awestruct: building dynamic static web sites

2011-07-08  |   |  git   tool   website  

I've been wanting to update my personal site for a while as it was done in iWeb and Apple is basically killing the product. Through discussions at Red Hat, I tried Awestruct, a tool to generate static web sites while still benefitting from templating, blog support and other kind of neat automations.

Awestruct is a project started and lead by Bob McWhirter, a JBoss fellow known amongst other things for the awesomeness of his project names. Let me tell you this tool is fantastic. It is a ruby based tool that generates a fully static website (.html, .css and resource files) based on:
  • content written in a few available markup languages (Markdown is one, haml is another)
  • layouts letting you template the structure of your website
  • style via Sass, a superset of CSS that ends up generating .css files

I am not a web savvy guy. I know HTML a bit and CSS half a bit. Actually, I know that the best resource on the web is w3Schools.com and that's it. I was able to redo my website in about half a day from downloading Awestruct to deploying the generated site. The beauty is that I can now add pages very easily in an extremely consistent look.

Another useful part is Awestruct extensions and helpers. While the site is a static website, any content you can generate based on some structured data can end up as a part of your website:

  • a blog (ie take elements in a directory and render them as blog entries including the rss feed)
  • display a tag cloud and generate the list of pages per tag
  • display the list of your project releases
  • your own extension (if you know some Ruby, you should be good)

Now add some dust of Javascript and you can add things like

  • Google Analytics integration with one line of config
  • Comments support on your static website thanks to the javascript integration with IntenseDebase.

What I like about Awestruct is that the good libraries are picked for you (Haml, Compass-style etc) but the killer features are two-fold:

  • you can tell it to deploy and it will rsync the new website for you in one simple command (it has profiles too like dev, staging and production)
  • you can store everything in Git

Now you have a Git stored, simply deployable, easily customizable and templated website. With a bit of scripting you could get people pushing content in Git and get the website automatically generated and published. Heck you can even generate content automatically as part of a project release and script that (my dream!).

Awestruct sites are in the middle between fully dynamic sites reading stuffs from a datasource and purely static pages manually edited. It's kind of a dynamic static website.

The only feature I miss is a search engine but one could imagine:

  • generating index pages during the website construction (/index/emmanuel.html, /index/hibernate.html ...)
  • get some piece of Javascript that read queries and do n intersection of the content stored in all matching indexes

Bob, got some free time?


Name: Emmanuel Bernard
Bio tags: French, Open Source actor, Hibernate, (No)SQL, JCP, JBoss, Snowboard, Economy
Employer: JBoss by Red Hat
Resume: LinkedIn
Team blog: in.relation.to
Personal blog: No relation to
Microblog: Twitter, Google+
Geoloc: Paris, France

Tags