Integrating our Blogger-powered blog!!

This blog is powered by Google's Blogger. It's quite obvious if you pay attention to our favicon (yes, we need a proper favicon) or if you are familiar with other Blogger's blogs structure. And we don't want to hide hit. It's a good tool. No need to care about hosting or backup issues. Plenty of space to store images. And best of all, it's free.

AND we wanted to make our blog part of our website, under a single domain, making a seamless integration between them.

A little tweaking over one of Blogger's default templates solved the design problem (apart of a font problem in Firefox that we will explain in other post).

We REALLY wanted to serve the blog under our website domain and not a subdomain. Our website is not that big so having richer content would improve our SEO/SEP. But Blogger doesn't offer that kind of personalization. Only defining a custom domain.  So we had to do some hacking in our web server.

So our OBJECTIVE was to serve our blog under http://www.trenddevs.co.uk/blog/ instead of under http://trenddevs.blogger.co.uk/  - which is the default blogger domain -  or    under http://blog.trenddevs.co.uk/  - only customization option offered by Blogger.

We achieved that configuring mod_proxy_http and mod_proxy_html in our Apache Httpd server 2.4 for Linux

• mod_proxy_http is part of the default Apache installation in CentOS, but 
• mod_proxy_html needs to install an additional package via $sudo yum install mod_proxy_html

Once both modules were installed and configured in Apache, we added some lines to our VirtuaHost

<VirtualHost *:80>
  ServerName www.trenddevs.co.uk
    
  # other config...

  RewriteEngine on
  RewriteRule ^/blog$ http://www.trenddevs.co.uk/blog/ [R=302]

  ProxyPass /blog/ http://trenddevs.blogspot.co.uk/
  ProxyPassReverse /blog/ http://trenddevs.blogspot.co.uk/

  <Location /blog>
     ProxyHTMLURLMap http://trenddevs.blogspot.co.uk/ /blog/
     ProxyHTMLURLMap http://trenddevs.blogspot.com/ /blog/
     SetOutputFilter  proxy-html
     RequestHeader    unset  Accept-Encoding
  </Location>

</VirtualHost>

Lines 9 and 10 are telling mod_proxy_http to proxy all requests to /blog/ and redirect them to the real Blogger domain.  And lines 12 to 17 configure mod_proxy_html to rewrite all responses to /blog/ requests (which were re-requested to Blogger) and do the magic so all links in our HTML point back to our domain. That creates the effect of our blog being hosted by ourselves.

As a bonus, lines 6 and 7 enable mod_rewrite and make that requests to http://www.trenddevs.co.uk/blog are redirected to http://www.trenddevs.co.uk/blog/ .

Not a big deal, but it works!