The 5 minute Blog


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. 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. (That's another 5 minutes!).

See The Result

You can see the 5 minute blog in action. 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.