EthDen: Using CI to publish your webpage using IPFS and Textile Buckets

community • Feb 16, 2020

Update: Buckets have gotten a major update. CLI examples below have been changed. To get the latest, check out the new Buckets documentation.

Okay, submissions are in and winners will be announced soon. But just because the competition is over, doesn't mean your hack needs to stop improving. In my previous two posts I showed you,

Now, to take you the final mile, I'll show you how to use a new GitHub action to push use your Bucket CID on IPFS to update your custom domain. With this simple setup, you'll have your website,

Built dynamically into a Textile Bucket for testing.
Use a GitHub release to turn the latest bucket into your live website.
Enjoy all the fun of running your websites on IPFS.

Cloudflare Setup

If you want a complete setup totorial for DNSLink on Cloudflare, see our tutorial here

You'll need to own a domain name.
You'll need a Cloudflare account to manage your website's DNS (here's how to move an existing site).
You'll need to setup an initial DNSLink record pointed to an IPFS CID. You can follow this simple tutorial here, https://developers.cloudflare.com/distributed-web/ipfs-gateway/connecting-website/.
Make sure to take note of the record name you creat when setting up your TXT field, it should look somthing like _dnslink.something. You'll use this below as your, RECORD_NAME
You'll need to create a Cloudflare Token for updating your DNS Records on your site. This is an easy XXX step process. Login to your Cloudflare account, Click My Profile, click API Tokens, click Create Token, click the Start with a Template option, choose the first template called Edit Zone DNS, choose your website for the Specific Zone entry. Now copy the token, you'll use that below as your CLOUDFLARE_TOKEN.
Visit your domain settings in Cloudflare. At the bottom of the main page, you'll find a field called Zone Id, copy the value. You'll use that below for, CLOUDFLARE_ZONE_ID.

see tutorial blog post above if you wish to add HTTPS to your dnslink

If you've done the above correctly, or want to skip the above, you should have four values to use in this tutorial,

CLOUDFLARE_TOKEN
CLOUDFLARE_ZONE_ID
RECORD_DOMAIN this is just your domain name registered on Cloudflare (e.g. textile.io).
RECORD_NAME this is the name value of the TXT field you created for updating with your new CID.

Textile Bucket Websites

I showed you in the previous post how to add Buckets to your CI. By doing the next step, you'll have a two part CI for your website,

All Pull Requests will update your Bucket. You can always view your bucket on the Textile gateway, with a URL like, https://<your bucket name>.textile.cafe.
All Release will update your bucket on the gateway and update your own website domain.

Add a website update job

Based on the previous blog post, you should already have a GitHub action called bucket_push.yml (or main.yml). You should duplicate that copy in the same directory. You'll want to call the second file, bucket_release.yml. Next, let's go into the bucket_release.yml and edit a few things.

In the top section,

name: bucket_push
on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - master

You should change those lines to instead be,

name: bucket_release
on:
  release:
    types: [created]

This tells the job to only run when you create a Release in the repo.

Next, at the bottom, add a new Step to the Steps. So yours looked something like,

jobs:
  bucket_push:
    runs-on: ubuntu-latest
    name: Update a Textile bucket
    steps:
    - name: Checkout
      uses: actions/[email protected]
    - name: Bucket push action
      id: push
      uses: textileio/[email protected]
      with:
        bucket-name: 'bucket-push-action'
        path: '*'
        token: ${{ secrets.TEXTILE_AUTH_TOKEN }}
    # Use the output from the `hello` step
    - name: Get the output CID
      run: echo "The CID was ${{ steps.push.outputs.cid }}"

We are going to add a new step right after the last run. We'll add,

    - name: Update DNSLink
      env:
        CLOUDFLARE_TOKEN: ${{ secrets.CLOUDFLARE_TOKEN }}
        CLOUDFLARE_ZONE_ID: ${{ secrets.CLOUDFLARE_ZONE_ID }}
        RECORD_DOMAIN: 'textile.io'
        RECORD_NAME: '_dnslink.cloud'
      id: dnslink
      uses: textileio/[email protected]
      with:
        cid: ${{ steps.push.outputs.cid }}

Here, you are going to replace two values. First, replace the value of RECORD_DOMAIN, from textile.io to whatever domain you setup above. Next, change _dnslink.cloud to the value of the RECORD_NAME you created above.

Finally, you need to add a couple more Secrets to your GitHub repo. You can find Secrets here,

Just add two. One with the name CLOUDFLARE_TOKEN and a value of the token you created above. Next, create one CLOUDFLARE_ZONE_ID with the Zone ID value you copied above.

Create a Release

That's it! Your website should be ready to publish. All you need to do is create a new release. From the main page of your project repo, click releases, click Draft new release, enter some details and confirm. Your new release action will start running. When it is finished, you should see your website updated (You can find the Actions tab on your repo page to check the job status at any time).

If you want to see a repo where this is running live, take a look at our demo Todo App.