Built a Good Website with VITE & REACT? Now What? 🎉

 

---

Congratulations on building your first website using React 🌟 Creating a functional and aesthetically pleasing website is a huge milestone, but you might be wondering: what’s next? How do you make your website accessible to the world? This blog will guide you through two essential steps to take your project live-uploading it to GitHub 💻 and deploying it using GitHub Pages 🌐.

GitHub is a powerful platform for storing and sharing your code. By uploading your website files to GitHub, you not only create a backup but also make collaboration and deployment much easier. Here’s how to do it:

1. Log in to your GitHub account. If you don’t have one, create an account first.
2. 
   
3. Click on the “New” button in the top-left corner or navigate to Create a New Repository.
4. 
   
5. Give your repository a meaningful name (e.g., my-website).
6. 
   
7. Add an optional description and decide whether to make it public or private.
8. 
   
9. Check the box to initialize the repository with a README file if desired.
10. 
    
11. if you have an existing repository just make sure you have pushed all changes
12. 
    
13. Open your project folder locally on your computer.
14. 
    
15. If you’re using Git for version control, open a terminal in the project directory and initialize Git:
16. 
    
17. Add all your files to the repository:
18. 
    
19. Commit your changes:

• git commit -m "Initial commit"

1. 
   
2. Link your local repository to the GitHub repository by adding the remote URL (replace your-username and your-repository with your details):

• git remote add origin https://github.com/your-username/your-repository.git

1. 
   
2. Push your files to GitHub:

• git push -u origin main

1. If your default branch isn’t main, use the branch name you created instead.

Now your website’s code is safely stored on GitHub. 📦 The next step is to deploy it.

GitHub Pages is a free and simple way to host your static website directly from your GitHub repository. Follow these steps to get your website live:

create new action file for the code

1. Once enabled, GitHub Pages will provide a URL for your live site https://your-username.github.io/your-repository/
2. Note that it might take a few minutes for your website to go live.

name: Build and Deploy on: push: branches: [ "main" ] pull_request: branches: [ "main" ] workflow_dispatch: # Manual trigger from GitHub UI jobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: Checkout repository uses: actions/checkout@v3 - name: Setup Node.js uses: actions/setup-node@v3 with: node-version: '18' - name: Install dependencies run: npm install - name: Build React App run: npm run build - name: Deploy to GitHub Pages uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./dist

If you have a custom domain, you can link it to your GitHub Pages site by adding a CNAME file to your repository or configuring your domain's DNS settings. GitHub's documentation provides detailed steps for this process.

get your domain from service provider add its name in the “name section”

and it will give you a cname record copy it go tyo your dns provider and paste it make sure you are selecting lowest ttl and click update

DNS takes time to update after it is done anyone can acess your site

By uploading your website to GitHub and deploying it with GitHub Pages, you’ve made your project accessible to the world. It’s a big step forward in your web development journey, and it gives you a foundation to share, improve, and build upon your work. Happy coding! 🚀

Share this with your friends

Loved it click the button to subscribe

---

Originally published at https://balasaisigireddy.substack.com.