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.