This guide explain how steps you can follow to create your decentralized website over shift project step by step, so let start.
First you can prepare your static website, I will download a free template for that purpose from here https://colorlib.com/preview/#woodrox you can download all files needed and adjust to your needs:
I extract all files in a folder, here you can check all elements, just consider that shift project will cover basic lenguages like HTML, CSS, JS, but no PHP or other lenguages, so in this example you need to reconfigure your contact_process.php file on other server prepared to run php and link your code to that server:
If you open file index on your browser you can check that all is working fine and is not neededd any special server to access to any element on website:
So you can use any editor like atom, sublime, notepad+, etc to make any adjustment and customize your website and prepare it for upload to shift in its final state, in my case I will skip that step because is not the intention of this guide.
Next step is login to Shift Wallet on testnet using next link: https://wallet.testnet.shiftnrg.org/ if you have any doubt on how login or create an account, please check our guide How use Web Wallet on Shift Project
When you are on your wallet on testnet right now is not needed you have some coins, on testnet you can play with phantom without any cost at moment, so press option Applications
After that press on phantom dapp
Now press Open button
And confirm message with button OPEN ANYWAY
Now more options are displayed on screen, and you can upload your files on phantom:
So next step is upload all your files needed by your website, you can use button upload or drag and drop files phantom will detect you are trying to upload some files:
In next screen all files you drop will be listed, just press button UPLOAD:
You need wait for all is loaded, on phantom:
When all is ready, pop up of upload files will be disappear and you will see all your files loaded on phantom:
So next step is pin your content to avoid shift remove files from its garbage collector:
Now press button Publish to get hash of your site “QmUfTF5ogsC8kLAvEdEejup2HMojMPhioFfvPftnvtek7G”
And to preview your website press option Peer Gateway or Cluster Gateway, this will launch link where you can get final content:
So now you can check your website on phantom working decentraliced, all will work without problem, you can check my example in next link Here:
If you want edit any file you can do it just pressing doble clic on file, phantom will open all your code, so you can make any change:
Just is important Pin and Publish all your changes and everytime you change files a new hash will be created to preserve your changes, so next time you want to open again your files you need last hash to access to it, so for example I will channge Title on file about-us.html and press button EDIT
You will check that hash on top of page now is different, press Pin and Publish:
And get preview from Peer Gateway or Cluster Gateway, you will get a new link Here
So your first hash was QmUfTF5ogsC8kLAvEdEejup2HMojMPhioFfvPftnvtek7G and second is QmVs1JWPJQCT9SgZ7RTTgJVKvS7JKL4voZgQRV1Eyyynay, if you compare both versions you will notice difference on about page:
If you close your wallet and you want to modify your website, you just need to put last hash of your last changes on top of phantom and press Enter, so you can get last files of your website.
Great, now you know how use phantom and get your website decentralized over Shift, just remember that this environment is Testnet and is work on progress, so is not recommended use it like production, Shift is working on lot of new functionality and they can erase content without a previous warning.