Add Contact form to your Ghost blog

Ghost does not ship with the functionality of a form so we have to choose a third party service and there is one Formspree. It lets you add forms to a static site which is great since all we need to do is embed an HTML5 form that does not require any coding skill. All you need to do is replace your email address in place of

 <form id="contactform" action="//formspree.io/me@example.com" method="POST"> 
 <input type="text" name="name" placeholder="Your name">
 <input type="email" name="_replyto" placeholder="Your email">
 <textarea name="message" placeholder="Your message"></textarea>
 <input type="submit" value="Send">
 </form>

Once you add this form submit it and it will ask you to verify the setup by sending you mail on that address once verified your form is ready. Thank you for reading, For more posts stay tuned.

Live Tile on Ghost

Microsoft Edge and Internet Explorer 11 support live tile in Windows 8/8.1 and 10. This means any user/visitor who pinned your website or web application to their Start can receive notification on an update like publishing new posts and pages. It is driven with the help of RSS feed, the polling or updating of the tile happens every 30 minutes, you can get this working with your Ghost blog by simply adding this line in your themes head tag which in most themes is located in default.hbs

After adding this meta restart Ghost, if everything goes right you should able to pin your Ghost blog to you start and see it display your latest post and update on the new post being published. Thank you for reading,

Ghost on Pi

Ghost is open source blogging platform written in Node.js that offers self hosting and hosted service.

We are going to self host Ghost on a Raspberry Pi.

This guide will take you through the steps of setting up a self hosted Ghost production environment.

I am working on this setup with a clean install of Raspbian and headless setup, you can lean how to enable SSH from here.

You can SSH into your Raspberry Pi(Mac/Linux). If you are a Windows user you need to use Putty

ssh pi@the-ip-address-of-the-pi  

The default username and password of the Raspbian install is.

user: pi

password: raspberry

Installing Node.js

Downloading Node.js(NPM ships with it)

wget http://node-arm.herokuapp.com/node_latest_armhf.deb  

Installing Node.js(required by Ghost)

sudo dpkg -i node_latest_armhf.deb  

Installing Sqlite required by Ghost.

sudo apt-get install sqlite3  

Installing NGINX(used to reverse proxy Ghost)

sudo apt-get install nginx-full  

Installing Supervisor(to manage Ghost)

sudo apt-get install supervisor  

Ghost setup

This will download the latest version of Ghost.

wget https://ghost.org/zip/ghost-latest.zip  

Unzipping the folder we just downloaded.

unzip ghost-latest.zip -d Ghost  

Set Ghost/ as the current directory

cd Ghost/  

Installing dependencies used by Ghost using NPM.

npm install --production  

Run the command below to see everything works fine.

npm start --production  

Time to setup turn Ghost into a service.

Creating the ghost.conf file for Supervisor to manage Ghost.

touch /etc/supervisor/conf.d/ghost.conf  

Editing the file, you can choose any editor you like.

nano /etc/supervisor/conf.d/ghost.conf  

Add these lines to the ghost.conf file.

[program:ghost]  
command = npm start --production  
directory = /home/pi/Ghost/  
user = pi  
autostart = true  
autorestart = true  
stdout_logfile = /var/log/supervisor/ghost.log  
stderr_logfile = /var/log/supervisor/ghost_err.log  
environment = NODE_ENV="production"  

Now save the file, in nano CTRL + X + Y.

You can start Supervisor, if it did not start after installing.

service supervisord start  

Now set Supervisor to run on startup.

sudo update-rc.d supervisord defaults  

Starting Ghost service we just created.

sudo supervisord start ghost  

Ghost will be running in production in port 2368.

Reverse proxying Ghost with NGINX.

Editing the default file.

nano /etc/nginx/sites-enabled/default  

Add these lines

server {  
        listen 80; 
        server_name yourdomain.com; # Change this to your hostname

        location / {
        proxy_pass       http://127.0.0.1:2368;
        proxy_set_header Host      $host;
        proxy_set_header X-Real-IP $remote_addr;
        }

    }

Save the file

Now restart NGINX.

service nginx restart  

Now visit your Raspberry Pi ip address. You will be presented with a beautiful setup screen.

You can edit the Ghost hostname and other settings by editing the config.js stored in the Ghost folder.

Services like DynDNS can be used to manage hostname, if you want your Ghost blog to be public and use a domain name instead of the ip address.

If you have any questions or problem, leave a comment below.

IO.JS on Mac

IO.JS is a folk of Node.js that uses the latest build of Google’s V8 Engine and supports ES6, In some performance benchmarks IO.JS is faster than Node.js

The performance benchmarks of IO.JS vs Node.js can be found over here.

IO.JS is recommended if you are working on a new project, if you are using a project built on Node.js, it have a few bugs or might not support IO.JS due to various reasons.

You can download IO.JS from here

Installing IO.JS is similar to any other Mac OS X application using the pkg or Homebrew the instruction for both types are provided.

Double click the pkg.

Go through the setup.

If you prefer installing IO.JS using Homebrew, you can do that by running (Homebew is required).

brew install iojs  


brew link iojs --force  

Open Terminal and check the IO.JS and NPM version.

Thank you for reading.

Share, Have a question? leave a comment below.

Node.js on OSX

Node.js is an open source, cross-platform runtime environment for server-side and networking applications. Node.js applications are written in JavaScript, If you are not already fimilar with what Node.js is, you can learn more over it from here.

We will be using Homebrew to install Node.js, Homebrew makes it more easier to install and upgrade Node.js.

Getting Started

Downloading and installing Homebrew (XCode need to be installed)

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"  

You can install Node.js by entering this command.

brew install node  

To check everything is working correctly you can run.

brew doctor  

Now you have Node.js installed on your Mac

Create a blog in Harp

Harp is a free, open source static site server written in Node.js, It support EJS and Jade for templating and Sass,Scss, Less and Stylus for stylesheets pre-processing and Markdown for writing pages.

What do I mean by static site server?

A static site allows you to use pre-processor for writing templates, scripts, stylesheets and pages, and output them into static content, at the same time serve those static content.

How different is a static site server from a static site generator?

A static site generator compiles the output once you are done writing them, and have to be deployed manually or through some automated script, some static site generators support deployment options like GitHub Pages, SSH and many other ways, but at the end these files have to be placed in some web root where a separate production server like NGINX or Apache have to serve them, and in most static site generators you have to compile the source manually, which might be a bit painful over a long term. How is Harp different? Harp is a static site server which means every time you make changes to a file it will recompile it, at the same time Harp has a built-in web server that can run in both development and production. In development Harp will recompile the whole source, while in production mode Harp keeps an eye on the timestamp of the files, So if a file has changes made to it, Harp will recompile it, but this time, not the whole source only that one specific file. So now you have a server that compiles and hosts your website. If you want to use Harp as a static site generator, you can do that.

Getting started

Since Harp is written in Node.js we need to get Node.js first. (If you have Node.js already installed skip this step). Visit nodejs Download the specific version of Node.js installer for your Windows, Mac or Linux. If you are using Windows you might need to reboot your PC so that the environment variables are set and NPM has the right permissions. If you prefer using NVM you can go ahead, and follow the steps below.

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.4/install.sh | bash  

or

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.25.4/install.sh | bash  

Downloading latest stable version of Node.js using NVM.

nvm install stable  

Setting the stable release as the default version.

nvm alias default stable  

Installing Harp

If you are using Windows or NVM then you don’t need to run sudo before running this command.

sudo npm install -g harp  

Once Harp is done installing we can initialise a new Harp project.

harp init Website  

Now set you current directory Website.

cd Website  

If you want to create a Harp project in an existing folder, run.

harp init .  

Running the Harp server.

harp server  

If you want to compile the output to host it, or prefer a different Web Server. You can compile the output by using. The output should be stored in a folder named www

harp compile  

Now visit here You source folder structure inside Website should look like.

404.jade  
_layout.jade  
index.jade  
main.less  

Any file an underscore before the name will not be visible to the public for example a _data.json file. Harp does not have a logical module, so you really can’t use a for loop to list the child pages of a specific folder. You have to use a _data.json file that stores all the data you require.

Creating a blog.

To create a blog we need a completely new folder structure. The folder will contain all the files we require to create a basic blog.

.blog/
 ..hello-harp.md
 .._layout.jade
 .._data.json
._layout.jade
.index.jade
harp.json  

The harp.json file holds all the global variables like metadata website title and many different types of global variables. Lets delete the files in the Website folder first. Now lets start by creating the harp.json file. Now open the harp.json file.

touch harp.json  

Add the following lines to the harp.json file.

{  
  "globals": {
    "site": {
      "title": "Harp Blog",
      "description": "A simple blog powered by Harp"
    }
  }
}

Now you have your globals set. Creating the public folder, anything stored in the public folder will be accessible to the visitor unless it has an _ before the name for example _data.json

mkdir public  

We will be using Jade for templating. If you wan’t to use EJS you can go ahead and use EJS. Now create a _layout.jade inside the public folder.

touch _layout.jade  

Add the following lines to the _layout.jade file.

doctype html  
html  
  head(lang="en")
    meta(charset="utf-8")
    meta(name="description" content="#{site.description}")
    title #{site.title}
  body
    .content
      != yield

You must have noticed that inside the _layout.jade in the .content div, inside that div we have a != yield What does that do? It wrappers the _layout.jade file will be the patent of all the other templates, What does that mean? It means that you really don’t need to write all the Jade markup over and over in every new file you create in the folder that contains a _layout.jade, It saves a lot and lets you have a constant markup for multiple pages. Now that we have a _layout.jade, lets add a new index.jade file. The index.jade file is the file that will output as index.html, actually all the files except the _layout.jade file will be output would be as .html.

touch index.jade  

Now add the following lines to the index.jade

h2 Hello Harp  
p Powered by Harp  

Now when you visit 127.0.0.1:9000, you should see the greeting that we just created. It time now to add the listing functionality to the index.jade file. As I said before, Harp will not list the pages all by it self, you need to feed this data manually using a _data.json file. Add the _data.json file.

touch _data.json  

Now we can add the pages data to the _data.json file you want to list.

{  
    "hello-harp": {
        "title": "Hello Harp",
        "description": "An example post"
    }
}

Now we can edit the index.jade file to fetch this information.

for post, slug in public.blog._data  
    h2: a(href="/blog/#{slug}") #{post.title}
    p #{post.description}

Now you should see the hyperlink based title and the new description. It’s time to create the hello-harp.md in our blog folder.

touch blog/hello-harp.md  

You can add this dummy text to the hello-harp.md file.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse  
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non  
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  

You will now require a _layout.jade inside the blog folder, you can add the following lines to it.

doctype html  
html  
  head(lang="en")
    meta(charset="utf-8")
    meta(name="description" content="#{site.description}")
    title #{site.title}
  body
    .content
      h2 #{title}
      != yield

You now have a fully functional blog powered by Harp. This was a basic tutorial, I did not involve any stylesheets, because I believe you are creative enough to implement you own style of stylesheet, and wanted to give the read to choose the pre processor, he/she would want to use. If you like this tutorial, share or comment, if you have any questions.

Switching to Harp

After using WordPress for many years, I finally decided to test many services like PAAS (Platform As A Service).

I always choose WordPress to test such platforms as it turned out to be a good CMS and seemed to be really user friendly as it was written in PHP and used MySQL as a database backend, Everything when perfectly until there were needs for plugins to increase functionality or control or improve a functionality, WordPress by itself does a lot of thing really nicely, but at some point you need to get plugin to get certain things working, which with time made me install a lot of plugins on my WordPress installs. Not all plugins are written by well experienced programmers who follow programming standards or improvise their code for efficiency, This made WordPress slower and also at some point broke the installs which causes good damage for views and counts as a maintenance down time. This was a small problem for me. As I always see that I have the least amount of down time, and see that the maintenance mode does not take a lot of time. This was not a big problem until I realized that some of the plugins need to interact with the MySQL database, I tried to see how the plugins did the interaction with the database and found while some fetched the data in a cleaner manner, the rest of them did not do the query in an efficient manner, which again took a lot of system resource. At some point that plugins used the database to write data and store content used by the plugins to work with WordPress, These plugins sometimes turn out to be a new sense as it creates a very strange numbers of tables and columns in that MySQL database of the WordPress install, This makes larger query slower and becomes a bigger problem, when you are trying to clean up the install and trying to see that the database is clean and does not have data that is not required, Even after uninstalling the plugins the tables and columns still exist in the database with over all tries to bloat the database, which over time makes the WordPress install unmaintainable, After over comming all these issues, WordPress breaks when the plugins are not up to date to the WordPress built at sometimes causing temporary failure of WordPress time to time, and at other times breaking the complete WordPress install running in production, Some of the plugins break the wp-admin which makes it even more difficult to manage WordPress, Over time I learnt about other CMS’s but none of them offered good UI or served the purpose I needed.

After trying a little bit harder I decided to find other alternatives that were not fully blown CMS and decided to go with other language instead of PHP, which later on helped me discover Jekyll. Now Jekyll was something new for me, and it was the time I had decided to enter the static world where I would not get nightmare of databases failing and great walls of plugins crashing my production website, Jekyll seemed to be really interesting as it was a blog aware static site generator, which was a totally different thing from WordPress, It also seems to be a really nice alternative as it totally depended on files that let me version control. Jekyll did a really nice job and gave me more comfort over WordPress, Ruby was something I was learning at the time, and I had just started exploring Markdown, which was a really new and nice alternative to writing crazy HTML for writing blog posts. I really liked the way how Jekyll managed the ordering of blog posts in the _posts folder in the way it had the date before the file name and extension YYYY-MM-DD-example.md. Markdown made my blogging life even more easier, and the best part was the way Jekyll managed global variables in the _config.yml file that also contained the total configuration over how the website should be built. Jekyll was really nice to me. Until it started to break, The Jekyll gem would suddenly break, with weird amount of errors logged on the terminal, This would end up making me re-setup my whole system, ending up into a clean install of Linux. This happened time and again which completely discouraged me from using Jekyll.

Once again I started searching for an alternative to Jekyll, I stumbled upon many static site generators and turned as good WordPress and Jekyll alternatives some of them were Middleman, Metalsmith, Roots, Pelican, Cactus, These are still really good static site generators but never made it to my production server due to various other reasons, some of them lacked some features the others did not build the website the way I wanted it to build my website. After almost giving up on static site generators.

I discovered Harp, Harp is a static site server, A static site server is a static site generator that serves the static files in production and updates files based on changes noticed in any file, This lets you avoid the hassle of building the website first then deploying it into production, instead Harp lets you build your website while serving the files in production. Since the files are being served are static it makes you website even more secure then a database driven website.

It took me some time to understand how Harp worked and how it did certain things, I liked the fact that it offered many pre-processors, like EJS and Jade for templating, CoffeeScript for JavaScript pre-processing, Sass and Stylus for CSS pre-processing, I also fond it was really nice to have a _data.json file to store data or lists, It lets me manage all the lists of my posts in a single file, It makes it easier to handle meta for each page inside a specific folder.

Markdown in Harp is GFM (GitHub Flavored Markdown), This was the second thing some of the other static site generators lacked or required to be enabled manually, Since Harp does not require front-matter in it’s Markdown files the Markdown files are cleaner. Harp instead uses the _data.json to store data that are required my the Markdown files which makes it easier when you have over 100 files and need to change a specific meta in each file. Only Markdown pre-processor runs over the Markdown files, This lets you add templating code without having to gist it or use any other services for example, In Jekyll you could not add liquid tags as they would be read by Jekyll and template and it would end up with the data processed instead of being an example code to explain a certain functionality. I am still exploring Harp as it is being developed and improved with ever new build version, As of now Harp is going a great job in building my website.

If you have any questions feel free to leave a comment below