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.