source/_posts/2013-02-16-moving-to-octopress-how-to-customize-it.markdown
f8b1b44d
 ---
 layout: post
 title: "Moving to Octopress - time to customize your blog"
 date: 2013-02-16 22:56
 comments: true
 categories: [octopress]
 cover: /images/cover/avatar.png
 keywords: wordpress, octopress, seo, facebook, twitter, git, guide, howto, plugins
 description: Installing and customizing octopress blog
 ---
 
 I've been a long-time [Wordpress](http://wordpress.com) user. Easy blogging --
 want to write a new post? Click there and there and you can start writing. Too
 easy and boring for hackers. Welcome to [Octopress](http://octopress.org/)
 blogging (and reserve a few hours before starting blogging :) ).
 
 It is really helpful if you know Git, HTML and
 [Markdown](http://daringfireball.net/projects/markdown).
 
 Installing and setup is really easy (the official guide is [here](http://octopress.org/docs/)).
 
 What will probably take a long time is customization. You can do whatever you
 want to. No more restrictive wordpress/blogger/...
 
 0. recommendation: Learn from others. This site is open source. My [Git](http://git.cinan.sk/octopress.git/).
 
 1. recommendation: Read this superb
 [ewal](http://www.ewal.net/2012/09/08/octopress-customizations/) guide. It
 describes how to remove "blog" slug in URL; how to create categories list; how to use
 fancybox gallery for images in articles; how to notify Google and Bing about updating
 your site and some other things.
 
 2. recommendation: SEO fixes. [Here](http://www.yatishmehta.in/seo-for-octopress).
 
 3. recommendation: Setup 404 pages in Nginx. [Here](http://blog.bigdinosaur.org/custom-error-pages/)
 
 4. recommendation: Autopublish new articles on Facebook, Twitter and others
 sites. Sign up for [ifttt.com](https://ifttt.com/) and create a recipe. 
 
 5. recommendation: Add [Open Graph](http://ogp.me/) meta tags to your
 source/\_includes/head.html. Useful if you want to publish your posts on
70b4781e
 Facebook or Reddit. These tags will set appearance of links on Facebook (and maybe other
ada5ede8
 sites). [Facebook debugger](https://developers.facebook.com/tools/debug) will check your settings.
f8b1b44d
 
 	{% img center /images/opengraph.png Facebook and Open Graph meta tags %}
 
 	This is my source/_includes/head.html (notice "description", "keywords" and
 	opengraph tags on lines 30-35)":
 
 	{% codeblock source/_includes/head.html lang:html %}{% raw %}
 	<!DOCTYPE html>
 	<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
 	<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
 	<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
 	<head>
 	  <meta charset="utf-8">
 	  <title>{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }\}</title>
 	  <meta name="author" content="{{ site.author }}">
 	  {% capture description %}{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}{% endcapture %}
 	  <meta name="description" content="{{ description | strip_html | condense_spaces | truncate:150 }}">
 	  {% capture keywords %}{% if page.keywords %}{{ page.keywords }}{% else %}{{ site.keywords }}{% endif %}{% endcapture %}
 	  <meta name="keywords" content="{{ keywords }}">
 	
 	  <!-- http://t.co/dKP3o1e -->
 	  <meta name="HandheldFriendly" content="True">
 	  <meta name="MobileOptimized" content="320">
 	  <meta name="viewport" content="width=device-width, initial-scale=1">
 	
 	  {% capture canonical %}{{ site.url }}{% if site.permalink contains '.html' %}{{ page.url }}{% else %}{% if page.url contains site.category_dir %}/{% endif %}{{ page.url | remove:'index.html' }}{% endif %}{% endcapture %}
 	  <link rel="canonical" href="{{ canonical }}">
 	  <link href="{{ root_url }}/favicon.png" rel="icon">
 	  <link href="{{ root_url }}/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
 	  <script src="{{ root_url }}/javascripts/modernizr-2.0.js"></script>
 	  <script src="{{ root_url }}/javascripts/ender.js"></script>
 	  <script src="{{ root_url }}/javascripts/octopress.js" type="text/javascript"></script>
 	  <link href="{{ site.subscribe_rss }}" rel="alternate" title="{{site.title}}" type="application/atom+xml">
 	  {% include custom/head.html %}
 	  {% include google_analytics.html %}
 	
 	  <meta property="og:site_name" content="{{ site.title }}">
 	  <meta property="og:type" content="article">
 	  <meta property="og:url" content="{{ site.url }}{{ page.url }}">
 	  <meta property="og:image" content="{{ site.url }}{% if page.cover %}{{ page.cover }}{% else %}{{ site.cover }}{% endif %}">
 	  <meta property="og:title" content="{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}"> 
 	  <meta property="og:description" content="{{ description }}">
 	</head>
 	{% endraw %}{% endcodeblock %}