I host the website you’re reading currently using a combination of the InterPlanetary Filesystem IPFS, and a static site generator and command-line tool called Hugo. You might not be accessing it with IPFS yet, but hopefully, you will be by the end of this tutorial. Unlike other free website hosts, not only is IPFS free, but it’s also be censorship-resistant, distributed across the InterPlanetary File System, and ready for Web 3.0.

At the surface, IPFS is a simple service. It takes the file you want to upload, and it calculates what is called a checksum for that file. It then pins the file to your node and shares it to the world (known as a swarm on IPFS). This is similar to the torrent protocol; however, by using IPFS, we can pin and unpin files by their hashes and browse the internet without a centralized host or authority. This makes our website more resilient to outages than the internet we use today.

Without further ado, to get started, you’re going to want to install IPFS and Hugo. I’ll leave that to you because it depends on the platform, and the IPFS website should be more than sufficient in getting started. Both of these tools are written in go. Still, you can use any static site generator to complete this tutorial because, in the end, all we’re doing is uploading a directory (or folder if you’re on windows) to IPFS and pinning it.

Follow the Hugo tutorial until you have built yourself a website that you can upload. Once you’ve done that, you’re ready to continue. Again we just need a static site to upload, so use whatever static site generator you’re most comfortable with or even write one by hand.

For this example, I will use go-ipfs, or the command line client to start my IPFS site, but there are graphical IPFS tools now as well on the IPFS website that should allow you to pin recursively.

I use a tool called Hugo to generate this static website. If you generate it on your own, you should get an identical copy as the one you read here today. This will work with any static site generator and React, Vue, or any other JavaScript build framework as long as you don’t need an API (hint: Solidity).

Since I created a new blog post for my website (right now, yes), I need to regenerate it and upload it to publish. Let’s see how that looks with Hugo and IPFS.

hugo

Yes, that’s it. It just built my website and stored it in the public directory.

Well, that’s great and all, but I want my website to be online. Let me show you how easy that is with IPFS.

ipfs daemon &

Press return. Then I usually disown the process and close the terminal window, but this next part is up to you. Just know that IPFS will stop running when you close your shell, terminal emulator, etc. if you don’t do this.

This also assumes you are using Bash, the most popular shell, or at least the default shell on just about every Linux, Mac, or Unix based terminal. If you’re not, it will be similar but maybe not entirely the same. In either case, tab completion should hopefully work.

disown "%ipfs"

If you type that character for character it will work, but in the future, just use the TAB key to auto-complete it. Along with any other commands, you don’t tab-complete.

Anyways now IPFS is running. What you want to do now is upload the directory you just generated onto IPFS so that our IPFS node can pin it. This will allow our pinning service and our friends to help host our website.

While you have the chance, run ipfs --help to see all the options you have with the IPFS command-line utility. You aren’t limited by what I show you in my tutorial. IPFS is powerful and can host websites and any file type or data object that can be hashed. All subcommands also have help. Check out ipfs add --help for the command we’re going to use next.

ipfs add -r public

Save the hash you get, and that’s it. IPFS will now give me a hash that corresponds to my public directory and all the files within it. Simply put, our website is uploaded, you can send this hash to your friends, and they can see it right now if they use IPFS. You will be able to see it on the internet as well through any IPFS gateway. The IPFS gateway will bridge Web 2.0 and Web 3.0 as we transition to the modern internet. To view it now, go to https://cloudflare-ipfs.com/ipfs/your-hash-here. Or you can use any of the IPFS gateways https://ipfs.github.io/public-gateway-checker/. For example, we can also view it through the official IPFS gateway by prefixing ipfs.io instead of cloudflare-ipfs.com. Or we can use dweb.link. These are all gateways to Web 3.0.

Later in this tutorial, I’m going to show you how you can add this hash to your DNS records as well so that anyone browsing with the IPFS Companion browser add-on will access your site over IPFS not bother with HTTP(S) unless required. Don’t worry, though, your site will still be accessible through HTTP(S), which is entirely backward compatible.

If you’re still down here reading, I commend you for sticking around. This is the most interesting part. I haven’t pinned my website on a pinning service yet; as of right now, it has just been pinned on my home computer where I host an IPFS node. From looking today, Pinata seems to be the most popular IPFS pinning service around, so I’ll use them as our example and where I’m going to pin my website.

Go to Pinata and confirm your email. Done? Great. For some reason, their email verification went to my Spam/Junk folder, so if you can’t find it check and maybe it was sent there by mistake.

The kind people at Pinata also invited me to their slack when I signed up. I don’t use slack or require any support, but if you have any issues here, I’m sure they can help you there.

Head on over to their upload page and paste your hash into the box, give it a name such as “my-website-1” or if you want to be more specific, you can even add the date at the end “my-website-20190929”. Hit pin, and you’re done. Check https://pinata.cloud/pinexplorer to make sure it pinned successfully.

If you have a domain, you can add a TXT record to your website so that people can access it by IPFS. The TXT record will look like this:

TXT     _dnslink.www    dnslink=/ipfs/<your-hash-here>

If you don’t use www as a prefix on your domain because you think it’s cool or something, leave the www out. Or, if you use a different subdomain, you can change it. I could explain how to set up your DNS, but that’s not this tutorial. If you need help with that, contact your search engine of choice, and I’m sure they’ll be able to help you.

Now, if I need to reboot or shut down, Pinata will keep my website pinned for me while my IPFS node is away. If you have friends running IPFS, you can give them this hash, and they can help you pin your site, or if you would like me to help pin your personal site, you can send me an email too, just see my contact info on my about page. I’d be happy to pin some people’s blogs if it meant that more people are exposed to IPFS and Web 3.0.

In my next post, maybe I can show you how you can host the backend API for a dynamic web application on the blockchain.

If you’re reading this as an update to my first post, I don’t have any ideas for another WebSockets post that I could write a blog post about, but if there’s anything you specifically want to see done in WebSockets, send me an email, and I’ll see what I can do.

I was also thinking as another blog post; I could show you guys how I host my own minimal git server at https://git.seanbehan.dev. That isn’t on IPFS yet either, so maybe I could set it up using IPFS to show you what that would be like. If any of these sounds like something you’d be interested in, let me know in the “comments” below.

If you thought my blog post was cool, had any questions, or you want to leave a comment, just sent me an email or Matrix/Telegram message, which you can find links for in the about section of my website.