After procastinating for quite sometime, I finally decided to migrate from blogger to Octopress using Jeklly and likes. In this post, I have tried to compile the steps in detail.
Export xml from blogger
Go to settings page of your blogger and click the “Export blog”, link as shown in the image below.
This will open a modal pop-up window. Click on the “Download blog” button to download an xml output of all your posts.
Store the downloaded xml somewhere on your machine.
In the next section, we will see how to convert the xml into htmls by a running a ruby script. (Note: You should have ruby installed on your machine to run this script). Run gem install nokogiri to install ruby xml parser.
Run the script to create markdown files
Run the script below: ruby blogger_import.rb downloaded_blogger.xml
This will generate _posts and _drafts directories with all relevant posts in html format.
Install & Configure Octopress
Follow the step by step guide here to setup octopress on your local. I have used github pages to deploy the Octopress blog but there are other options as well. Alsobe sure to check the blog confirguration section.
Octopress has options to integrate with 3rd party plugins like:
Sample _config.yml file which I used in this blog setup.
Customizing and Theming
The link gives details of customizing the navigation bar, color schemes etc. There are few themes which can be used to change the aesthetics of the page and layout.
Flaunt your achievement badges from coderwall
Coderwall is the online reputation system for developers. It exposes a simple JSON representation of every profile. The api can used to show off ‘achievemnt badges’.
Add the below script to source/_includes/asides/coderwall.html and add asides/coderwall.html to your default_asides array in _config.yml file.
Make sure you also add:
This will also add endorse me link to your blog as shown below:
Set re-direction from blogger to new Octopress blog
Follow the steps below to setup re-direct from blogger to this new site.
Design -> Layout -> Edit HTML
Find <head> tag
Add the following line below the <head> tag as below:
It is one of the best I have seen so far. Quotes from the repo: ”This course teaches experienced developers Ruby and Ruby-on-Rails. It’s designed to be taught by a practicing rubyist and a teaching assistant. Both individuals must have expert understanding of Ruby, Rack and Ruby-on-Rails.” The list of contributors: https://github.com/generalassembly/ga-ruby-on-rails-for-devs/blob/master/CONTRIBUTORS.md
Course is structured to cover all the platforms (Linux, Mac and yesss Windows). It starts with basics and covers some advanced development guidelines.
An excellent presentation by @dblockdotorg: http://www.slideshare.net/dblockdotorg/crafting-a-rubyonrails-course-for-developers
More resources: http://code.dblock.org/crafting-a-ruby-on-rails-course-for-developers
For last few days I have been struggling with a requirement to show file download indicator. Here’s the requirement.
Web page has a link “Download File”. On click of this link - a JSON post request is sent to the server. The server generates the files based on the JSON input and streams back with Content-Disposition “attachment” for the browser to download. There are several ways to visually indicate the click of the link:
Normal form post - Create a dynamic form and post it. On the server-side make sure content disposition is set to attachment. When browser receives the response, it pops the “Open-Save-Cancel” dialogue box.
- No control of the page response time, page dies in case of timeouts - Page refreshes and the current context of the user is lost
Ajax post - Do an Ajax form post with JSON data. Download “waiting” indicator can be easily initiated with ”Ajax prefilter”. In the response from the server send back the URL to download. Remove the “waiting” indicator. Change the window location to the URL and let the browser do the rest.
- Retain the file on the server and run a background cleanup
Iframe post (recommended solution) - Create a dynamic form and post (target of the form) it to an iframe. Disable the download link, show the “waiting” indicator. Start the timer and look for presence of a cookie. If the cookie is found, remove the indicator and enable the link. This requires some server side code as well: adding the cookie. The detailed sample code:
The client side code:
The server-side code:
Cons: - Server has to set an extra cookie
The third approach has helped in solving for the following: 1. Submit a JSON request to the server 2. Show/Hide a “waiting” indicator 3. Controlling the timeouts and indicate the user of delays (if any) 4. File download handle
Let me know if there are other ways of making it work.