# Using Github Pages to Serve Voxel as HTML by Using Template
By [Web3dAppDevCamp](https://paragraph.com/@apecoder) ยท 2022-03-05
---
> **Author:** [qiwihui](https://github.com/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](https://github.com/WeLightProject/voxel-viewer-page) project. This is a template repository. We will use this template to create our own project.
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
0x02 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`.
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
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
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
We can now open the website in your browser. The website will show the voxel file.
website-ready
Cool! Now we can mint our NFT using deployed url.
we need three items:
Index of dApp
* **Voxel URI** -- Uploaded by Permaweb Dropper
[https://arweave.net/7izfDARufPcQr0qNLYtVGaeZK1UlQM8B\_2VFznNosMs](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.
How to find latest commit hash
How to find latest commit hash
---
*Originally published on [Web3dAppDevCamp](https://paragraph.com/@apecoder/using-github-pages-to-serve-voxel-as-html-by-using-template)*