EthDen: Using CI to publish your webpage using IPFS and Textile Buckets
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,
- How to manage dynamic folders on IPFS using Textile Buckets
- How to update your buckets automatically from your GitHub Pushes
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/checkout@v1
- name: Bucket push action
id: push
uses: textileio/github-action-bucket-push@master
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/cloudflare-update-dnslink@master
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.
- https://github.com/textileio/js-todo-demo
- Here is the bucket it updates for viewing while developing, https://textile-js-todo-demo.textile.cafe/
- And here is the domain it releases to, https://todo.txtl.us/