In this article, I am going to show you how to publish a Three.js project on GitHub Pages. You don’t have to buy a costly domain or any hosting plan to do so. I created a video for this on my YouTube channel 👇 I won’t go into how to develop a Three.js project from scratch. I am assuming you know that and already have a project to showcase on GitHub pages. If you don’t then clone my repo and get started [switch over to the coz I haven’t set it up as the default one]👇 master branch 🌎 https://github.com/knightcube/threejs-starter-practice/tree/master This is how it looks like👇 Check out the live demo here  👉 - https://knightcube.github.io/threejs-starter-practice/ STEPS : Create a new folder called “dist” in your project. ✅Step 1 If you have cloned the above repo then the “dist” folder is already there. You can skip this step and step 2. Jump directly to Step 3.) : Drag and drop the following files inside the dist folder — index.html, style.css, index.js, and any image (or texture) that you have used for your mesh. ✅Step 2 ❗ Images in the static folder are not referenced when using GitHub Pages. This means that when you show a cube(or any mesh) in your browser using Three.js and try to load the texture using TextureLoader, the texture won’t get applied to the cube. This happens because GitHub Pages does not reference the images in the static folder. Long story short, put all the images in the dist folder. You can also create a separate “assets” folder inside the dist folder and keep all the images inside the “assets” folder. You can then reference any image inside the assets folder like this— “./assets/yourimage1.png”. In the below image, I have used as a texture for the cube. Therefore I have kept it inside the folder. coolTex.jpg dist Go to file & add this line inside “scripts”- ✅Step 3: package.json "deploy" : "gh-pages -d dist" like so - } "scripts" : { "test" : "echo \"Error: no test specified\" && exit 1" , "deploy" : "gh-pages -d dist" : Run the following command in your project to install . (make sure you have cd into the root of your project directory)- ✅Step 4 gh-pages npm install gh-pages ?👉 What is gh-pages It is an npm package that allows you to publish files to a branch named "gh-pages" on GitHub. You may read more about it here - https://www.npmjs.com/package/gh-pages : Now we just need to push the project to your repository on GitHub. For that, you will have to create a repo manually on GitHub and then run the following commands one after another - ✅Step 5 git add . git push origin master git init git remote add origin "YOUR_REPOSITORY_URL" git commit -m "YOUR_COMMIT_MESSAGE" : Once all your code is pushed to the master branch, go to your repo on GitHub and create a new branch. Name it “gh-pages”. Now run this command in your terminal(make sure you are in the root of your project directory) — ✅Step 6 npm run deploy This step runs the “deploy” script that you added in Step 3 above. Go to your repo’s setting on GitHub. Scroll down to GitHub Pages section. ✅Step 7: You will see something like this👇 P.S — Sometimes the site takes time to get published. So kindly wait for some time till you get that beautiful green message. Keep refreshing the page until you get that attractive tick mark. Conclusion And there you go! That’s how you deploy your Three.js project on GitHub Pages. Showcase your projects and your code to the world. Happy coding! I am learning three.js from . Join me and more than 4000+ developers from all around the world. Let’s grow the Three.JS community together💪 this awesome course by Bruno Simon Last weekend, I made this with Three.js👇 - Link to the GitHub Repository - https://github.com/knightcube/planet-and-stars-threejs & live demo .

YouTube

How To Become An AR/VR Web/Mobile/Game Developer

5 XR Communities to Help Keep up With the Latest XR Trends in 2021

Subscribe to my YouTube channel

Buy me a cup of coffee

Portfolio

Hire Me

Buy Me a Coffee

Newsletter

Too Long; Didn't Read

Publishing A Three.js Project On GitHub Pages

Publishing A Three.js Project On GitHub Pages

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

5 XR Communities to Help Keep up With the Latest XR Trends in 2021

Coding Is More Creative Than You Might Think

3 Key Questions You Need To Answer Before You Push That Code

4 Essential Steps To Convert a Kubernetes Fullstack App to Heroku

4 Ways to Introduce New Technology to Work

5 Effective Deployment Strategies for Machine Learning Models

5 XR Communities to Help Keep up With the Latest XR Trends in 2021

Coding Is More Creative Than You Might Think

3 Key Questions You Need To Answer Before You Push That Code

4 Essential Steps To Convert a Kubernetes Fullstack App to Heroku

4 Ways to Introduce New Technology to Work

5 Effective Deployment Strategies for Machine Learning Models

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps