Permalink
Browse files

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

… the home page.
  • Loading branch information...
1 parent 79e48eb commit 0e5cd221902f29f1ed852e4182ff7b6047e64b82 @mikevalstar committed Mar 15, 2015
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.