How to Build an NFT Minting Website on Solana: Step-by-Step Guide

[00:00:00]hello my name is rhys hunter and i'm going to teach you how to set up your own nft minting website on solana i've made a tutorial just like this before but since then metaplex has changed requiring an updated guide the reason you might need your own minting website is because minting a bunch of nfts can get really pricey it's much cheaper on the solana network which is what we're going to be dealing with today but even then if you're minting collections of 10 000 nfts it can get pretty pricey so with this website you're not going to have to pay any minting fees because your customers are gonna do it for you also i wanted to let you guys know that i'm an nft artist and i'm gonna be releasing my own collection very soon so if you have any interest in that at all i'm gonna leave the links to my twitter instagram and discord server in the description of this video so you should definitely check out those links to stay up to date with my project okay that's enough talk now let's get into how to create your very own nft minting website alright so the first thing you need to do is install two things visual studio code and node.js for both of these downloads i'll leave the links in the description of this video so choose whatever operating system you're on and download it and once you've downloaded visual studio code then download node.js once you've done that go ahead and open visual studio code and you'll see a screen just like this go to file open folder and navigate to your desktop and select folder now you'll see a screen like this what you're going to want to do is go to terminal new terminal and that'll open up this window here now what you need to do is go to this github page i'll leave the link in the description and go to code and copy the link right here now open up visual studio code again and in this terminal that we opened type npm install git once that's done running we're going to type git clone and then paste in the link that we just copied once that's done you'll now have a folder called metaplex on your desktop so what we're going to do is go to file open folder go back to your desktop and find the metaplex folder open it and click select folder so now we're in the metaplex directory and we can get started go up to terminal new terminal and now in here we're going to type npm install g ts dash node hit enter and it will download so now we need to install the solana command line tool so head over to this website i'll leave the link in the description and if you're on mac or linux you'll copy this command and if you're on windows you'll copy this command so i'm on windows so i'm going to copy this one and then you're going to paste it in this terminal and then once that's done you're going to copy the second one and paste it in here again once that's done you can type solana version to see if it was successfully installed and it was so now that we have salon installed what we need to do is change our url to either be on the devnet or the main net so to do this we're going to type solana config set dash dash url and then we're going to type in the link to devnet.solana.com now since i want my project to be on devnet for testing purposes i'm going to make this say devnet but if you want to be on the mainnet then you'll make it say mainnet beta so i'm going to change mine back to devnet since i'm just doing this for testing purposes and hit enter so now we can see our url is pointing to the devnet now we need to create a wallet for this project so we're going to type solana keygen new dash dash out file and then just type in this path hit enter and now it'll ask you to make a password so just type in whatever you want confirm it so now this is the address to our wallet it's called the pub key so i'm going to go ahead and copy it then i'm going to go ahead and right click right here create a new file call it important and i'm going to paste the pub key in here also right here it'll show your secret phrase to recover your account so i highly recommend copying that down somewhere as well so what we just created is called a key pair so now we want to make sure that that key pair is going to be our default so you're going to type solana config set dash dash key pair and then type in the exact same path that you just created it on this will be config solana devnet test dot json and now as we can see here our key pair path is the path to that so now what we can do is actually check the balance of our wallet by typing solana balance and you can see that we have zero soul since we're on the devnet we can just type solana airdrop one and it'll give us one soul so we need to do this in order to get our project up and running but if you're on the main net then what you're gonna need to do is actually send money to this wallet from a different wallet so since we're on the devnet we were able to just airdrop fake soul to our account but if you're on the main net you will need to use your real wallet to send money to this one now what we need to do is create a folder that's going to store our pictures for our nfts and the json files so right click here hit new folder and type assets and then go ahead and drag all the images you want to upload into that folder notice how my images are named to 0 and 1. it's important here that you start with 0 and then count all the way up for however many images you want so now we need to insert the json files if you don't have these then you're going to need to create new file call it 0.json and create another one and call it 1.json because for each picture we need a json file to go with it now i actually have a video about generating nfts with the json file metadata included so if you follow that guide then you're just going to drag all the json files and all the pngs into this folder but if you're not following that guide and you're making the json files manually then you're going to go to this website i'll leave the link in the description scroll down to the json structure and we're going to copy this entire thing and then go to xero.json and paste it in so the name here will be whatever you want to name this nft so i'm just going to call it nft 0. the description will be the description of the project seller fee basis points is going to be the royalties that you will get for each sale so if you were to put 250 that would be 2.5 percent if you put 500 that would be 5 percent and so on so i want mine to be 2.5 so i'm going to make it that for image we're just going to change this to be image.png since when we upload these it'll automatically change image.png to be whatever the corresponding png actually is and then we can delete both of these and for attributes this is really important so as we can see zero.png it has a cheese hat it has a mask has a suit and a banana so these will be all of the attributes so for hat it will be cheese or its outfit it will be suit or it's a mouth that will be a mask and we've run out so what i'm just gonna do is copy this and paste it on the bottom here so now we have one more and then the item it's holding is a banana you can make as many attributes as you need for your project now the collection will be the name of the collection so make sure you name it whatever you want your collection to be named i'll just call nft collection for the sake of this video and then the family is what holds collections so you can have multiple collections in one family so i'll just name my nanoft you can name it whatever you want now for these files we're going to change this to be image.png and then we're going to go ahead and delete these and that comma change the category to image and now we're getting into creators this determines who gets shares of the royalties so right now there's only one creator who gets a hundred percent of the share if i wanted two creators then i could copy that put a comma and paste it in here and then i could put the walla address of the second creator here and then i'd also change these to be 50 so that both creators get a 50 50 split of the royalties since i'm the only creator i'm just going to delete that and i'm going to copy my wallet and paste it in there so now i will get 100 of the royalties to this wallet and that's it for the json file so i'm going to go ahead and copy the entire thing and now we have to do it for the second image the only thing that i'm going to change is this will be nft1 instead of nft 0 and as you can see this picture actually has different properties than the other one so this one has a top hat buck teeth and no clothes and a hammer so we're going to change this top hat no outfit buck teeth and a hammer and now we're done with this one too and now we're done with all the json files and once that's done you're going to type cdjs and then yarn build then you're going to type cdjs type yarn install okay it's finally done doing that that took like 15 minutes could take shorter or longer for you so now we're gonna do yarn bootstrap once that's done i'm gonna copy this path up to metaplex and then do cd and then paste it so we're back in the metaplex directory now i'm going to type ts dash node js slash packages slash cli slash src slash candy machine dot ts upload dot slash assets dash dash env devnet if you are doing this for the main net then you're going to make it say mainnet beta but since mine is on devnet it will say devnet and then do dash dash key pair and then put in the path to your key pair if you're following the guide exactly then this will be yours now just hit enter now you can see everything was successful here you see it says initialized config for canon machine with public key this so we're going to copy that candy machine with public key and we're going to paste in here because we probably are going to need it later also we will now see a folder called dot cache so if you open that and open the file that's in there you will see this so this is important so we're going to select the entire thing copy it and paste it into our important file now this is cool because if you go over to this link here and paste it into a web browser you'll be taken to this website on rweave and r weave is what permanently stores the data for our nft and then if we go to this link which is the image then we will see the image for our nft is stored here now the other important thing here is the config which is this we've already copied it down here so we don't really need this but we're going to keep it all here just in case now what we need to do is create our candy machine so we're going to run a similar command to this except instead of putting upload in the assets folder we're going to do create underscore candy underscore machine and then at the end we're gonna add dash dash price and this will be the price insole that you want each nft to be so i'm just gonna make mine one sole per nft and then you can hit enter all right now it is finished now this is important we need to copy candy machine pub key and paste it into our important file because we're going to need this later now we're going to run a similar command again but we're going to delete the price and we're going to delete the environment devnet and we're going to change create candy machine to update candy machine and then at the end we're going to add dash dash date and then here you're going to set the date that you want your nfts to be able to be minted since i want mine to be able to be minted right away i'm just going to set a date that has already passed so i'm going to do 3rd of october 2021 then 0 0 0 and then pst since that's my local time if yours is different you can do gmt or est or whatever your time zone is make sure you've copied this down exactly correct and then hit enter and once it's done you're going to copy this timestamp number this is important and paste it into our important file now what we're going to do is clone another github repository so i'm going to copy this path to get back to my desktop and then do cd and paste it in so now we're back at the desktop and i'm going to go to this github page go to code copy the link and back in visual studio code i'm going to type git clone and paste the link in there once that's done running you will now have a folder on your desktop called candy machine mint so we're going to go up to file open folder locate the canon machine mint folder and then select folder now as you can see we are in the canon machine mint folder so we're gonna go to terminal open up a new terminal and we're gonna type yarn install once that's done you're going to type yarn build once that's done we now have to locate our env.example file right click it hit rename and we're going to remove dot example so the file is just called env hit enter and now open that up as you can see we will have a bunch of variables with placeholders so this is where all of the important information in this important file in the metaplex folder is going to go so for the first one react app candy machine config that will be this candy machine with public key file or this config right here so go ahead and copy that and paste it in here now the second one react application machine id will be this canon machine pub key so copy that and paste it in here the third one react app treasury address will be the pub key for your solana wallet that we created which is also the address for the key pair and the react app candy start date will be this timestamp so copy that and paste it in now for these two if you want to stay on devnet then you'll just leave these as they are but if you want to be on mainnet then you'll replace this with mainnet beta and you replace this with mainnet beta but since i'm keeping mine on devnet i'm just going to undo that and save it and we're done with this now all you have to do is start it up so type yarn start and wait for it to start up and once you see a screen just like this then it's done so what you're going to do now is copy this link open up a new tab paste in that link and as you can see this is our website so if you go and connect your wallet type in your password now you can see everything is working beautifully so there are two total available nfts to be minted zero have been redeemed which means there's two remaining so now if we hit mint approve the transaction it's going to load for a minute here and congratulations mint succeeded there we go so now if we go ahead and open our wallet and then go into the settings and change network and put it on devnet you'll keep it on mainnet if you've been doing mainnet this entire time but i've been doing devnet so i'm going to switch it to devnet as you can see here nft0 this is the one we just created it has all the properties it has the description it has everything and we can see here that now it says i've redeemed one and there's still one remaining so if i go ahead and mint another one approve the transaction there we go mint succeeded and now it's sold out there are zero remaining and it's not gonna let me mint anymore and just to show you guys this one is also in my wallet right here we can see nft1 has the properties and the description we set also there's one last thing if you want to customize this website with html you can do so in the candy machine mint folder if you go open public and open the index.html file here you can edit the html to this webpage thank you all so much for watching this video i really hope i was able to help you out in one way or another and if i was able to then consider liking and subscribing so that i know to keep making content also remember to check out my twitter instagram and discord links in the description of this video and i will hopefully see you guys in another video [Music] you