Basically, we don't need to use Heroku for static website recently since we can use GitHub, Netlify, Vercel, and so on.

However, if we want to use basic auth for a website, we will need some extra work. It might be worth of trying, but if you just want to upload a couple of HTML and CSS files, that work will be too much.

To avoid that, we can use Heroku.

What is Heroku?

https://heroku.com/

Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

In this post, I will show you how to do that in 5 minutes.

requirements

• Terminal / Comand prompt
• git (https://git-scm.com/downloads)
• heroku-cli (https://devcenter.heroku.com/articles/heroku-cli)
• heroku account
• github account (optional)

[Steps]

Step1. Create a website
Step2. Download or Clone a repo
Step3. Login Heroku via terminal and create an app
Step4. Push your website to Heroku
Step5. Set info for Basic Auth

In terms of step1, it depends on you, so I will skip this part 😜

Step2 Download or Clone a repo

Go to the following repo and download repo or clone repo.

$ git clone https://github.com/nulltask/heroku-static-provider.git my-site
$ cd my-site
$ heroku create
$ git push -u heroku master
$ heroku open

$ git add .
$ git commit -a -m 'some commit message'
$ git push heroku master
$ heroku open

$ heroku config:set USER=username
$ heroku config:set PASS=password

There is public folder in the folder you downloaded or cloned.

clone

$ git clone https://github.com/nulltask/heroku-static-provider.git

You need to move all step1 fills into public and run the following commands.

$ git add .

# you can type anything you want as a comment.
$ git commit -m 'initial commit'

Step3 Login Heroku via terminal and create an app

$ heroku login
# If you skip your site name, Heroku generates a new name for you
$ heroku create your-site-name

Step4 Push your website to Heroku and check it

IF you can push your site properly, heroku-cli will show you your website url on Terminal. You can use that to access your website or you can use heroku open to access the webstie.

$ git push heroku master
$ heroku open

Step5 Set info for Basic Auth

Almost there. This is the last step. We need to type 2 commands to add Basic Auth to your website.
Of course, you can set anything you want as username and password.

$ heroku config:set USER=username
$ heroku config:set PASS=password

If you want to use the latest express you can try my repo instead of the original.

I updated a little bit the original repo.

• updated express
• var --> const
• updated readme (add how to run it locally)

  koji / heroku-static-provider

  Static site provider for Heroku.

  Heroku Static Provider

  Static site provider for Heroku. This still works well in 2021 🎉

  Test locally

  # install express
  $ yarn
  $ node server.js
  Server listening on port 3000
  GET / 200 8.069 ms - 320
  

  Then open http://localhost:3000

  

  Installation on heroku

  You need sign-in or sign-up to Heroku.

  $ git clone https://github.com/nulltask/heroku-static-provider.git my-site
  $ cd my-site
      
  # If you use free plan and have 5 apps already, you need to delete an app to run heroku create command
  $ heroku create
  $ git push -u heroku master
  $ heroku open

  Deployment

  Add or update files in /public.

  $ git add .
  $ git commit -a -m 'some commit message'
  $ git push heroku master
  $ heroku open

  Notes

  Adding Basic Auth

  This is for Basic Aush.

  $ heroku config:set USER=username
  $ heroku config:set PASS=password

  Screencast

  • https://vimeo.com/71315109

  License

  MIT

  Original repo https://github.com/nulltask/heroku-static-provider

  View on GitHub