Using Github Pages to Serve Voxel as HTML by Using Template

Author: qiwihui

In this articles, we will show how to use Github pages to serve Voxel as HTML by using template. This HTML file will be used to mint our NFT.

In the previous article, we have upload the voxel file to Arweave with Permaweb Dropper. And we got the permanent link of the voxel file, for example https://5ywn6daenz6poefpjkgs3c2vdgtzsk2vevam6aozkfzzzwrmgi.arweave.net/nFF3J4VB0BP9eHt35gdffGuwCXaHfXwtJl2K6u4GyA0. Now Let's use Github pages to serve the voxel file as HTML.

0x01 Clone the repository

First, we can navigate to the WeLightProject/voxel-viewer-page project. This is a template repository. We will use this template to create our own project.

use-this-template
use-this-template

Click the use this template button, and you will see the following page. We need to fill the repository name and description. Then just click the Create repository from template button. Then the repository will be created in a few seconds.

repository-info
repository-info

Second, we need to clone the repository. We can click the "Clone" button. Then wen can copy the link of the repository. For example, https://github.com/qiwihui/MyDeerVoxel.git.

clone
clone

Then we can open a terminal and run the following command to clone the repository.

git clone https://github.com/qiwihui/MyDeerVoxel.git
cd MyDeerVoxel

We need to replace the voxel link in the handler.js file. We can open the handler.js file in your IDE, and in the 19th line, we need to replace the link in src tag to the permanent link of the voxel file, which is https://5ywn6daenz6poefpjkgs3c2vdgtzsk2vevam6aozkfzzzwrmgi.arweave.net/nFF3J4VB0BP9eHt35gdffGuwCXaHfXwtJl2K6u4GyA0.

replace-link
replace-link

Then we need to commit the changes and push it to Github. We can run the following command to commit the changes.

git add .
git commit -m "Add voxel file link"
git push origin master

0x03 Deploy to Github Pages

Finally, we need to setup the Github pages. We navigate to repository url and click Settings. Then we can click the Pages tab. We should choose the main branch. And then click Save.

choose-branch
choose-branch

The Github Pages will deploy your project automatically and you can see the website link when it is ready. For example, https://qiwihui.github.io/MyDeerVoxel.

view-the-link
view-the-link

We can now open the website in your browser. The website will show the voxel file.

website-ready
website-ready

Cool! Now we can mint our NFT using deployed url.

we need three items:

Index of dApp
Index of dApp
How to find latest commit hash
How to find latest commit hash
How to find latest commit hash
How to find latest commit hash
Subscribe to Web3dAppDevCamp
Receive the latest updates directly to your inbox.
Verification
This entry has been permanently stored onchain and signed by its creator.