Jump to content

Create a Website using IPFS Daemon


buzzkillb
 Share

Recommended Posts

As a way to see if any features would be great to add to Jupiter Denarius IPFS uploader I figured why not create a website that can autoupdate on file changes and to the unsuspecting eye a typical user can't tell they are using an IPFS website.

Example of what we are making as a test of full IPFS powah.

image.png.c9de5d441de6a051f9fa581794f03cd3.png

First install IPFS, using ubuntu command line for this.
https://docs.ipfs.io/guides/guides/install/
Download latest binary here https://dist.ipfs.io/#go-ipfs

Open 2 terminals into your VPS or VM as eventually for this exercise we will run a daemon in 1 terminal and commands in the 2 terminal.

Init IPFS and if in a datacenter (VPS) use the profile server flag.

ipfs init --profile server

This will give some information. I saved it to a text file because I had no idea if this is required for anything or not. Its not.

in 1 terminal lets run the daemon

ipfs daemon

Make a folder like /home/user/test

cd ~
mkdir test
cd test

put a file in there, anything, I am gonna get a block height that updates every so often

wget https://pos.watch/height.txt

create an index.html gonna use a quick sample so we use some javascript to read the height.txt file

<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Cool Test Site | Oh Yeah $D</title>
    <meta name="twitter:card" content="summary">
    <meta name="twitter:url" content="http://api.pos.watch">
    <meta name="twitter:title" content="Testing IPFS">
    <meta name="twitter:description" content="Is Anyone Seeing Me?">
    <meta name="twitter:image" content="https://i.imgur.com/lCvgFft.png?1">
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-129064662-1"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <meta name="google-site-verification" content="Rzkn_bajLR1WONHcP8ob-oP1TWDTZisaYGzeze3Rfnw" />
    <link rel="manifest" href="/site.webmanifest">
</head>

<body>
    <div>
        FULL IPFS TEST: 
          |  
        Block Height: <span id="height"></span>
          |  
        PEER ID: REPLACEMEAFTERTRYINGTHISOUT
    </div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
    <script type="text/javascript" src="./script.js?version=0.01337"></script>
</body>
</html>

Create script.js so we have a javascript to read the file

fetch('height.txt')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    if (data)
        $('#height').html("");
        $("#height").append(data);
        window.blockheight = (data);
  })
  .catch(function(err) {
    console.log(err);
  });

Now the magic sauce to automate this, change the folder path to your folder path

TMP=`ipfs add -r /home/user/test/ | awk 'END{printf $2}'` && ipfs name publish $TMP

What this does is it recursively adds the test directory and then reads the last hash line and publishes to your PEERID, example output below

Published to QmdKLWPao7d5NZQC92s6TRMVBuBrHfCyNZhVXTKAU42kuN: /ipfs/QmXzYAPHsNLucHFUS1tg1FW9P1PiDyq16ar1tGAhmfW13H

peerid is QmdKLWPao7d5NZQC92s6TRMVBuBrHfCyNZhVXTKAU42kuN

Now how do we view this like a normal website? I am going to use namecheap for this sample.

image.thumb.png.b94809788f7baa8ef65dbcff29b0ad03.png

In my example the peerid resolves to ipns and is using dnslink. api is my subdomain for practicing purposes. Which once this all propogates we can now go to http://api.pos.watch

I suspect Denarius can do some really cool things if the wallet had DNS and a few more options like peerid.

  • Like 2
Link to comment
Share on other sites

To take this a step further lets add TLS which requires nginx and letsencrypt certbot.

remove the TXT and CNAME records from above and create A, AAAA, and TXT records for the example subdomain.

image.thumb.png.8526248e9e09cb37dc69c95c861759d0.png

Install nginx

apt-get update
apt-get install nginx

Change the default config

nano /etc/nginx/sites-available/default

to this

server {
    server_name ipfs.example.com;
    server_tokens off;

    listen 80;
    listen [::]:80;
    listen 443 ssl;
    listen [::]:443 ssl;

    location / {
        proxy_pass http://localhost:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

test the config

nginx -t

Install certbot

add-apt-repository ppa:certbot/certbot
apt-get update
apt-get install python-certbot-nginx

run certbot

certbot --nginx -d ipfs.example.com

Say yes to always use 443 or https, whatever it says, you want YES.

reload nginx

systemctl reload nginx

Lets setup some automation, first to automate the certbot renewal.

crontab -e
15 3 * * * /usr/bin/certbot renew --quiet

Create a service to restart IPFS on reboot

sudo nano  /etc/systemd/system/ipfs.service

edit to this

[Unit]
Description=IPFS daemon
After=network.target

[Service]
### Uncomment the following line for custom ipfs datastore location
# Environment=IPFS_PATH=/path/to/your/ipfs/datastore
ExecStart=/usr/local/bin/ipfs daemon --enable-namesys-pubsub
Restart=on-failure

[Install]
WantedBy=default.target

star the service and enable on reboot

systemctl start ipfs
systemctl enable ipfs

Now the website has TLS and fully served through IPFS.

image.thumb.png.84aeca4751d293276e28923ca0b78e59.png

Come up with a way to automate this command and the ipns will automatically update.

TMP=`ipfs add -r /home/user/chaindata/ | awk 'END{printf $2}'` && ipfs name publish $TMP

 

  • Like 1
Link to comment
Share on other sites

  • 7 months later...
  • 2 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...