/
my-octopress-blog.html
175 lines (160 loc) · 8.5 KB
/
my-octopress-blog.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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>My Octopress Blog</title>
<meta name="author" content="Thilo Michael">
<meta name="description" content="This is a blog and online business card of Thilo Michael.">
<meta name="viewport" content="width=device-width">
<link rel="canonical" href="http://thilo.co">
<link rel="stylesheet" href="./theme/css/screen.css" />
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header style="font-family:'Varela Round',Helvetica,Arial,sans-serif;">
<div class="grid-wrapper">
<div class="grid">
<div class="grid__item two-fifths lap-four-sixths palm-one-whole">
<a href="/" class="site-title">Thilo Michael</a>
</div>
<div class="grid__item three-fifths lap-two-sixths palm-one-whole">
<nav>
<input type="checkbox" id="toggle">
<label for="toggle" class="toggle" data-open="Main Menu" data-close="Close Menu"></label>
<div>
<a href="/atom.xml" class="pull-right menu" style="padding-top: 30px; padding-left: 30px;">
<img src="./theme/images/feed.png"/>
</a>
</div>
<ul class="menu pull-right">
<li><a href="./pages/about-me.html">About me</a></li>
<li><a href="./pages/blog.html">Blog</a></li>
<li><a href="./pages/publications.html">Publications</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="grid-wrapper">
<div class="grid grid-center">
<div class="grid__item two-thirds lap-one-whole palm-one-whole">
<article class="post">
<header>
<h1 class="title indent">
My Octopress Blog
</h1>
<div class="meta clearfix">
<time class="pull-left" datetime="2014-07-30 17:36:44+02:00"><i class="icon-calendar"></i> July 30, 2014</time>
<div class="pull-left" style="width:100%;">
<i class="icon-tags"></i>
<ul class="tags unstyled">
<li><a class='category' href='/tag/blog.html'>blog</a></li>
<li><a class='category' href='/tag/meta.html'>meta</a></li>
<li><a class='category' href='/tag/octopress.html'>octopress</a></li>
</ul>
</div>
</div>
</header>
<p><strong><em>UPDATE: My blog now runs on pelican. Ignore this post. Really.</em></strong></p>
<p>So I have a new website/blog. It is made with the <a href="http://octopress.org">octopress</a> blogging framework. Octopress is rather different from all the content management systems and blogs I've seen before. Since version 2.0 it is based on <a href="https://github.com/jekyll/jekyll">jekyll</a> and thus has a completetly different approach on content management and creation. It uses rake tasks to accomplish most of the work. Because octopress is a framework, the comfort for creating and managing content are rather sparse, but then again it is really powerfull if you know what you're doing.</p>
<!-- more -->
<h3>CMF instead of CMS</h3>
<p>Octopress is a content management framework, not a content management system. What that means in practice is that you would create a new blog entry with a rake task on your commandline like this:</p>
<div class="highlight"><pre><span></span><code>$ rake new_post<span class="o">[</span><span class="s2">"My octopress blog"</span><span class="o">]</span>
</code></pre></div>
<p>This command simply creates a markdown-file with some attributes predefined:</p>
<div class="highlight"><pre><span></span><code>---
layout: post
title: "My octopress blog"
date: 2014-07-30 17:36:44 +0200
comments: true
categories:
---
</code></pre></div>
<p>Below these attributes you can write your blog entry in markdown (with some cool octopress features included). If you want to <em>manage</em> your posts you can add an <code>author</code> or a <code>published</code> field. Because it's markdown you can easily inject some HTML into your post.</p>
<p>That's it. No user management, no unnecessary back-end menus. I really like it :)</p>
<h3>The power of simplicity</h3>
<p>Because octopress consists of a few HTML files (with templating) here and a few sass files there you can easily change the layout and the pages to match how you want them to be.</p>
<p>I really like the idea to use a real files to store the blog posts. I don't really need a fancy SQL database to store information about the user, about plugins and about my posts. Things like comments can be injected with <a href="https://disqus.com">disqus</a>. You can even write your post offline and then upload them as soon as you are back online. It just makes everything so much simpler.</p>
<p>The only downside to this is that you need to deploy your blog every time you post a new entry. But if you host your little blog on <a href="http://heroku.com">Heroku</a> that is less of a problem.
<strong><em>Update: This blog is no longer running on Heroku</em></strong></p>
<h3>Not for everyone</h3>
<p>Octopress however is not suited for everyone. Multi-author blogs are supported, but writing my name into every post does not do it for most people. Implementing your own comment system is nearly impossible without setting up a database.</p>
<p>But octopress does not want to be for everyone. It describes itself as "a blogging framework for hackers". And that is exactly what it is. For people who just want to run their little blog, share their thoughts and ideas and also want to some really cool syntax highlight ;) its a really impressive alternative.</p>
</article>
</div>
<aside id="sidebar" class="grid__item one-third lap-one-whole palm-one-whole">
<div class="grid">
<section class="social aside-module grid__item one-whole lap-one-half">
<h1 class="title delta">
Follow me!
</h1>
<ul class="unstyled">
<li><a class="github" href="//github.com/uhlo"><i class="icon-github"></i> Github</a></li>
<li><a class="tub" href="//tu-berlin.de/?tmichael"><i class="icon-globe"></i> TU Berlin</a></li>
<li><a class="linkedin" href="//www.linkedin.com/in/thilo-michael-695305180/"><i class="icon-linkedin"></i> LinkedIn</a></li>
<li><a class="twitter" href="//twitter.com/uhlomuhlo"><i class="icon-twitter"></i> Twitter</a></li>
</ul>
</section>
<section id="recent-posts" class="aside-module grid__item one-whole lap-one-half">
<h1 class="title delta">Recent Posts</h1>
<ul class="divided">
<li class="post">
<a href="./a-deep-dive-into-rasa.html">A Deep Dive into rasa</a>
</li>
<li class="post">
<a href="./astrologysort.html">AstrologySort</a>
</li>
<li class="post">
<a href="./hello-world-20.html">Hello World 2.0!</a>
</li>
<li class="post">
<a href="./un-interstellar-was-her.html">U.N. Interstellar was her?</a>
</li>
<li class="post">
<a href="./compression-distance.html">Compression Distance</a>
</li>
<li class="post">
<a href="./my-octopress-blog.html">My Octopress Blog</a>
</li>
</ul>
</section>
<section id="categories" class="aside-module grid__item one-whole lap-one-half">
<h1 class="title delta">Cagtegories</h1>
<ul class="divided">
<li class="post">
<a href="./category/dialogue.html">Dialogue</a>
</li>
<li class="post">
<a href="./category/meta.html">Meta</a>
</li>
<li class="post">
<a href="./category/programming.html">Programming</a>
</li>
<li class="post">
<a href="./category/random.html">Random</a>
</li>
</ul>
</section>
</div>
</aside>
</div>
</div>
<footer>
<div class="grid-wrapper">
<div class="grid">
<div class="grid__item">
<p class="copyright">
All content by Thilo Michael and licenced under <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons</a>.<br>
</p>
</div>
</div>
</div>
</footer>
</body>
</html>