How Create a Website Decentralized on Shift Project

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:

image

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:

image

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:

image

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.

image

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

image

After that press on phantom dapp

image

Now press Open button

image

And confirm message with button OPEN ANYWAY

image

Now more options are displayed on screen, and you can upload your files on phantom:

image

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:

image

In next screen all files you drop will be listed, just press button UPLOAD:

image

You need wait for all is loaded, on phantom:

image

When all is ready, pop up of upload files will be disappear and you will see all your files loaded on phantom:

image

So next step is pin your content to avoid shift remove files from its garbage collector:

image

Now press button Publish to get hash of your site “QmUfTF5ogsC8kLAvEdEejup2HMojMPhioFfvPftnvtek7G”

image

And to preview your website press option Peer Gateway or Cluster Gateway, this will launch link where you can get final content:

image

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:

image

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:

image

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

image

You will check that hash on top of page now is different, press Pin and Publish:

image

And get preview from Peer Gateway or Cluster Gateway, you will get a new link Here

image

So your first hash was QmUfTF5ogsC8kLAvEdEejup2HMojMPhioFfvPftnvtek7G and second is QmVs1JWPJQCT9SgZ7RTTgJVKvS7JKL4voZgQRV1Eyyynay, if you compare both versions you will notice difference on about page:

image

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.

image

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.

Leave a Reply

Your email address will not be published. Required fields are marked *