Host your static pages in a modern way

[pinoyprogammer]

Heroku + ExpressJs + Node, This tutorial can be overwhelming at first but as you familiarized with the process you will never go back in logging in your CPanel then upload your html static pages.

Why heroku?: Their basic service is free forever!

Why Node?: We need the awesomely fast EpressJs framework which you can get through npm command.

Why ExpressJS?: Easy to learn and lots of cool packages to choose from. This packages will make your site blazingly fast and secure.

1. Got to http://heroku.com and create an account. After you had created an account, go to your dashboard and create an app. Find the “new” button and choose create new app. Enter you desired name then create. Below you can find instructions on how to deploy an app.
   1. First you need to install heroku toolbelt which is 50mb in size.
   2. Be sure you have also installed Nodejs that can be found here http://nodejs.org . This should be the start and follow the instructions in “deployment method”.

example:

$ heroku login

$ cd my-project/
$ git init
$ heroku git:remote -a yourappname

tip in windows: Go to your desired folder where you will place your project then just alt-D then type cmd (cmd will open in the location of your folder) then just

$ git init
$ heroku git:remote -a yourappname

2. Go to your my-project directory. then run this command. Assuming that you are in your root directory.

$ git pull https://github.com/yevelnad/heroku-static.git

directory structure should be
my-project
-- node_modules
-- public
------ index.html
------ stylesheets
------------ styles.css
-- .gitignore
-- app.js
-- package.json
-- .procfile

then deploy your app to heroku server

$ git add .
$ git commit -m "upload my app"
$ git push heroku master

visit your app then it should look like this http://node-exampl.herokuapp.com/

Congratulations!! You can edit the index.html or add another html pages. Every push will just consume 4kb bandwith or depending on how many pages you add but 1mb is more than enough for every deployment per day!!! And your pages will be blazingly fast compare to without using express and node.

So that's it then why?
in app.js you can find a code

app.use(compression());
app.set("view cache", true);

to explain this go to http://middleman-ph.herokuapp.com then open the developers option choose the audit tab. Then audit the site. After audit you can find this red dots.

- Enable gzip compression(3)
- Leverage browser caching(15)

With just 2 line of codes we fixed this issue and just go with your life designing html static pages or single line pages. Cheap, fast and efficient. This will make your website load faster. If you have multiple pages, because you leverage browser caching which cache you assets(js,css, images), your website will load faster. In php to do this we would go through a lot of process just to fix this.

Making your site more secure?
Very easy, just install helmet package using npm

$ npm install helmet --save

then just add this line of code
var helmet = require('helmet');
app.use(helmet());