DEV Community

Bar Horing Amir
Bar Horing Amir

Posted on • Edited on

Host you static site on Github

If you've created your site by hand like it's the 90's, then simply push your static assets to a remote branch called gh-pages and you're all done.
Your site is now live at
https://<USER_NAME>.github.io/<GITHUB_REPO_NAME>/

If you are using any kind of boilerplate code (like create-react-app or Gatsby) you would have to generate your code as static assets. However before you perform the build you need to set the homepage property in your package.json file to point to your Github repo.
If you don't have a Github repo ready yet, don't worry because we will create one shortly.
The reason for doing this is to tell the bundler (Webpack, Parcel) to treat the \ path as the value you provided in package.json.

So, in your package.json:

{
..
"homepage": "https://USER_NAME.github.io/**GITHUB_REPO_NAME**",
..
}

Make sure to enable Github Pages in Settings ->
GitHub Pages

Alt Text

Now, create a new branch called gh-pages. Naming is important here, this is a Github thing. (You can confige your static site to point to your docs folder on the master branch)

git checkout -b gh-pages

Now run the build command, probably:

npm run build

This will create a build (or dist) folder with your compiled code.
Now, replace the root folder's content with the content inside the build directory.
Simply remove all files and folders in the root folder, including the build directory, and spill the contents of the build dir into the root. If you've done the previous operations in reverse order it means you're following me 'till here.
Remember to keep your .gitignore. README and package.json are optional

Now push your branch to Github or create a new repository now

Your site is now live at https://<USER_NAME>.github.io/<GITHUB_REPO_NAME>/

Top comments (0)