Skip to content

Commit 01f8e65

Browse files
szabgabszabgab
committed
static blog
1 parent fe0cdc7 commit 01f8e65

File tree

1 file changed

+188
-0
lines changed

1 file changed

+188
-0
lines changed

‎building-a-static-blog-using-blio-and-github.tt‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
=title Building a static blog using Blio and Github
2+
=timestamp 2013-03-28T14:30:01
3+
=indexes Blio, blog, Github
4+
=status show
5+
=author szabgab
6+
=index 1
7+
=archive 1
8+
=feed 1
9+
=comments 1
10+
=social 1
11+
12+
=abstract start
13+
14+
Blio is a simple static blogging engine written by <a href="http://domm.plix.at/">Thomas Klausner</a> (aka. domm).
15+
If you'd like to build your own site, you can use this together with Github and you get free hosting.
16+
17+
As of this writing Blio has not been released to CPAN yet, and it has some rough edges, but if you are the
18+
adventurous type, here you will see how to set it up.
19+
20+
=abstract end
21+
22+
<h2>Getting from Github</h2>
23+
24+
As I mentioned Blio, has not been released yet so the way to install
25+
it is to get the latest version from <a href="https://github.com/domm/Blio">Github</a>.
26+
27+
If you have git installed you can use <hl>git clone git://github.com/domm/Blio.git</hl> to fetch
28+
the latest version. Alternatively, there is a button <b>ZIP</b> on the
29+
<a href="https://github.com/domm/Blio">Github page of Blio</a>. You can download the latest version
30+
of the source code using that button, and then you can unzip it.
31+
32+
<h2>Installing Prerequisites</h2>
33+
34+
Blio uses <a href="http://dzil.org/">Dist::Zilla</a> for packaging so probably the best thing is to
35+
first install Dist::Zilla using <hl>cpanm Dist::Zilla</hl>.
36+
Then you can type <hl>dzil install</hl>. It will install all the pre-requisites and Blio itself as well.
37+
38+
Alternatively, you can install the following modules, that are the pre-requisites of Blio:
39+
40+
<code>
41+
DateTime
42+
DateTime::Format::ISO8601
43+
DateTime::Format::RFC3339
44+
Digest::SHA1
45+
Encode
46+
File::Copy
47+
File::ShareDir
48+
File::Temp
49+
Imager
50+
Markup::Unified
51+
Module::Build
52+
Module::Pluggable
53+
Moose
54+
Moose::Util::TypeConstraints
55+
MooseX::Getopt
56+
MooseX::SimpleConfig
57+
MooseX::Types::Path::Class
58+
namespace::autoclean
59+
Path::Class
60+
Path::Class::Iterator
61+
Template
62+
Test::File
63+
Test::Most
64+
XML::Atom::SimpleFeed
65+
</code>
66+
67+
68+
Once you have installed everything you can go ahead and build your first site:
69+
70+
<h2>Simple setup</h2>
71+
72+
Create an empty directory, let's call it <b>perl_blog</b>.
73+
74+
Inside the <b>perl_blog</b> directory, you have to create a file called <b>blio.ini</b>.
75+
It can be empty, but it must exist. (If using a Linux system, you can just type <b>touch blio.ini</b>.)
76+
77+
In addition, create a subdirectory called <b>src</b> and create a file called <b>src/index.txt</b>
78+
with the following content:
79+
80+
<code>
81+
title: Experimenting with Blio
82+
83+
Hello world
84+
</code>
85+
86+
Pay attention that the filename is all lower case. The extension is <b>.txt</b>.
87+
The first part of the file is the header, there are more parts of it but, the title is required. After the empty line comes the content of the page.
88+
89+
Once you have this you can run <b>blio.pl</b> (while being in the perl_blog directory) that was installed when you installed Blio.
90+
It will create a directory called <b>out</b> and a file called <b>index.html</b> that was generated from the index.txt file.
91+
92+
The directory layout looks like this now:
93+
94+
<code>
95+
|-- perl_blog
96+
|-- blio.ini
97+
|-- src
98+
|-- index.txt
99+
-- out
100+
|-- index.html
101+
</code>
102+
103+
You can now open the html file using your favorite web browser.
104+
105+
While this is a very simple "blog" so far, let's create a Github repository for the source of this site and then we can see
106+
how to deploy the site to Github.
107+
108+
<h2>Create Git repository for the source</h2>
109+
110+
The <b>out</b> directory should not be in the source repository so let's remove it for now: <hl>rm -rf out</hl>
111+
Create a git repository <hl>git init</hl>. Add all the necessary files: <hl>git add blio.ini src</hl> and commit this:
112+
<hl>git commit -m "initial version"</hl>.
113+
114+
Optionally you can create a Github repository for this project and push it there. I have created one called
115+
<a href="https://github.com/szabgab/perl_blog_with_blio">perl_blog_with_blio</a>. You can check it out to see the
116+
history of this article as well.
117+
118+
<h2>Deployment to Github</h2>
119+
120+
Github allows you to create a static web site driven from a repository in several ways. The one I am showing
121+
now is the nicest.
122+
You can create a github repository called USERNAME.github.com (where USERNAME is your username on Github) and
123+
it will be accessible as http://USERNAME.github.com/. Not only that, but you can even ask Github to serve the
124+
same pages when someone visits www.yourdomain.com.
125+
126+
In my case, I created a directory next to the perl_blog directory called <b>szabgab.github.com</b>. That directory
127+
will contain all the files needed on the web site. Both the generated files and other static files (e.g. CSS).
128+
129+
Now you can run <hl>blio.pl --output_dir ../szabgab.github.com</hl> (replacing szabgab with your username).
130+
That will generate the index.html file in the target directory and you will get this layout:
131+
132+
<code>
133+
|-- some_directory
134+
|-- perl_blog
135+
|-- blio.ini
136+
|-- src
137+
|-- index.txt
138+
|-- szabgab.github.com
139+
|-- index.html
140+
</code>
141+
142+
In order to eliminate the need to pass the output_dir parameter every time you can add it to the blio.ini file
143+
like this:
144+
145+
<code>
146+
output_dir=../szabgab.github.com/
147+
</code>
148+
149+
Now go over to the output directory (<hl>cd ../szabgab.github.com</hl>), create a git repository there too,
150+
create a Github repository called USERNAME.github.com (with you username!) and push the local repository out.
151+
Mine is called <a href="https://github.com/szabgab/szabgab.github.com">szabgab.github.com</a>.
152+
At this point, it has a single file called index.html in its root.
153+
(By the time you look at the repository there will be more files in my repository, but as a start there is only this one).
154+
155+
Once you pushed the output repository to Github you can got and drink a tea, or you can visit your favorite social network
156+
and share this article. In any case, Github needs a few minutes till it makes your site live.
157+
158+
After the break you can visit http://USERNAME.github.com/ and see the result. It is not very pretty, but it works!
159+
160+
<h2>Setting up a domain name</h2>
161+
162+
In order to avoid loosing your incoming links when you move your site to some other place, I strongly recommend
163+
setting up your own domain. It only costs 10-20 USD/year. A very good investment.
164+
165+
Once you have a domain you can set it up to point to Github and tell github to serve your pages when someone
166+
is accessing Github via that domain. For this you need to tell your DNS provider to point your host names
167+
to Github and you have to add a file called <b>CNAME</b> in your repository (containing the output files)
168+
with the hostname as the content.
169+
170+
As I only use the <a href="http://pages.github.com/">Github Pages</a> for these experiments, I will use
171+
a hostname in my personal domain. So I set up github.szabgab.com to point to the github server as
172+
described in <a href="https://help.github.com/articles/setting-up-a-custom-domain-with-pages">Setting up a custom domain with Github Pages</a>
173+
and added a file called CNAME with one line in it: <b>github.szabgab.com</b>.
174+
175+
After another tea (and some more sharing of this article) you can check visit USERNAME.github.com again. It will automatically
176+
redirect to the hostname you set up and it will show the same demo page we created.
177+
178+
In my case you try <a href="http://szabgab.github.com/">szabgab.github.com</a> that will redirect to <a href="http://github.szabgab.com/">github.szabgab.com</a>.
179+
180+
<h2>More and nicer pages</h2>
181+
182+
Obviously this is only the first step in creating your on blog, but I hope this little tutorial will help you get started.
183+
You can read more details about Blio in its documentation. Both blio.pl and Blio.pm have some documentation.
184+
185+
If you have any question, comments, don't hesitate to post them here and don't forget to share this article.
186+
If enough people share it, I'll consider myself encouraged to extend the article...
187+
188+

0 commit comments

Comments
 (0)