This is a boilerplate to use with the Harp Platform and/or the Harp Server (a static web server with built-in pre-processing build with NodeJS)
- How to use it?
- Controlling your content
- Adding new posts
- Adding new pages
- Migrating from different platforms
- TODOs
- Support
- License
- Install Harp Server on your computer
- Open your terminal and start a new project:
$ git clone [email protected]: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.
- Login to the Harp Platform
- Create a new application
- Choose Blog Boilerplate as your starting point
- Start your application
- Open and edit the files in your Dropbox
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.
This is where your posts and their content live.
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.)
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.
This is the place where your blog CSS should live.
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
}
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 fotoshapz and taking pictures of foods</p>
3. Your can now access your page in your browser. I.e.: http://localhost:9966/about
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
This blog boilerplate makes it really easy to enable your visitors to leave comments on your blog posts.
Open the /harp.json file and look for the disqus section. It should look something like this:
...
"disqus": {
"enabled": false,
"shortname": ""
}
...
In the disqus configuration there are two configurable keys:
enabled: can be true or false. Make it true to display comments and false to disable them. Make sure the value is not wrapped in quotes like this "false", otherwise it will still show the comments.
shortname: this is your shortname assigned by Disqus. Signup for Disqus and get your own shortname, then enter it as a string (with wrapping double quotes) as the shortname value.
This is what it looks like when it’s enabled:
...
"disqus": {
"enabled": true,
"shortname": "jorgepedret"
}
...
Open the /harp.json file and look for the sitemap section:
...
"sitemap": {
"enabled": true,
"changefreq": "daily"
}
...
Change "changefreq" to fit your blog needs. The result will be live in /sitemap.xml
Please create an issue on github’s bug tracker. Feedback and bug reports are greatly appreciated.
MIT