Setting up this IPFS Blog

While scanning all the IPFS nodes that mine was connected to, I came across PUSH32DUP2 ( ipfs, www ), liked the look of the site and decided that I wanted that for myself.

So here we are, the obligatory “I’m setting up a page on IPFS” post.

IPFS Setup

I’m not going to cover setting up IPFS, because if you are here, you have probably already done this, but you should have two command line parameters to make IPNS behave is a more sane manner:

$ ipfs daemon --enable-pubsub-experiment --enable-namesys-pubsub

Install hugo

First step is, of course, to install the software. I use archlinux whenever I can, and the official repositories happen to have a hugo package without having to dive into compiling the package from the Arch User Repository (AUR). Because this is a post on hugo on IPFS, I might as well describe installing hugo from IPFS (see pacman.store for more details).

Setup /etc/pacman.d/mirrorlist with the IPFS mirror:

# Site-Local P2P Node
Server = http://x86-64.archlinux.pkg.pacman.store.ipns.localhost:8080/$repo

Then install hugo.

$ sudo pacman -Sy hugo

Theme

After browsing thru the hugo theme page for blogs, I settled on using mainroad. Only after I installed it, did I realize that it looks awfully like the theme that PUSH32 is using. Ops. Not intentional. I did follow the very important instructions on relative URLs. Sites break hard when loaded into IPFS if they are not using URLs relative to the current file. Probably the worst you can do is to use anything like href="/path/to/asset.css", because it breaks every gateway that uses /ipfs/.

Here is my config.toml:

baseURL = "http://127.0.0.1/"
languageCode = "en-us"
title = "Personal Site"
theme = "mainroad"
relativeurls = true

Some JavaScript Magic

I didn’t want this site to do what just about every other site I’ve come across on IPFS that links to other IPFS content to do: assume a particular gateway is to be used. Instead, I’m using JavaScript to pull the gateway was used to access the site, the part before /ipfs/ or /ipns/ in the URL, and then rewrite all the links on the page to IPFS content to use that gateway. The links by default point to the IPFS project’s gateway. I also added a bit where it works with hugo server -D and uses localhost.

To do this required adding two JavaScript files to the site: jQuery, because it’s useful, and the re-writer script.

I make sure the following was in the file layouts/partials/footer.html:

<script defer language="javascript" type="text/javascript" src="{{ "js/jquery-3.5.1.min.js" | urlize | relURL }}"></script>
<script defer language="javascript" type="text/javascript" src="{{ "js/ipfs-link-rewriter.js" | urlize | relURL }}"></script>

You can download ipfs-link-rewriter.js from here. I’ve made it available under an MIT license, so feel free to use it in your own site.

This will work as long as you have a browser that both supports JavaScript and has it enabled. If you are using a browser that doesn’t support JavaScript at all (I’m looking at you, text mode browser ’links’), you are out of luck. If you have JavaScript disabled, I’m sure you are capable of copying the URL and editing it before going to the page.

Build and Publish

To get started, I’m just using hugo -D, then ipfs add -r public, then ipfs name publish $HASH. I plan to write a publish script that does these steps and also removes the last added build from the pin set, but doing things manually should work for now.

Comments