057 ghost blogging platform

sayanee · Jan 31, 2014 · 2028326 · 2028326
1 parent 0c7b9b5
commit 2028326
Show file tree

Hide file tree

Showing 9 changed files with 177 additions and 6 deletions.
diff --git a/057-ghost/readme.md b/057-ghost/readme.md
@@ -0,0 +1,3 @@
+057 Ghost
+
+For explanatory notes, video file, tool version and other info, please refer to the [screencast link](http://build-podcast.com/ghost/)
diff --git a/057-ghost/travels-theme/default.hbs b/057-ghost/travels-theme/default.hbs
@@ -0,0 +1,10 @@
+<!DOCTYPE>
+<html>
+<head>
+  <title>{{meta_title}}</title>
+  {{ghost_head}}
+</head>
+<body>
+  {{{body}}}
+</body>
+</html>
diff --git a/057-ghost/travels-theme/index.hbs b/057-ghost/travels-theme/index.hbs
@@ -0,0 +1,8 @@
+{{!< default}}
+
+{{#foreach posts}}
+  <h2><a href="{{url}}">{{title}}</a></h2>
+  <p>{{excerpt}}</p>
+  <span datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MM YYYY"}}</span>
+
+{{/foreach}}
diff --git a/057-ghost/travels-theme/post.hbs b/057-ghost/travels-theme/post.hbs
@@ -0,0 +1,6 @@
+{{!< default}}
+
+{{#post}}
+  <h1>{{title}}</h1>
+  <section>{{content}}</section>
+{{/post}}
diff --git a/_config.yml b/_config.yml
@@ -60,5 +60,6 @@ exclude: ['sass', 'node_modules', 'Gruntfile.js', 'package.json', 'readme.md', '
   '053-command-line-apps',
   '054-d3js',
   '055-ubuntu',
-  '056-angularjs'
+  '056-angularjs',
+  '057-ghost'
 ]
diff --git a/_dev_config.yml b/_dev_config.yml
@@ -60,5 +60,6 @@ exclude: ['sass', 'node_modules', 'Gruntfile.js', 'package.json', 'readme.md', '
   '053-command-line-apps',
   '054-d3js',
   '055-ubuntu',
-  '056-angularjs'
+  '056-angularjs',
+  '057-ghost'
 ]
diff --git a/_posts/2014-01-31-ghost.md b/_posts/2014-01-31-ghost.md
@@ -0,0 +1,142 @@
+---
+title: 057 Ghost
+title_lowercase: 057 ghost
+layout: post
+tags: tutorial, screencast, technology, development, ghost, blog, node
+description: Ghost is a NodeJS based blogging platform. In this episode, we will explore how to run Ghost on ghost.org and our local machine, create the simplest theme possible to understand the structure of the blog, and finally host it ourself on AWS EC2.
+permalink: /ghost/
+enclosure: http://video.build-podcast.com/057-ghost.mp4
+length: 222501721
+---
+
+<div id="video"><iframe width="420" height="315" src="//www.youtube.com/embed/0jFTcSSDgoU" frameborder="0" allowfullscreen></iframe></div>
+
+[Ghost](https://ghost.org/) is a [NodeJS](http://nodejs.org/) based blogging platform. In this episode, we will explore how to run Ghost on ghost.org and our local machine, create the simplest theme possible to understand the structure of the blog, and finally host it ourself on [AWS EC2](http://aws.amazon.com/ec2/).
+
+**Download video**: [mp4](http://video.build-podcast.com/057-ghost.mp4)
+
+**Sample code**: [Github](https://github.com/sayanee/build-podcast/tree/master/057-ghost)
+
+**Version**: 0.4.1
+
+**Similar episodes**: [005 Markdown](/markdown), [006 Wordpress](/wordpress), [020 Nanoc](/nanoc), [033 AWS](/aws), [037 Jekyll](/jekyll), [044 Node](/node)
+
+##Background on Ghost
+1. [Main website](https://ghost.org/) and [features](https://ghost.org/features/)
+1. [30 day free trial](https://ghost.org/subscribe/trial/)
+
+##Things to learn with Ghost
+
+###1. Make a blog on ghost.org
+
+1. Try the 30 day trial plan
+1. Sign up
+1. Edit the first default post
+1. Features:
+    - Markdown and help
+    - Edit tags
+    - Change the permalink
+    - Install a free theme from [Marketplace](http://marketplace.ghost.org/) - E.g. [Journey](https://github.com/dime01/my-journey)
+    - Publish Now - click the red button
+
+###2. Install ghost locally
+
+1. [Installation guide](http://docs.ghost.org/installation/)
+1. Ensure [Node](http://nodejs.org/) is installed locally
+
+    ```
+    node -v
+    ```
+1. [Download Ghost](https://ghost.org/download/) on [Mac](http://docs.ghost.org/installation/mac/)
+1. Unzip and view the structure of the folder
+1. Install it
+
+    ```
+    $ npm install --production
+    ```
+1. look through the dependencies - express, sql, handlebars
+1. Start the server
+
+    ```
+    $ npm start
+    ```
+1. Visit [127.0.0.1:2368/](http://127.0.0.1:2368/) to view and [127.0.0.1:2368/ghost](http://127.0.0.1:2368/) for admin access
+1. [Usage](http://docs.ghost.org/usage/) docs
+1. Open database at `/content/data/ghost-dev.db` with [MesaSQLite](http://www.desertsandsoftware.com/?page_id=99) and view the posts
+1. Create static pages that also create json formatted data. Visit the local url [/ghost/api/v0.1/posts/?status=all&staticPages=all](http://127.0.0.1:2368/ghost/api/v0.1/posts/?status=all&staticPages=all)
+
+###3. create ghost themes
+
+1. documentation on creating [Ghost themes](http://docs.ghost.org/themes/)
+1. create a new folder inside `/content/themes/name-of-new-theme` with the following files and folder structure
+
+    ```
+    .
+    ├── assets
+    ├── default.hbs
+    ├── index.hbs
+    └── post.hbs
+    ```
+1. the simplest content for `default.hbs`
+
+    ```
+    <!DOCTYPE html>
+    <html>
+    <head>
+      <title>{{meta_title}}</title>
+      {{ghost_head}}
+    </head>
+
+    <body>
+      {{{body}}}
+    </body>
+    ```
+1. the simplest content for `index.hbs`
+
+    ```
+    {{!< default}}
+
+    {{#foreach posts}}
+      <h2><a href="{{url}}">{{{title}}}</a></h2>
+      <p>{{excerpt}}</p>
+      <span datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</span>
+    {{/foreach}}
+    ```
+1. the simplest content for `post.hbs`
+
+    ```
+    {{!< default}}
+
+    {{#post}}
+
+      <h1>{{{title}}}</h1>
+      <section>{{content}}</section>
+
+    {{/post}}
+    ```
+
+###4. Install Ghost on AWS
+
+1. Go to [AWS EC2](https://console.aws.amazon.com/ec2/v2/home) > Launch Instance > AWS Marketplace (sidebar) > Search "Ghost" > Ghost powered
+1. View the public DNS after the instance is running
+1. Download the key pair and change permissions
+
+    ```
+    chmod 600 ghost-ec2.pem
+    ```
+1. ssh into the EC2 instance
+
+    ```
+    ssh -i /path/to/ghost-ec2.pem ec2-user@[public-dns]
+    ```
+1. go to the installed Ghost folder at `/var/www/ghost` and amend the files accordingly
+1. terminate the running EC2 instance (if required)
+
+
+##More Resources on Ghost
+1. [Ghost blog on Amazon EC2](http://www.howtoinstallghost.com/how-to-setup-an-amazon-ec2-instance-to-host-ghost-for-free/)
+1. [Ghost roadmap](https://github.com/TryGhost/Ghost/wiki/Roadmap)
+
+
+##Build Link of this episode
+[Frontend screencasts](https://www.youtube.com/joemaddalone) by Joe Maddalone
diff --git a/start/index.html b/start/index.html
@@ -7,7 +7,7 @@
   <link rel="stylesheet" href="http://build-podcast.com/style.css">
   <style>
     body{width: 950px; margin: 2em auto 0 auto;font-size: 2em;}
-    .content{display:inline-block; vertical-align: top; margin-left: 1em;padding-top: .5em;}
+    .content{display:inline-block; vertical-align: top; margin-left: 1em;padding-top: .5em; width: 550px;}
     h1{display:inline-block;}
     h1, h4, h6 {margin: 0;}
     .episode-logo {max-height: 10em; max-width: 15em; margin-top: 1em;}
@@ -20,9 +20,9 @@
   <img src="http://build-podcast.com/logo.svg" class="start">
 
   <div class="content">
-    <h1>056 AngularJS</h1>
-    <h4>HTML enhanced for web apps</h4>
-    <h6>Version: 1.2.6</h6>
+    <h1>057 Ghost</h1>
+    <h4>nodejs based blogging platform</h4>
+    <h6>Version: 0.4.1</h6>
     <img src="logo.png" class="episode-logo">
     <p class="credit"></p>
   </div>

diff --git a/start/logo.png b/start/logo.png