The 5 minute Blog


docs/setup-a-blog
/*
Title: The 5 minute Blog
chapter: 0.12
Comments: on
Featured: true
Date: 02 July 2014
*/
[phile]: http://github.com/PhileCMS
[phileblog]: https://github.com/PhileCMS/Phile-Blog-Theme
[jacmgr5minblog]: http://www.jhinline.com/philecms/5minuteblog

## Install

Follow the Phile installation instructions.  Make sure the default install is running as expected.

Make a bunch of blog files in markdown with a `.md` extension.  Each post is one file.

Each Blog File should have a meta data section at the top of the post that looks like this. You need a title and a date.  Put the date in any format you want, but I suggest `YYYYMMDD` format since it is sortable.

~~~~
/*
Title: The title for this post
Date:  YYYYMMDD
*/
#My First Blog post
Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Donec elit lorem, ultrices eu lobortis
consequat, ...
~~~~

Copy these blog files to the `content` folder of your phile installation.  Load the site in your browser.

You should see all the posts in the top menu.  This is not very useful for a blog.  You probably want an index page listing all the posts, and you don't want them all listed on the top. Here is how to make this blog-like.

* In the default theme folder find the `themes\default\index.html` template. Edit the template file and change the navigation.

FROM:
~~~~
<ul class="nav">
	{% for page in pages %}
		<li><a href="{{ page.url }}">{{ page.title }}</a></li>
	{% endfor %}
</ul>
~~~~

TO:
~~~~
<ul class="nav">
	<li><a href="{{ base_url }}" >Home</a></li>
	<li><a href="{{ base_url }}/about" >About</a></li>
</ul>
~~~~
* So you don't have an about page, just make a file `about.md` and give it a title in the meta section. Don't put a date meta in this file.

* In the content folder, edit `index.md` and delete all the phile documentation and make it say something like:
~~~~
/*
Title: Welcome
Description: Home Page of Blog
*/
## Welcome to My Blog

Enjoy these posts.

~~~~

* Reload your site.  You won't see all your posts yet, but make sure the menu works and you have the slimmed down home page.

## Make the index template work

OK, now we just need to edit `index.html` again.

FROM:
~~~~
<section id="content">
	<div class="inner">
		{{ content }}
	</div>
</section>
~~~~

TO:
~~~~
<section id="content">
	<div class="inner">
		{% if current_page.url == 'index' %}
			{# This part for HOME PAGE index #}
			{{ content }}
			<hr>
			<h2>Latest Posts</h2>
			{% for page in pages %}
					{# just show all pages, i did not add meta 'template: post' to all the posts #}
						<article>
							<h3><a href="{{ page.url }}">{{ page.meta.title }}</a></h3>
							<span class="post-date">Date: <em>{{ page.meta.date|date(config.date_format) }}</em></span><br>
							{# remove the formatting and limit the string to 300 characters #}
							<p>{{ page.content|striptags|slice(0, 300) }}...</p>
							<a href="{{ page.url }}" title="{{ page.title }}" class="btn">Read More</a>
						</article>
			{% endfor %}
		{% else %}
			{# This part for ALL other non index pages #}
			<article>
				{# use the current page meta to show some info about this post #}
				<h2><a href="{{ current_page.url }}">{{ current_page.meta.title }}</a></h2>
				{# format the date here to be the one from the config #}
				<span class="post-date">Date: <em>{{ current_page.meta.date|date(config.date_format) }}</em></span><br>
				{{ content }}
				<a href="{{ base_url }}" title="Homepage" class="btn">Back Home</a>
			</article>
		{% endif %}
	</div>
</section>
~~~~

OK.  You have a basic working blog in under 5 minutes.

## What's next

* Check out the [phile team's blog template][phileblog].  It is a little more sophisticated but useful to get more ideas for what you can do with phile.  My templates above were simplified from theirs.

* Add pagination to the index page that shows only a few posts on the index page and then you have some pagination for older or newer posts.  This can be done with the [jacpagination plugin](plugins/plugin.jacpagination).  (That's another 5 minutes!).

## See The Result

You can see the [5 minute blog in action][jacmgr5minblog].  It is only what is described in this post and includes only the pagination plugin.  Your test should look like this if you followed the above.