
Build SVG NFT dApp by Scaffold-Eth | Web3.0 dApp Dev 0x07
国内用户如需交流,可加微信:197626581.Authors: qiwihui, msfewHistory Articles List:Quickstart | Web3.0 dApp Dev 0x01Web3.0 dApp Developer Growth Path | Web3.0 dApp Dev 0x02Scaffold-Eth Quickstart | Web3.0 dApp Dev 0x03Get & Set Value 1.0 | Web3.0 dApp Dev 0x04Get & Set Value 2.0 | Web3.0 dApp Dev 0x05Get & Set Value 3.0 | Web3.0 dApp Dev 0x06loogies-svg-nft is a simple NFT minting and displaying project provided by scaffold-eth. In this tutorial, we will walk you through a step-by-step analysis and impleme...

RSS in Crypto@NonceGeekLab
Supported by NonceGeekLab <> PlayerLinkAttention: All articles by NonceGeekLab do not constitute any investment advice.PlayerLink: A Trustless Decentralized Web3-Oriented Service Aggregation Protocol. Through reliable, secure, and scalable technology, PlayerLink empowers billions to create and get a new service experience.NonceGeekLab: Focus on Crypto, the most interesting track in the world! https://github.com/WeLightProject/NonceGeekLabAuthors: msfew、leeduckgo、Erqi0x00 Key questionsGood que...

Get & Set Value 3.0 | Web3.0 dApp Dev 0x06
In PurposeHandler version 2.0, we learned to add permission control to functions via the require statement. Now we can add a real economy mechanism to it, so that the value of purpose is controlled by a real bidding auction mechanism!0x01 Add OwnerTo get the owner of a contract owner is a must-learn operation for newbies. The easiest way is to set a public owner variable and pass the _owner parameter in the constructor.pragma solidity >=0.8.0 <0.9.0; //SPDX-License-Identifier: MIT contra...
the Online Camp focusing on Web3.0 dApp Development.



Build SVG NFT dApp by Scaffold-Eth | Web3.0 dApp Dev 0x07
国内用户如需交流,可加微信:197626581.Authors: qiwihui, msfewHistory Articles List:Quickstart | Web3.0 dApp Dev 0x01Web3.0 dApp Developer Growth Path | Web3.0 dApp Dev 0x02Scaffold-Eth Quickstart | Web3.0 dApp Dev 0x03Get & Set Value 1.0 | Web3.0 dApp Dev 0x04Get & Set Value 2.0 | Web3.0 dApp Dev 0x05Get & Set Value 3.0 | Web3.0 dApp Dev 0x06loogies-svg-nft is a simple NFT minting and displaying project provided by scaffold-eth. In this tutorial, we will walk you through a step-by-step analysis and impleme...

RSS in Crypto@NonceGeekLab
Supported by NonceGeekLab <> PlayerLinkAttention: All articles by NonceGeekLab do not constitute any investment advice.PlayerLink: A Trustless Decentralized Web3-Oriented Service Aggregation Protocol. Through reliable, secure, and scalable technology, PlayerLink empowers billions to create and get a new service experience.NonceGeekLab: Focus on Crypto, the most interesting track in the world! https://github.com/WeLightProject/NonceGeekLabAuthors: msfew、leeduckgo、Erqi0x00 Key questionsGood que...

Get & Set Value 3.0 | Web3.0 dApp Dev 0x06
In PurposeHandler version 2.0, we learned to add permission control to functions via the require statement. Now we can add a real economy mechanism to it, so that the value of purpose is controlled by a real bidding auction mechanism!0x01 Add OwnerTo get the owner of a contract owner is a must-learn operation for newbies. The easiest way is to set a public owner variable and pass the _owner parameter in the constructor.pragma solidity >=0.8.0 <0.9.0; //SPDX-License-Identifier: MIT contra...
the Online Camp focusing on Web3.0 dApp Development.
Share Dialog
Share Dialog

Subscribe to Web3dAppDevCamp

Subscribe to Web3dAppDevCamp
<100 subscribers
<100 subscribers
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.


No activity yet