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.

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.

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

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 need three items:

• Voxel URI -- Uploaded by Permaweb Dropper

  https://arweave.net/7izfDARufPcQr0qNLYtVGaeZK1UlQM8B_2VFznNosMs

• Github Pages URL -- You just generated

• Commit Hash -- to make sure the github pages is not changed after NFT minted.

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.

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.

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

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 need three items:

• Voxel URI -- Uploaded by Permaweb Dropper

  https://arweave.net/7izfDARufPcQr0qNLYtVGaeZK1UlQM8B_2VFznNosMs

• Github Pages URL -- You just generated

• Commit Hash -- to make sure the github pages is not changed after NFT minted.