[feat] pages about "Play With Voxel"

[leeduckgo]

• [x] Create Voxels!
• [x] Upload Voxel File to Arweave by Permaweb Dropper on Arweave
• [x] Voxel to HTML by Github-pages Using Template
• [x] Mint Voxel as an NFT!
• [ ] Make Voxel NFT from Virtual to Actual One by 3D Print!

[qiwihui]

I will write "Voxel to HTML by Github-pages Using Template".

[qiwihui]

Using Github Pages to serve Voxel as HTML by using template

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.

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.

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.

Replace the voxel link and commit

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.

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.

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

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.

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.

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

Cool! Now we can mint our NFT using deployed url. We will show you in the next article.