DHost: Publish static websites right from VS Code!
Tags: webdev, web3, ipfs, vscode
Published: 2022-03-15 14:03:56

**DHost VS Code Extension allows you to instantly publish static websites to [IPFS](https://ipfs.io/) by using [web3.storage](https://web3.storage/).**

The idea was to build a decentralized dev tool that can instantly publish websites from VS Code without any third-party centralized cloud services. Now, with DHost you can publish and share your websites quickly right from VS Code with anyone in the world!

### 💻 Install extension from [here](https://marketplace.visualstudio.com/items?itemName=DHost.dhost)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nlf9eakpfr4tr2hmrwfa.gif)

## Features
* ✅ **Decentralized**
* ✅ **Instant hosting** (Publish your website with just 2 commands)
* ✅ **Unlimited uploads**
* ✅ **Accessible to anyone**
* ✅ **Permanent storage** (web3.storage helps to permanently pin your content)
* ✅ **Secure** (Share IPFS links instead of IP Address and host for development)
* ✅ **Free** to use

**DHost even supports build directory uploads (production build of the app made with react.js, vue.js, etc.)**

## Steps to use
Open command palette
* Windows & Linux: `Ctrl + Shift + P`
* MacOS: `Command + Shift + P`

### 1. Select the folder
Select the folder of your static website by `dhost.select` command.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05ot6up0tf8ex2wzytge.png) 

After selecting the folder, the "Folder selected!" popup will appear.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mv8occhzikp7sgtkfo7z.png) 

### 2. Publish to IPFS
Now, publish your static website by `dhost.publish` command.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8vrfo16sd0lmkt94p3ec.png) 

It'll take a few seconds to publish.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7aze95hvmswvhihea4ke.png) 

After publishing successfully, it'll show the IPFS `CID` of your website and an option to open the website (IPFS gateway URI).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vazg3s2cvkc4t9k8agvy.png) 

If you have any queries, then create a [discussion thread](https://github.com/buidltools/support/discussions).

## Working
DHost uses web3.storage, basically it makes the content available over IPFS and permanently pins the content with the help of [Filecoin](https://filecoin.io/) infrastructure. Read more about web3.storage and how it works [here](https://web3.storage/about/).
We have our separate DHost API Token on web3.storage, it allows up to 1TB of content pinning, after that we can request more storage for our respective use.

After uploading your website to IPFS, web3.storage returns a [CID](https://docs.ipfs.io/concepts/content-addressing/) `Qmeq5NxNX644KHNji..`, which is a hash for an array of files stored on IPFS, and that later is combined with IPFS gateway link `https://ipfs.infura.io/ipfs/` to access the website.

## Links
💻 VSCode Marketplace: https://marketplace.visualstudio.com/items?itemName=DHost.dhost
👾 GitHub: https://github.com/buidltools/vscode-dhost

Built by ~ **BUIDL Tools** 
🌐 Website: https://buidltools.com/
🐦 Twitter: https://twitter.com/buidltools

Thank you!