Let’s do some IPFS hosting…
Introduction
As my previous post so joyously stated, my blog is now completely hosted over IPFS. This post will show you how I update my blog, and how I publish it over IPFS. Note that these are still manual steps, and I am looking into how to automate it all so I can just edit, commit and push and have all this done automatically without thinking.
My previous setup used the brilliant forestry.io, but the downside of that is that it won’t work with Gitea , which is what I now use instead of GitHub.
So, for now I just do it by hand, which isn’t too much work. Let me show you how!
But first, let’s discuss the tools we are using. Links to the relevant software or websites are linked in the section titles.
Tools we use.
Hugo
I use hugo to render this site. Hugo is a static site generator. It will turn markdown pages into beautifully generated HTML. Also, all the pages are static, so you won’t have to worry about cross-site scripting, database injection attacks, or anything else that has running code behind it. Everything is static. Also, as an added benefit, static sites are FAST. There is no processing of pages, no database queries to wait for, nothing that impedes performance. All that needs to be done is to serve your pages. Nothing more, nothing less. Also, it can be hosted on a potato, and still be fast. It’s a win-win.
The only downside is that Hugo takes some study. You will need to get into Hugo’s preprocessing language if you want to make something of your own, but there are many themes to choose from and modify. But do prepare to be tinkering for quite a spell.
There are of course other site generators, like Jekyll, but Hugo is magnitudes faster and easier to set up (only one binary for Hugo, a crapton of Ruby deps for jekyll).
Cloudflare IPFS gateway
I host this website on Cloudflare. The benefits of this are that I can use Cloudflare’s infrastructure for free, and it’s nice and speedy. It also handles DNS to IPFS gatewaying, so people without IPFS can still get to your content.
For my method, your domain should also be hosted on Cloudflare, since we will be using Cloudflare’s API to make DNS changes for when we update our website.
Pinata and/or Infura
Pinata and Infura are services that will pin your site on IPFS. Pinning is making sure that data isn’t deleted from IPFS and it will keep the data alive so people can get at it, even when your own IPFS node is offline. You can host your website on your own IPFS node, but that will only keep it up while you are. A pinning service like pinata or infura makes sure it’s always up, even you’re not.
Pinata is free up to 1GB of pinned data, infura is completely free but with a limit of 100MB transactions. Infura is great to start pinning with when your website is just starting out, but when you grow, it’s prudent to look at pinata instead. It’s really cheap though (Pricing can be found here.)
ipfs-deploy
This is what makes the magic happen. After you render your static site, you
let ipfs-deploy upload your site to infura and/or pinata to pin it, and it
will update your cloudflare DNS to let your _dnslink record point to the
right IPFS hash on the network.
Putting things together…
Set up Cloudflare
First, make sure your domain DNS is hosted on cloudflare. Moving your DNS to Cloudflare is really easy, and shouldn’t take you more than a few hours, depending on your registrar. Most of the time involved is waiting for DNS to roll over, so make sure your TTLs are low before you start. You can increase them later again once everything is moved over. The switchover for your domain’s name servers to Cloudflare could take up to a day, worst case scenario. So it pays to prepare.
If you’re already on cloudflare, then you’re already set. Get your Cloudflare API key and save it somewhere, you’re going to need it. You can find it in your account settings.
Get an account on Pinata (optional)
It would also make sense that if you are going to use Pinata, to get an account there too. You need this for another API key we’re going to use for pinning our site.
Make sure your site is compatible.
Ok, let’s assume you have a hugo website all ready to go (there are plenty tutorials out there, so I’m not going into that). You’ve spent some time making it all pretty, and you want to get rid of your webserver.
Great. Let’s get set up.
First, open your config.toml and make sure these lines are in there:
canonifyurls = true
relativeurls = true
This will make sure that all links in your static site are relative, and things
won’t point to links with https:// in them, which could possibly break stuff.
Also, now is the time to commit/push your site into a git repository. I’m going to assume that you did this (also, configuring git is outside of the scope for this document, so I’m not even going to bother).
Configuring ipfs-deploy
Now, let’s get the magic to work. We do this first before setting up DNS, because we want something to be hosted inside IPFS before we point to it with the Cloudflare IPFS gateway.
In the root of your hugo project, we’ll need an .env-file. This file contains
all the keys and credentials we need to be able to one-shot this thing.
IMPORTANT
Oh, before you go all half-cocked to commit/push your site to your git repo,
make sure this file is in your .gitignore. You wouldn’t want your Cloudflare
API keys to be all over github, now would you? So:
$ echo ".env" >> .gitignore
$ git add .gitignore
$ git commit .gitignore
$ git push
I would recommend you do the above. Unless you want people to administer your sites for you. ;)
Anyway, your .env-file should look something like this:
# pinata credentials
IPFS_DEPLOY_PINATA__API_KEY=<key>
IPFS_DEPLOY_PINATA__SECRET_API_KEY=<secret key>
# cloudflare credentials
IPFS_DEPLOY_CLOUDFLARE__API_EMAIL=<cloudflare login e-mail>
IPFS_DEPLOY_CLOUDFLARE__API_KEY=<cloudflare global api key>
# cloudflare dns info
IPFS_DEPLOY_CLOUDFLARE__ZONE=<domain name>
IPFS_DEPLOY_CLOUDFLARE__RECORD=<domain name>
(Note, the pinata entry is optional, when you’re first starting out, the Infura pinner will probably be fine for now)
Let’s run this thing:
Awesome. It seems to have published my website to the ipfs hash QmVEnhXTRcKHjkQXBVPiDnwCeYS48UZnz9bib5s3sFihEe. Let’s look at it (any ipfs gateway will do, but the
pinata one is in my paste buffer, so why not):
https://gateway.pinata.cloud/ipfs/QmVEnhXTRcKHjkQXBVPiDnwCeYS48UZnz9bib5s3sFihEe
So, we now have content up on IPFS. Now we can do the fancy bits.
Remember that we put our Cloudflare API key into the .env-file? Let’s make
sure the rest of the planet doesn’t have to remember that awful hash.
Log into your Cloudflare panel (you might already be logged in), and go to your DNS settings of your domain. Now you need to perform the following steps:
- Remove the
AandAAAArecords that point to the main domain. Don’t remove your subdomains, just for the main host entry (coolvibe.org in my case). - Create a new CNAME record for ‘@’ (the domain itself), which points to
cloudflare-ipfs.com
Okay, that’s good, but your domain is now in limbo. Let’s fix that:
By the way, did you notice something? Look carefully at the generated IPFS hashes…
They’re the same, right? Do you know why? The data didn’t change, that’s why.
You can run ipfs-deploy as much as you like. Nothing will change until you
make changes.
Okay, so now DNS is all set up, now let’s tell Cloudflare’s IPFS gateway about it.
Go here: https://www.cloudflare.com/distributed-web-gateway/
At the bottom of that page is a form. Enter your domain there and hit ‘Submit’.
That’s it. It may take a few monents for the stars to align, but now your domain is hooked up to IPFS, and so is your website. Observe for this site:
elrond:img:% host -t TXT coolvibe.org | grep dnslink <master ✗>
coolvibe.org descriptive text "dnslink=/ipfs/QmVEnhXTRcKHjkQXBVPiDnwCeYS48UZnz9bib5s3sFihEe"
See that hash? Now, after I post this, it will be different, but you can still go to the previous version of this site. That is, until I unpin it.
Updating your website
So, your domain lives on IPFS now, and you want to add a new post to your hugo blog. Do you have to go through the whole rigamarole again?
No way. I wouldn’t be doing it if it wasn’t a cinch.
When you want to update, just create a new post and regenerate the site. All you have
to do to update your site, is to run ipfs-deploy -p pinata -d cloudflare from
your hugo root and it will be updated. It will propagate quickly through the
IPFS network, and it will be live almost immediately.
Conclusion
I’ve been slowly moving my websites away from wordpress and onto Hugo and IPFS. It’s no easy task. But it’s worth it though. It saves costs, and it’s fast as hell. I hope you found this enlightening and useful. I hope to see more people checking out IPFS.
