DEV Community

Cover image for Host Static Site on Heroku in 5 minutes with Basic Auth
Koji (he/him)
Koji (he/him)

Posted on

Host Static Site on Heroku in 5 minutes with Basic Auth

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

[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.

GitHub logo nulltask / heroku-static-provider

Static site provider for Heroku.

Heroku Static Provider

Static site provider for Heroku.

Installation

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

$ git clone https://github.com/nulltask/heroku-static-provider.git my-site
$ cd my-site
$ 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

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

Screencast

License

MIT




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

clone

$ git clone https://github.com/nulltask/heroku-static-provider.git
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)

    GitHub logo 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
    
    Enter fullscreen mode Exit fullscreen mode

    Then open http://localhost:3000

    sample

    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
    Enter fullscreen mode Exit fullscreen mode

    Deployment

    Add or update files in /public.

    $ git add .
    $ git commit -a -m 'some commit message'
    $ git push heroku master
    $ heroku open
    Enter fullscreen mode Exit fullscreen mode

    Notes

    Adding Basic Auth

    This is for Basic Aush.

    $ heroku config:set USER=username
    $ heroku config:set PASS=password
    Enter fullscreen mode Exit fullscreen mode

    Screencast

    License

    MIT

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

Discussion (0)