# How to publish a ReactJS app on GitHub

        
[GitHub Pages](https://pages.github.com) is a hosting service that lets you publish your projects to the web, directly from your GitHub repository. And it's **free** to use.

Pages is really useful if you need to **get your portfolio projects up and running quickly**. As you learn new skills and update your repos, you have peace-of-mind knowing that your projects can be published with just a few clicks. If you've ever had to unexpectedly share your portfolio with a potential client or recruiter, you know how valuable this can be!

So let's get started.


### Step 1: Create a ReactJS app

1. Open your terminal.
2. Navigate to the directory where you want to save your project.
3. If you haven't installed **Node.js** or **npm** on your device, you can [find instructions here](https://www.npmjs.com/get-npm).
4. Create your new app. This will be the **local repository** for the project.
```console
npx create-react-app my-project
cd my-project
``` 

    
### Step 2: Initialize a Git Repository

1. Log into your [GitHub](https://github.com) account.
2. Create a new repository with the **same name** that you used for your local repository. This will be your **remote repository** for the project.
3. Connect your local and remote repositories. 
```console
git remote add origin
https://github.com/my-username/my-project
```

    
### Step 3: Build Your App
1. In the terminal, type `npm start` to spin up a local server on your device.
2. Open [http://localhost:3000](https://localhost:3000) to view your app. *The page will automatically reload as you make changes.*
3. Build your app! 


    
### Step 4: Publish to GitHub
1. When your project is ready to publish, bundle it by typing `npm run build` in the terminal. 
2. Push your production-ready app to GitHub.
```console
git add .
git commit -m "Add a short description of the changes you made."
git push -u origin master
```
3. Open your project's repository on [GitHub](https://github.com).
4. Click on the Settings tab and scroll down to the GitHub Pages section.
5. Under Source, select the branch that you want to publish. The default choice is usually the `master` branch or the `main` branch. 
5. Click Save and GitHub will display the URL for your project. 

**Tip:** To learn more about configuring source branches, see this [GitHub Docs page](https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site).


    
### Step 5: Use a Custom URL
1. In your project's repository on GitHub, click on the Settings tab.
2. Scroll down to the GitHub Pages section.
3. Under Custom Domain, enter your domain name and click Save. 

**Tip:** To learn more about configuring custom domains, see this [GitHub Docs page](https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages/configuring-a-custom-domain-for-your-github-pages-site).

    
### Conclusion
GitHub Pages makes it easy to deploy and host web-based apps. If you need a **simple, user-friendly** way to publish your portfolio projects, give Pages a try!