Animated-galaxy

This particles project was built in the progress of the Three.js journey course, focusing on shaders.

Tech


JS	Three.js
HTML	CSS
Vite	Github actions
Hostinger	Webhooks

This project is a basic static website created using HTML, CSS, and JavaScript. For package management and development server, we use npm as the Node Package Manager along with Vite. Our Continuous Integration (CI) process involves automatically building artifacts from the main branch into the build branch whenever changes are pushed. This is achieved through GitHub Actions. Additionally, we have configured a webhook to send a POST request to a specified URL (in our case, Hostinger). As a result, any updates pushed to the main branch will trigger a build and update the production site accordingly.

How to Use

Clone the repository:

git clone https://github.com/KD-Long/animated-galaxy.git

Install the dependencies:

cd animated-galaxy
npm install

Run the project:

npm run dev

Open your web browser and navigate to http://localhost:3000 to access the project.
For steps on how to intergrate CI into this project and have updates build to hostinger follow this guide.

Workflow

Git push from local --> main branch

git add --all
git commit -m 'commmit msg'
git push -u origin main

Github actions trigger build --> build branch (dist folder from $npm run build)
Webhook event triggered --> hostinger
Automatic deployment --> ~/public_html/_sub_animated-galaxy/
Configured sub domain animated-galaxy.kyledlong.com to point to "_sub_animated-galaxy/" folder