DEV Community

Teerth Sankesara
Teerth Sankesara

Posted on

Hosting Static Websites on Heroku

Hey there, so I've been developing React web-apps for a year now, but recently I've decided to go for the good old method of web development DOM.

So I took up an Udemy course by Brad Traversy to create 50 projects solely based on HTML, CSS and JS.

After I've created my first project it hit to that I had no idea on how to host an static website for free, I know github gives us this option but I've worked with Heroku so much that I wanted nothing more that to use it here as well, and after some googling I've found some outdated-solution.
I decided to write an clean solution here.

So Here comes the good part.

Sites Hosted Here
Code Here

So as Heroku doesn't allow us to host serve static content I'll be using php to host it.

Step 1 => Create an index.php file in your root directory.
Step 2 => Insert Following Code (Where index.html in you main html file)

<?php 
define('PROJECT_ROOT_PATH', __DIR__);

include_once(PROJECT_ROOT_PATH . '/index.html'); 
?>
Enter fullscreen mode Exit fullscreen mode


`

Step 3 => Create an composer.json file in root and fill it wil {} (php server require an composer.json file, it can be an empty json but it is still required)

Step 4 => Run following commend to create and commit an local git repository
git init
git add .
git commit -m 'first commit'

Step 5 => Create an Heroku Account and Install Heroku Cli.

Step 6 => Run heroku login on you cmd or terminal.

Step 7 => Run heroku apps:create <APP_NAME>

Step 8 => Run git push heroku <BRANCH_NAME>

So it concludes us deploying static websites on Heroku.

Please leave an comment if this helped or if you faced any issues, I'd be more then happy to help you. Follow me if you liked this content I'd be making post on daily bases about my journey through making these 50 projects.

Top comments (2)

Collapse
 
spiska profile image
Marek

Cool, I really like heroku but recently I found there is much more better solution for static pages - vercel (mby not easy to setup for PHP but for JS it is zero config deployment :-))

Collapse
 
tsankesara profile image
Teerth Sankesara

Thanks, will look into that for future deployment πŸ’“..