domain_live

Rakuten Project

This repository contains the source code for a personal portfolio website built with Vite and React. The site is automatically deployed to GitHub Pages.

Live Site

The website is live and accessible at: https://www.ayushcenzo.tech

How to Update the Website

To make changes to the live site, simply commit and push your code updates to the main branch. The GitHub Action will handle the rest.

git add .
git commit -m “Describe your changes”
git push origin main

Detailed Deployment Log

This log documents the end-to-end process for deploying this Vite project to GitHub Pages with a custom domain.

1. Prerequisites & Initial State

• GitHub Account: Username Ayushcenzo.
• Project Repository: A public repository named rakuten containing the source code for a Vite project.
• Custom Domain: The domain ayushcenzo.tech was acquired.

2. Configuration & Deployment Steps

Part A: Vite Project Configuration

A primary issue was that the built website’s HTML file could not find its CSS and JavaScript assets, causing 404 errors. This was due to incorrect asset paths being generated by Vite.

• File Edited: vite.config.js

• Solution: The base property was added to the defineConfig object and set to /. This ensures all asset paths are generated correctly for a website hosted at the root of a domain.
  // vite.config.js
  import { defineConfig } from ‘vite’;
  import react from ‘@vitejs/plugin-react’;

  export default defineConfig({
  plugins: [react()],
  // This line was the crucial fix:
  base: ‘/’,
  });

Part B: DNS Record Configuration

To point the ayushcenzo.tech domain to GitHub’s servers, DNS records were configured at the domain provider’s admin panel.

• All existing default A and CNAME records were deleted.
• The following 5 DNS records were added:

Type	Host / Name	Value / Points To
A	@	185.199.108.153
A	@	185.199.109.153
A	@	185.199.110.153
A	@	185.199.111.153
CNAME	www	Ayushcenzo.github.io

Part C: GitHub Actions for Automated Deployment

A GitHub Actions workflow was created to automate the build-and-deploy process whenever code is pushed to the main branch.

• File Created: .github/workflows/deploy.yml
• Workflow Logic:
  1. Checks out the main branch.
  2. Sets up a Node.js environment.
  3. Installs dependencies with npm install.
  4. Builds the production site with npm run build.
  5. Deploys the contents of the resulting ./dist directory to GitHub Pages.

Part D: Final GitHub Pages Settings

The rakuten repository’s Pages settings were configured to use the workflow and custom domain.

1. Navigated to Settings > Pages.
2. Under “Build and deployment”, the source was set to “GitHub Actions”.
3. Under “Custom domain”, www.ayushcenzo.tech was entered.
4. After DNS verification completed, the “Enforce HTTPS” checkbox was enabled.

3. Key Troubleshooting Step: The Ignored dist Folder

During initial manual deployment attempts, Git was not tracking the local dist folder.

• Problem: The project’s .gitignore file contained the line /dist, which explicitly tells Git to ignore the build output folder. This is standard practice in many project templates.
• Relevance: While this was an issue for manual deployment methods (like git subtree push), it is not an issue for the final GitHub Actions workflow, as the build step happens on GitHub’s servers, not locally. It’s an important note for anyone attempting a manual push of the build folder.

4. Final Outcome

The deployment was successful. The website is live and fully functional at https://www.ayushcenzo.tech, with all assets loading correctly and HTTPS security enabled.