This week, Stephen tasked us with creating a Content-Addressed Resource on the distributed web or Dweb.

Create a resource (for example, a web page) using IPFS, Beaker Browser, Fritter, or any other distributed web application (see some of the examples here). Provide a link to the resource using any method you wish.

To help prepare for this task, watch the video ‘From Repositories to the Distributed Web‘ as well as these videos on IPFS and Beaker: installing IPFS, making a website with IPFS, installing Beaker.

Source

The final results

The Dweb?

Dweb – The letter D in the popular shortened version stands for either decentralised or distributed. Here’s a visual depiction:

Image Source

The conceptual framework behind the creation of a decentralised or distributed internet is an attempt to replace, improve upon, or at least run parrallel to, the current centralised web (based on the web 2.0 premise). A feature of this current web is siloed platform specific engagement.

In part, this shift in thinking has transpired as a strong reaction to the centralisation of control and power in the hands of a few giant internet and tech companies. A decentralised, distributed web would, in theory, more evenly spread the balance of power, control, etc. across a network of much more people, in the hope of removing the reliance on using web 2.0 platforms to communicate with one another, thus diluting their influence.

Further, the dweb has been brought about by the need to create an immutable way to preserve the largest open and accessible collection of human knowledge ever created.

Here’s how I did it

My laptop screen while installing and initialising IPFS

Following Stephen’s video’s (linked to above) was very straightforward. They are very clear and thorough. The only real hurdle I had to overcome was that I was performing the operation on my Mac laptop rather than on a Windows device. All in all, performing the operations was much the same.

Downloading and extracting IPFS

The first task I set about was downloading and installing the go-ipfs distribution implementation of the Inter-Planetary File System (IPFS).

I unzipped/extracted the go-ipfs download into my home directory (davidmoloney$ in my case). It isn’t as easy as double-clicking on the .exe file in the directory and following an installation wizard I’m afraid! You are the installation wizard!

Installing

I opened up the terminal application on my Mac to begin the process of installation. First things first, I changed directory into the new go-ipfs one which, if you remember, I had saved to my home directory.

cd \go-ipfs

In Stephen’s video, in order to list the subdirectories within the go-ipfs directory on his Windows device, he types:

dir

into the Microsoft Powershell. On the Mac terminal the equivalent command is

ls
Running the ls command in Mac terminal within the go-ipfs directory

You could also type

ls -l

if you were looking for some further detail.

Running the ls -l command in Mac terminal within the go-ipfs directory

Initialising

It’s the “ipfs” file listed on the right hand side of the “ls” screenshot above that I am initially interested in.  I want to initialise this file in order to establish my IPFS node. To do this this I type

../go-ipfs/ipfs init

Initialising the ipfs file generates a hashed peer identity for my IPFS node on the distributed web. It also creates a link for me to progress to the next step and open the Readme file.

I copied the hashed value that had been generated in the terminal (by highlighting it and using Command+C) in order to open the Readme file, also ensuring to copy the

cat

code that comes immediately before the hashed string. Stephen notes the importance of this in his video. Without the “cat” prefix piece the command will not run properly.

I typed and pasted the following command into the terminal to open the Readme file. You will replace the *ABCD* section in the code below with the hashed public key that is generated for you (although I think it’ll probably be the same anyway – ending in “Vv”).

../go-ipfs/ipfs cat /ipfs/*ABCD*/readme

The Readme.md file should open for you within the terminal.

Initialising IPFS via the Mac terminal and opening the Readme file

Starting the daemon service

Once initialised it is important to get the IPFS service up and running by starting the daemon service

../go-ipfs/ipfs daemon

I love how Stephen pronounces daemon in his video – demon! Very Irish!

The IPFS Companion Add-on for Firefox

Ordinarily, it seems that by then browsing to the web address produced after running the daemon service (http://127.0.0.1/tcp/8080) I should be able to access IPFS via my browser. However, without the IPFS Companion add-on, I couldn’t get to that point using Firefox.

Once the IPFS Companion add-on is installed you can click the small icon in the browser bar and then select the Open Web UI option to view a dashboard interface.

IPFS Companion add-on with option to “Open Web UI”
IPFS companion showing a connection to 496 peers
Dashboard UI of my IPFS node and distribution of peers chart
The geographical distribution of peers

Creating and hosting my simple website on IPFS

I followed Stephen’s guidance in his video and used Gio d’Amelio’s quick tutorial to get my simple website set up and hosted on IPFS.

Using the Sublime Text 3 text editor for code, I copied and pasted the sample text provided in the quick tutorial and created basic index.html and style.css files. I saved the files in a subdirectory that I similarly named “ipfssite”, following Stephen’s lead.

Adding my site to IPFS using the terminal

I opened a new terminal window and changed directory into the go-ipfs directory within my home directory again

cd \go-ipfs

From here, I ran the following command to add the .html and .css files within my ipfssite subdirectory to my IPFS node.

./ipfs add -r ipfssite

Doing this produces hashed values for all of the files and also the entire site. The very last hash value before the command completes is the hash value to use to browse to your IPFS site.

http://127.0.0.1:8080/ipfs/QmP8G2jdjwMTtXFMXWLjEkZx3NLhPgTm7vNaayhKE45XbX/

or

https://ipfs.io/ipfs/QmP8G2jdjwMTtXFMXWLjEkZx3NLhPgTm7vNaayhKE45XbX/

And tada!

Finally, I decided to install the beaker browser and establish a new .dat website also. This post is already a little unwieldy so I won’t detail how that went, but it was all pretty straight forward. Ultimately, I simply followed along with Stephen’s video instruction which was excellent.

The first version of my .dat site on Beaker browser

Featured image, Universe, by geralt