After updating the site to add JQuery, I noticed that the Github aside and the sidebar toggle no longer worked.
Opening up the console I saw the following errors
TypeError: Object 0 has no method ‘charAt’
and for the Github plugin
Method JSONP is not allowed by Access-Control-Allow-Methods
Googling for these lead me to Daniel Hilgarth's blog where he has two posts on how to solve the charAt and jsonp issues.
→ posted on November 20, 2016octopress
I noticed recently that the Octopress Twitter plugin for my sidebar was broken. The reason is that Twitter no longer supports the APIs that the plugin accesses. Instead now they have a widget page to generate html code that will embed a list of your tweets on your page.
I created a widget for myself and customised it by adding the nofooter transparent noheader attributes to data-chrome.
These remove various headings and background colouring so that it blends in with the site a bit more.
To add this to an Octopress site, you replace the code in source/_includes/asides/twitter.html with this new code.
I also added a follow button which displays a Twitter formatted follow button and a count of your subscribers.
The full code is as follows
<!-- source/_includes/asides/twitter.html -->
{% if site.twitter_user %}
<section>
<h1>Latest Tweets</h1>
<a class="twitter-timeline" data-chrome="nofooter transparent noheader" data-tweet-limit="5" href="https://twitter.com/gercondon">Tweets by gercondon</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<a class="twitter-follow-button" href="https://twitter.com/gercondon">Follow @gercondon</a>
</section>
{% endif %}
→ posted on November 9, 2016developmentoctopress
This post documents how I migrated the blog from Wordpress.com to Octopress. There are a number of bloggers who have written about switching their blogs to Octopress. I found these posts very helpful - Scott Muc, Matt Gemmell and Bigdinosaur Blog. The basic sequence of steps I followed was
Ruby Setup
The first step is to install Ruby. If you want to, you can compile this from the source but the better option is to use a third party tool to install and manage Ruby. The one I used is RVM.
By default OS X Lion comes with 1.8.7 pre-installed but Octopress needs 1.9.2. (I tried 1.9.3 at first but Octopress reported an error). I read on Stack Overflow that it's not recommended to upgrade the default installation but instead to install the newer version alongside it. RVM is designed to manage multiple versions of Ruby on a system so it's a nice fit here.
The command to install Ruby is rvm install 1.9.2. However when I tried this I got errors complaining that the C compiler was LLVM based instead of gcc. To get around this I added the following flag rvm install 1.9.2 --with-gcc=clang. Now we can tell RVM to use version 1.9.2 with this command rvm use 1.9.2.
Install Octopress
Installing Octopress is very easy once Ruby is installed. The instructions can be found at Octopress Setup. The install command is rake install and then to build your website run rake generate. Octopress takes whatever pages and posts it finds under the source folder and builds these to a static website. These need to have particular file names and contents, so Octopress provides helper commands to generate a new post or page. These are rake new_page["page_title"] and rake new_post["post_title"] respectively.
Export from Wordpress
To export from Wordpress I simply used their export tool. This exported all the posts in their own html files. This would have been fine for Octopress but I wanted the whole site in Markdown, so I converted each post from html to markdown and added to the source/_posts folder.
Host on Github
Once you have the Octopress blog created you need to host it somewhere. I choose Github as it provides for free hosting of static blogs. Also if I do release some iOS code later it will be on Github, so there's no harm in getting it set up now.
This site has a very good explanation of what is going on with Github. Basically we build our website locally to a folder named public. We create a repository on Github for our webpage. Octopress then uploads the contents of the public folder to the master branch on this repository whenever we run the rake deploy command. It is recommended that you upload the site source to a source branch on the repository. That way you can always regenerate the website even if you delete the local files.
Register URL
I decided to register www.gerardcondon.com for this site as I didn't want to be tied to a Github url in the same way as I was tied to the Wordpress.com one. I didn't need hosting or anything special - just forwarding. I used Namecheap. The price is really cheap for a .com address - only 6 or 7 dollars a year.
There are instructions on Github Pages on how to set up the forwarding. You need to setup an A record to redirect to www.github.com for your url without the www part, i.e. gerardcondon.com will redirect to www.github.com. Then you need to create a CNAME file in github and then setup a CNAME redirect for the www part of the url, i.e. www.gerardcondon.com redirects to gerardcondon.github.com. However I ran into some problems doing this on the namecheap site. When I tried to setup the CNAME I got the following errors
Improper records were NOT saved!
There were issues with some records and they were either set to default or completely removed. Please review the issues below and update again appropriately.
INVALID_ADDR: 'gerardcondon.github.com/' should not be an IP/ URL for CNAME record. (host name: www)
However I just connected to the online chat support and the person assigned to me fixed it up in a few minutes - I have to say they were really helpful. This DNS stuff takes a while to settle down - I think it was a day or so before it had propagated out. Since then I've had no trouble with it.
Octopress tweaks
I've made a few tweaks to Octopress to suit my own tastes.
It's really easy to make changes to Octopress, there is a folder called sass with most of the style stuff. There are a few configuration files also which can be updated. One nice thing about checking all this stuff into github is that you can go back and see what style updates you made in previous commits.
Add Draft folder and sync with Dropbox
At this stage Octopress was installed on my Macbook Air and working perfectly for me. One limitation of this setup was that I could only edit posts from that machine. I didn't mind only being able to regenerate the site from the Air as that's not a common task, but I wanted to be able to write posts from anywhere. I also wanted the ability to write draft posts and not have Octopress automatically publish those.
I found a technique for managing draft posts on Frozen Bytes. This allows you to create a drafts folder and provides commands for moving posts between the draft and published state.
Using this, I created a folder called drafts in Dropbox. I then symlinked to this from inside the sources directory on the Air. All my drafts are now available in Dropbox and I can edit these anywhere. This is especially useful when editing from iOS as there are a number of markdown editors which can edit files on Dropbox.
Summary
I think that's everything! It was fairly straightforward in retrospect to set up. The new setup works really well. I'm very happy with the look of Octopress and the editing workflow in markdown is much better than using the Wordpress editor. Looking forward to using it in future.
→ posted on March 4, 2012octopress
I've decided to switch the blog from Wordpress.com to an Octopress site hosted on Github Pages. From now on there will be no more new posts on Wordpress. I've also registered the domain gerardcondon.com and will be using this address for the blog in future.
I have a few reasons for switching
I found Wordpress.com to be an excellent site in general. When starting off it was very easy to create and get the blog up and running. However you have to use their site to create your posts. Even if you use a text editor you still ultimately have to paste the post into their site, and all subsequent edits have to be done through Wordpress.com. Also the definitive version of the posts are stored in their database.
I prefer to write my documents in plain text files using a markup language. Previously I've used Latex and more recently I've started using Markdown. This has a number of advantages, namely the files can be edited in any editor on any platform and they work very well with source control. Also by separating the content from the typesetting phase, I find that you concentrate better on the actual writing. I hate having to wrestle with formatting in Word; I much prefer leaving that to a program. Donald Knuth & Co. have forgotten more about typesetting than I will ever know.
Wordpress.com doesn't support Markdown so posting involved an extra step of converting the Markdown to HTML. This meant that I had two versions of the blog. One in Markdown on my local machine and another in HTML on Wordpress. For me, it's an axiom that whenever you have two versions of the same data, they will get out of sync. One needs to be the main source. I wanted the local Markdown version to be the canonical version of the site and everything else derived from that.
I think the default Octopress theme looks really good (I really like the Archive page). I first noticed it on Matt Gemmell's site and was impressed by how it looked. It also looks well on mobile sites. I have full control of the css using Octopress so I can tweak whatever I want. I liked the Titan theme on Wordpress except I hated the crosses using for lists. On Wordpress.com there was no way to change these. However on Octopress I make any kind of style update.
I realised that I should get my own domain name instead of using the Wordpress.com address. In future if I need to move my site I can just redirect the domain name and any old links will still work. Whereas I will never own or control the gerardcondon.wordpress.com links. It's better to move now, rather than after I create lots of content at a non portable url. Start as you mean to go on.
The posting workflow is much better now. I write my posts in Markdown on the Mac or on iOS via WriteRoom. Then I run a command from the terminal to regenerate the site and deploy it to Github. Edits work in the same way. The Markdown files also get committed to Github ensuring that no matter where I move the blog in future I will always have the content in an accessible file format.
I'll add a few posts in future on how I got Octopress, Github and my domain all set up and working together.
→ posted on February 16, 2012octopress