Permalink
Browse files

Part 2 of the metalsmith series. Move to collections and use those on…

… the home page.
  • Loading branch information...
mikevalstar committed Mar 15, 2015
1 parent 79e48eb commit 0e5cd221902f29f1ed852e4182ff7b6047e64b82
Showing with 118 additions and 17 deletions.
  1. +0 −14 src/index.md
  2. +26 −0 src/posts/2015-03-13-initial-post.md
  3. +67 −0 src/posts/2015-03-15-starting.md
  4. +8 −3 templates/home.hbt
  5. +17 −0 templates/post.hbt
View
@@ -3,17 +3,3 @@ title: Blog Home
template: home.hbt
permalink: false
---
## A New Site
I've gotten in the habbit of re-working my website every year or so due to it
not having one or more features. The features I want to show are generally to highlight
both my skill as a web developer and to make the website robust enough to write
any type of page/tutorial/video/other.
I plan to do what I have done before and build this website as a tutorial for
other developers and myself to show all of th fetaures required in a modern CMS
and blogging system.
I hope to create a site that not only shows how to build a node.js blogging platform,
but is also robust enough to handle virtually unlimited traffic with minimal response time.
@@ -0,0 +1,26 @@
---
title: A New Site
link: a-new-site
template: post.hbt
datetime: 2015-03-13 12:00:00
author:
name: Mike Valstar
email: mikevalstar@gmail.com
short: >
I've gotten in the habbit of re-working my website every year or so due to it
not having one or more features. The features I want to show are generally to highlight
both my skill as a web developer and to make the website robust enough to write
any type of page/tutorial/video/other.
---
I've gotten in the habbit of re-working my website every year or so due to it
not having one or more features. The features I want to show are generally to highlight
both my skill as a web developer and to make the website robust enough to write
any type of page/tutorial/video/other.
I plan to do what I have done before and build this website as a tutorial for
other developers and myself to show all of th fetaures required in a modern CMS
and blogging system.
I hope to create a site that not only shows how to build a node.js blogging platform,
but is also robust enough to handle virtually unlimited traffic with minimal response time.
@@ -0,0 +1,67 @@
---
title: Getting Started
link: getting-started
template: post.hbt
series: beginning-metalsmith
datetime: 2015-03-15 12:00:00
author:
name: Mike Valstar
email: mikevalstar@gmail.com
short: >
This is a test short thing
---
Getting started is always the worst part of a project for me.
There are so many possibilities when starting a new project, and so many choices to be made.
When working on a job for work, it's easier to get started; I've got **deadlines**.
But for a personal project you've got *all the time in the world*.
To get over this paralysis I've adapted the same methodology in both my job and my personal projects.
How I like to approach my projects these days is to simply get started and assume some mistakes will be made.
But to code my projects that mistakes are easy to correct.
That the overall architecture of the project can and will remain regardless of changes to libraries,
plugins or changes to the web. It's been my experience that the web changes, but good coding practices stay (*mostly*) the same.
That all being said, any new project does require that you make *some* decisions up front.
So for this project, I've come up with a few requirements:
1. The site should be hostable anywhere
2. Extremely fast loading time ( <20ms )
3. Be able to post from all machines I have access to (including mobile)
4. Should use the most modern standard(s) possible for all things possible
5. Have a blog
6. Allow for 1-off templates easily
7. Work on all social platforms (*yes that's a tall order*)
8. Be responsible to the web community (more on this later)
9. Be complicated enough to remain interesting
Not all of the above requirements need to be fulfilled during the first step of our project.
So let's get started.
## Part 1: The Basics
With respect to points **#1** and **#2** the easiest and in my opinion best way to achieve this is to generate a [static website](http://en.wikipedia.org/wiki/Static_web_page).
Additionally these points cover everything I need to know to get started.
Now a truly static website is, as the wikipedia describes, a pain to manage.
So what we need is a tool that generates a static site using dynamic data.
From one or two projects I've written for clients in the past, I've found [Metalsmith](http://www.metalsmith.io/) to be one of the best.
It's simple enough that you can read the source code yourself and understand all of it;
And it's very very easily extendable once you understand the concept.
Under [my first commit for this project](https://github.com/mikevalstar/mikevalstar_com3/commit/df5a656b3e26d8dd8a8f3bbdd54185cf050fef65)
I've started with the simplest form of using Metalsmith as a [Gulp](http://gulpjs.com/) task.
In the below file, I use a variant of metalsmith called gulpsmith with a few basic plugins for markdown, templates and permalinks.
<script src="https://gist.github.com/mikevalstar/b05aae4a9bba5ee168bb.js"></script>
*Note: I am intentionally going to gloss over the styling, html and deployment of the project in this part of the tutorial for later.*
The important part task in the above Gulp file is the "metalsmith" task (lines 52-74).
Within this task we first populate the gulpsmith task with all of the markdown files in the src folder.
Gulpsmith in turn uses the regular Metalsmith plugins to first add collections to all the files for pages and posts,
secondly to parse the content as markdown, thirdly to parse those contents into templates and
lastly set the file structure for the output using the permalinks collection;
Gulp finally outputs all of these files into the build directory.
It's as simple as that. In part 2 we will setup templates and markdown files to output a simple starter blog.
View
@@ -2,9 +2,14 @@
<div id="home">
<article>
{{{contents}}}
</article>
{{#each collections.post}}
<div class="post_short">
<h1><a href="/post/{{{this.link}}}">{{this.title}}</a></h1>
<article>
{{{this.short}}}
</article>
</div>
{{/each}}
</div>
View
@@ -0,0 +1,17 @@
{{> header}}
<div id="post">
<h1>{{{title}}}</h1>
<article>
{{{contents}}}
<p>
<span class="author">By <a rel="author" href="mailto:{{{this.author.email}}}">{{{this.author.name}}}</a></span>
on <time pubdate datetime="{{{this.datetime}}}">{{{this.datetime}}}</time>
</p>
</article>
</div>
{{> footer}}

0 comments on commit 0e5cd22

Please sign in to comment.