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.
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');
?>
```
`
**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](https://signup.heroku.com/) and Install [Heroku Cli](https://devcenter.heroku.com/articles/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)
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 :-))
Thanks, will look into that for future deployment 💓..