DEV Community

Cover image for Hosting on GitHub
Mallikarjun H T
Mallikarjun H T

Posted on • Edited on

Hosting on GitHub

So, would you like to host a website for free?

In most circumstances, hosting is expensive, but if you're just getting started with web development, you can host it for free on GitHub.

Most of the easy port portfolio using HTML and CSS may be deployed immediately using Github's special repo <USERNAME>.github.io.

GitHub Pages is another option for hosting react-based static websites. In this article, I'll go over the bits and pieces you'll need to get your site up and running.

Include these deployment steps in *package.json scripts *'s section first.

Add homepage property

This step will reroute react to the appropriate  endpoint (url).

"homepage": "https://mallikarjunht.github.io/Portfolio",
Enter fullscreen mode Exit fullscreen mode

Add pre-deploy and deploy scripts

"scripts": {
    "pre-deploy": "npm run build", // bulid a deployable package web optimised
    "deploy": "gh-pages -d build", // push build folder to gh-pages
  }
Enter fullscreen mode Exit fullscreen mode

Deploy your application

This step will be detected by Github, and your changes will be up and running in no time.

npm run deploy
Enter fullscreen mode Exit fullscreen mode

Confirm your site is published

your code is deploied and you can acciss it in the url as shown below.

<USERNAME>.github.io/<PROJECT_NAME>
Enter fullscreen mode Exit fullscreen mode

hear is my portfolio on github

https://mallikarjunht.github.io/Portfolio/
Enter fullscreen mode Exit fullscreen mode

Referances
Official Documentation

Top comments (0)