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?
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.
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
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 - 320Then 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
License
MIT
Original repo https://github.com/nulltask/heroku-static-provider
Top comments (0)