Cinan's world

GNU/Linux & free software, howtos, web development, scripts and other geek stuff

Moving to Octopress - Time to Customize Your Blog

I’ve been a long-time Wordpress 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 blogging (and reserve a few hours before starting blogging :) ).

It is really helpful if you know Git, HTML and Markdown.

Installing and setup is really easy (the official guide is here).

What will probably take a long time is customization. You can do whatever you want to. No more restrictive wordpress/blogger/…

  1. recommendation: Learn from others. This site is open source. My Git.

  2. recommendation: Read this superb ewal 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.

  3. recommendation: SEO fixes. Here.

  4. recommendation: Setup 404 pages in Nginx. Here

  5. recommendation: Autopublish new articles on Facebook, Twitter and others sites. Sign up for ifttt.com and create a recipe.

  6. recommendation: Add Open Graph meta tags to your source/_includes/head.html. Useful if you want to publish your posts on Facebook or Reddit. These tags will set appearance of links on Facebook (and maybe other sites). Facebook debugger will check your settings.

    This is my source/_includes/head.html (notice “description”, “keywords” and opengraph tags on lines 30-35)”:

source/_includes/head.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

 <!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>