# Using Github Pages to Serve Voxel as HTML by Using Template

**Published by:** [Web3dAppDevCamp](https://paragraph.com/@apecoder/)
**Published on:** 2022-03-05
**URL:** https://paragraph.com/@apecoder/using-github-pages-to-serve-voxel-as-html-by-using-template

## Content

Author: qiwihuiIn 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 repositoryFirst, 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-templateClick 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-info0x02 Replace the voxel link and commitSecond, 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.cloneThen 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-linkThen 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 PagesFinally, 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-branchThe 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-linkWe can now open the website in your browser. The website will show the voxel file.website-readyCool! Now we can mint our NFT using deployed url. we need three items:Index of dAppVoxel URI -- Uploaded by Permaweb Dropper https://arweave.net/7izfDARufPcQr0qNLYtVGaeZK1UlQM8B_2VFznNosMsGithub Pages URL -- You just generatedCommit Hash -- to make sure the github pages is not changed after NFT minted.How to find latest commit hashHow to find latest commit hash

## Publication Information

- [Web3dAppDevCamp](https://paragraph.com/@apecoder/): Publication homepage
- [All Posts](https://paragraph.com/@apecoder/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@apecoder): Subscribe to updates
- [Twitter](https://twitter.com/Web3dAppCamp): Follow on Twitter