sillygwailo / hb-blog

Harp Boilerplate of a blog. Maintained by @jorgepedret.

Home Page:harp.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Harp's Blog Boilerplate

This is a boilerplate to use with the Harp Platform and/or the Harp Server (a static web server with built-in pre-processing powered by NodeJS)

Index


How to use it?

On your own computer

  1. Install Harp Server on your computer
  2. Open your terminal and start a new project:
$ git clone git@github.com:harp-boilerplates/hb-blog.git my-blog
$ cd my-blog
$ harp server -p 9966

Go to http://localhost:9966 from your browser to see your website.

On the Harp Platform

  1. Login to the Harp Platform
  2. Create a new application
  3. Choose Blog Boilerplate as your starting point
  4. Start your application
  5. Open and edit the files in your Dropbox

Controlling your content

Harp brings you back to the basics of the web. Always keep in mind that your directory structure and file names are your URL paths.

Creating a new page is as simple as creating a new file and writing content in it.

public/posts

This is where your posts and their content live.

public/_layout.jade

The layout of your site, including header, footer and sidebar. External scripts or stylesheets are included in this file. Global elements belong here as well (i.e.: header, nav, sidebar, etc.)

public/index.jade

This is the default page when you visit your domain (i.e.: http://localhost:9966/). Here we build the loop that goes through your posts and shows them in the front page.

public/assets/css/app.less

This is the place where your blog CSS should live.

Adding new posts

1. Create a new file (.jade, .ejs, .html or .md) in the public/posts/ directory

$ touch public/posts/kittens.html

2. Enter your post content in the file you just created:

public/posts/kittens.html:

<h1><a href="/posts/kittens">I love kittens!</a></h1>
<p>This is my first post using Harp!</p>

3. Open public/posts/_data.json and add your new post data:

{
  ...                        <-- other blog posts
  "kittens": {               <-- post slug (file name without extension)
    "title": "Cute Kittens"  <-- post title
  }
  ...                        <-- other blog posts
}

Adding new pages

1. Create a new file inside the public directory:

$ touch public/about.html

2. Enter the page content in the newly created file

public/about.html:

<h1>About me</h1>
<p>I love the fotoshapz and taking pictures of foods</p>

3. Your can now access your page in your browser. I.e.: http://localhost:9966/about

Migrating from a WordPress blog

If you're planning to move your WordPress site to Harp, I'd recommend cloning it using wget or curl:

This one-line terminal command will create a static replica of yourwebsite.com in your computer, it'll fix all the links to work locally and download all the necessary assets (images, javascript, css and other files):

$ wget --recursive --no-clobber --page-requisites --html-extension --convert-links yourwebsite.com

TODO

  • Integrate discuss for comments
  • Create sitemap.xml for improving SEO

Support

Please create an issue on github's bug tracker. Feedback and bug reports are greatly appreciated.

License

MIT

About

Harp Boilerplate of a blog. Maintained by @jorgepedret.

harp.io


Languages

Language:CSS 75.5%Language:JavaScript 24.5%