This is a demo Gatsby blog that provides the Github Actions setup to handle CI for testing, publishing, and updating your Gatsby blog on IPFS using Textile Buckets.

Here's how it works.

1. You can use any Gatsby project, but the repo provides a simple starter.
2. Each time you update your project, for example with a new blog post, you can open a PR to your project on Github. Your PR will kickoff an action that will build your site and push it to IPFS as a Textile Bucket. You will get a temporary URL to view your site live.
3. If you push changes to your Pull Request the temporary bucket will update for live viewing of your changes.
4. When you close or merge your PR that temporary Bucket and URL will be removed.
5. When you merge or commit into Master, your primary Bucket with a static URL will be updated.
6. If you create a release on your project in Github, you can use your latest Bucket CID to update your live website at your custom URL.

What are Buckets?

Buckets are a file organization and pinning service built on Textile Threads, meaning they are dynamic folders of your files pinned to IPFS. Textile can provide a simple static URL for your Bucket to view the data online or render website content.

Read our hackathon tutorial for buckets here.

You can see how this site works here.

The BUCKET_NAME for this example project is: gatsby-ipfs-blog.

An open pull request triggers a CI job that will generate a temporary Bucket. Here is an example. You can see that in the Action there is a final output that looks like,

The Bucket URL is https://gatsby-ipfs-blog-377515556.textile.cafe/

You can visit the temporary bucket here, https://gatsby-ipfs-blog-377515556.textile.cafe/. In the example Pull Request, there is a new blog post added to the site. The site is fully functional, so here is the new post to review.

When any Pull Request is merged into master, a different Action is kicked off that will update the root bucket available at:

https://gatsby-ipfs-blog.textile.cafe/

Here is an example of the Action that updated our live site.

So to update our site with the changes in our PR above, all that we need to do is merge it!

If we want to update our own domain, we can finally create a Release in GitHub that will update our Cloudflare records with the latest CID of our root bucket, allowing you to run your site right from IPFS.

git clone git@github.com:textileio/gatsby-ipfs-blog.git

cd gatsby-ipfs-blog

Go to GitHub and create a new repo for your blog.

Disconnect from Textile repo,

git remote remove origin

Add your new repo as the origin:

git remote add origin <your new repo>

git push -u origin master

You'll need to install Textile on your local machine. To do so, download the binary for your computer here, https://github.com/textileio/textile/releases/latest.

Apple users: Textile is not signing the build with Apple developer keys, you'll need to authorize the app to run in your security settings. Download the Darwin build and go through the install steps (untar, cd, ./install). Next, run a Textile command once, e.g. textile --help. This will fail due to permissions. Go to System Preferences -> Security. In the bottom right, click to allow Textile to run anyway. Run textile --help again, confirm your decision, and you'll not be prompted again.

Textile uses passwordless login for all users, giving them remote IPFS pinning for their projects.

textile login

Follow the instructions.

textile whoami

Should now show you your account. If you think you'll want to collaborate with others, you should create a team and then enter you team before creating projects and buckets.

textile team add <NAME>

Followed by

textile switch

All Buckets are part of Projects. To make Project management easy, you can initialize a Project in the any directory. Then, each time you are working in that directory with Textile, it will know which project it is working with.

cd <GATSBY PROJECT DIRECTORY>

textile project init <UNIQUE PROJECT NAME>

This will create a file ./.textile/config.yml. If you are using Git, you should commit this file to your code history.

1. Go to the Settings tab of your new Github repo.
2. Select the Secrets option in the menu.
3. Add the following new secrets

There is a value in each of the four workflows you need to update. You can find those files in,

• .github/workflows/bucket_pull_request.yml
• .github/workflows/bucket_remove.yml
• .github/workflows/bucket_publish.yml
• .github/workflows/update_dnslink.yml

In each of those files, change the value for BUCKET_NAME from 'gatsby-ipfs-blog' to your unique bucket name.

If your Gatsby builds someplace other than the public directory, you need to change each of the above workflow files, updating the Bucket step field called path to be your path not the current public path.

Pull requests will result in an ephemeral bucket so you can view your data. The bucket will use your BUCKET_NAME set above plus a unique ID for your Pull Request.

https://<BUCKET_NAME>-<PULL_REQUEST_ID>.textile.cafe/

You can find the live URL of your build at the end of your GitHub Action.

If you commit and push changes to your Pull Request, the above Pull Request, the Bucket will be updated and your above URL will reflect your changes.

When you Merge (or Close) your Pull Request, the Bucket created in the step above will be closed and no longer accessible over the URL.

If you Merge your Pull Request into Master (or commit right to master) your primary Bucket will be updated. Your primary bucket is just,

https://<BUCKET_NAME>.textile.cafe/

If you set the Optional variables in the table above and went through the steps of creating a first DNS entry for a DNSLink, you can update your live website by creating a new Release of your page on GitHub.

npm install -g gatsby-cli

gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog

select npm when prompted

cd gatsby-starter-blog/

gatsby develop

gatsby build

textile project init <your blog name>

See here https://blog.textile.io/ethden-using-ci-to-publish-your-webpage-using-ipfs-and-textile-buckets/