Posts for Tag: blogging

Fast blogging setup

## Static vs Dynamic

I've maintained my own website/blog for as long as i can remember. Ever since the days of static HTML pages, simple PHP scripts, [Wordpress](http://wordpress.org) installations, [Joomla](http://www.joomla.org), [Drupal](https://www.drupal.org), [Postnuke](http://www.postnuke.com), [PHPNuke](https://www.phpnuke.org), you name it, i've tried it.

So one day i found out about static site generators. The basic idea is that, instead of having some kind of storage for the content (database), it lives in plain files. The webpages are generated by an engine and can then be served as plain HTML which is - obviously - much faster than any interpreted system (like PHP, Rails, ).

Here's an example of dynamic page generation like - for instance - a Wordpress installation, or a Ruby on Rails website:

The biggest problem with this is speed. Since there are so many steps, it can never be as efficient as static HTML pages. Of course you can always cache the requests and make it a bit faster, but i tend to like the path of least resistance :)

Here's the static generation approach:

The website pages are generated once and served statically, which is much faster.

Before i proceed to explain how i've implemented it, let me just say that there are many advantages for a full fledged dynamic website (e-commerce, storing user information, registrations, etc, etc.). But if your only concern is to publish content on the web and allowing readers to comment on it you can easily pull it off with this system, integrating it with something like [Disqus](https://disqus.com/websites/), for comments.

## Practical example

To implement this system we need:

- **A static website generator**. I chose [Middleman](http://middlemanapp.com/). Others include [Jekyll](http://jekyllrb.com/), [Hugo](http://hugo.spf13.com/, [Pelican](http://blog.getpelican.com/), [Hexo](http://hexo.io/) and [DocPad](http://docpad.org/). - **Some way to transfer the generated files to your server**. [Rsync](http://en.wikipedia.org/wiki/Rsync) is my choice, but you can pull it off in a gazillion ways, including [Dropbox](https://www.dropbox.com) synchronization, for example, or just FTP. - **A web host running a webserver**. In my case i have a [Linode](http://www.linode.com/) with an [Ubuntu](http://www.ubuntu.com) installation that has [Nginx](http://www.nginx.org/) running. Other solutions might include a combination of [Apache](http://httpd.apache.org/), [Dreamhost](http://www.dreamhost.com/), [HTTP Explorer](http://http-explorer.sourceforge.net/), [Bluehost](http://www.bluehost.com/), [LightHTTPD](http://www.lighttpd.net/) and [A Small Orange](http://www.asmallorange.com/)

### Step 1 : Install Middleman

There are plenty of guides on how to install this out there, so i'll just point you to the [getting started guide](http://middlemanapp.com/basics/getting-started/).

### Step 2 : Create your pages

Middleman has a bunch of templates that you can use as a starting point, so check out their fantastic documentation and make it happen. In alternative you can proceed with the example template you should have ended up with if you followed their tutorial.

### Step 3 : Middleman commands to know

Here are the commands you are most likely to use with middleman, and their explanation:

**Start the development server**, so you can test your site at `http://localhost:4567`:

middleman

**Generate a new blog post**, assuming you installed and set up the [middleman-blog plugin](http://middlemanapp.com/basics/blogging/):

middleman article "title of your new post"

**Build the static pages for deployment**:

middleman build

**Deploy your pages using middleman**:

middleman deploy

### Step 4 : Deploy

You don't necessarily need to use the `middleman deploy` command if you don't want to. After you do `middleman build` all your generated content can be found inside the `build` folder on your project root. Deploying it is simply a matter of getting those files into your webserver. And for that you can use any method you prefer.

I like to let my server do all the work of building and deploying by using the following workflow:

- I write a post or modify a page - I call a script on my local computer that does the following:

#!/bin/sh rsync -h -r --delete /data/static-blog/source/* void@blog:/home/void/static-blog/source ssh void@blog "touch /home/void/static-blog/.build"

First, it copies all of my site's sources into the working folder on the server (this is the step where you could use dropbox, btw). Then it creates a file on that folder (`.build`) that instructs the server to build and deploy the website automatically.

- The server has a cron job running every X minutes that executes a script:

*/5 * * * * /home/void/bin/build_blog.sh

And the contents of that script are:

#!/bin/bash if [ -e "/home/void/static-blog/.build" ] then logger -s "Blog: Starting build..." logger -s "Blog: Sourcing RVM..." source /home/void/.rvm/environments/ruby-2.0.0-p0 logger -s "Blog: Removing order file..." rm /home/void/static-blog/.build logger -s "Blog: Getting into folder..." cd /home/void/static-blog logger -s "Blog: Executing bundle install..." /home/void/.rvm/gems/ruby-2.0.0-p0/bin/bundle install logger -s "Blog: Building files..." /home/void/.rvm/gems/ruby-2.0.0-p0/bin/middleman build logger -s "Blog: Copying files into place..." rsync -h -r --delete build/* /data/static-blog/live/ logger -s "Blog: Build done." fi

Simply put, the script checks for the existence of the `.build` file inside the working folder and - if so - sets up the environment for bundle, generates the website, and moves the generated files in the `build` folder into the nginx folder i have setup in `/data`. It also removes the trigger `.build` file so the process isn't restarted on the next cron execution.

## Conclusion and future work

I think this is an overall nice setup. Things i would like to improve include not having to trigger the build process. Ideally any change to the blog folder on my laptop should automatically build and deploy the website. Reasons why i haven't been able to do it:

- Dropbox doesn't seem to trigger file changes for [incron](http://inotify.aiken.cz/?section=incron&page=about&lang=en) (a file system watch service), which sucks. - [inotify](http://inotify.aiken.cz) is an alternative to incron, but unfortunately i've ran into another problem: Changes in files inside the working folder trigger multiple alarms (sometimes more than one per changed file). This means i have no way of knowing if the file syncronization has ended (either by dropbox or rsync) and wether i can start the build process or not. Otherwise i risk building with only half the files in place and that might break the site.

If you have any ideas on how to make the process more efficient [please share](http://twitter.com/nocivus); i would love to hear all about it.

'Way too many websites'

I don't know about you but - over the years - i've amassed way too many different blog and social services' accounts. [Posterous](http://posterous.com) (now closed), [Blogger](http://blogger.com), [Tumblr](http://tumblr.com), [Wordpress](http://wordpress.com), this self hosted blog, [Facebook](http://facebook.com/nocivus), [Twitter](http://twitter.com/nocivus), [Pinterest](http://pinterest.com), [Instagram](http://instagram.com), [Flickr](http://flickr.com), [Picasa](http://picasaweb.com), [Foursquare](http://foursquare.com), Gowalla (now closed), the list is endless.

Since we all know there is a limit to the amount of information that can be both broadcasted and consumed i finally decided to give into the urge to close a bunch of those extra accounts, starting with Tumblr.

Hopefully i will dedicate more time to my main blog, maybe even give it a proper name :)

SecuritySpy Control

Yesterday i made my first attempt at selling an Android application on the Play Store. Knowing both the Apple Store and the Play Store, i can't help thinking that the latter was a much more pleasant experience than Apple's. Maybe because of the underlying web technology, or the fact that the pages loaded faster, or simply because the number of steps was lower and their explanation was much more trivial, i have to admit that i prefer Google's experience.

In any case, this is purely from a merchant developer's perspective, it has nothing to do with the stores' experiences to the customers. In that regard both Apple and Google did a fantastic job. Google even went the extra mile allowing you to purchase stuff on the web store and "telling" your device to install it automagically. I, for one, love that feature.

That's it. This was mostly a comparison post and, at the same time, an experiment for my new multisite blog installation with both English and my native language, Portuguese. If you click the flag on the left sidebar you should be transported to the same post in a different language. Fingers crossed ;)

Idea - HTML WYSIWYG editor with Flickr upload support

The biggest problem with this, is that WP's interface to create posts is, again, awesome. You can find plugins for pretty much anything, especially to do tasks that are otherwise plain boring, like uploading pictures to your flickr account and instantly have them available in your post for inclusion. I've been trying to find something like that for those nice HTML editors out there (like tinyMCE and CKEditor), but so far have had no luck.

Anyone out there knows if something like that exists yet and where can i find it?

HTML WYSIWYG editor with Flickr upload support?

Lately i've been tinkering around with the idea of recreating my blog in a more handcrafted way (ruby on rails) as opposed to the current implementation using Wordpress. Don't get me wrong Wordpress is awesome. It has many years and millions of websites as a testament of it's awesomeness behind it. But i guess my hacker's vein popups up every now and then to whisper the reasons why i should have something custom made :) The biggest problem with this, is that WP's interface to create posts is, again, awesome. You can find plugins for pretty much anything, especially to do tasks that are otherwise plain boring, like uploading pictures to your flickr account and instantly have them available in your post for inclusion. I've been trying to find something like that for those nice HTML editors out there (like tinyMCE and CKEditor), but so far have had no luck. Anyone out there knows if something like that exists yet and where can i find it?