Static-site generators

Static-site generators like Hugo, Jekyll, Middleman, Next.js, and VuePress are all incredibly popular platforms building websites quickly. This guide walks through how to integrate IPFS into each of these workflows.

Hugo

Refer to Hugo's Quick Start (opens new window) to install and set up your project.

In config.toml add relativeURLs and set it to true.

relativeURLs=true

Build static pages

hugo -D

Output will be in ./public/ directory by default. Upload the public folder to IPFS.

VuePress

Refer to VuePress' Getting Started (opens new window) to install and set up your project.

To build a static site:

vuepress build

Output will be in ./.vuepress/dist directory by default.

Use a command to convert a static site to only use relative URLs. In this example, we'll be using all-relative (opens new window)

cd .vuepress/dist/
npx all-relative

Upload the dist folder to IPFS.

Middleman

Refer the Middleman's Installation (opens new window) guide to install Ruby and Middleman.

1. Enable relative links and disable index file strip in your project's config.rb file:

   set :relative_links, true
   set :strip_index_file, false
   

   Links generated by the link_to helper or by markdown will become relative.

2. Build your static site:

   middleman build
   

   Middleman will output your site to the ./build folder.

3. Upload the build folder to IPFS.

Jekyll

Refer to Jekyll's Installation (opens new window) guide to install Ruby and Jekyll.

Refer to Jekyll's Quickstart (opens new window) to set up your project.

To build a static site:

jekyll build

Output will be in ./_site by default.

Use a command to convert a static site to only use relative URLs. In this example, we'll be using all-relative (opens new window)

cd _site/
npx all-relative

Upload the _site folder to IPFS.

WordPress

While WordPress is not a static site generator, it is possible to turn it into a static website and migrate it over to a static-hosting service. Take a look at this blog post from Fleek that walks you through the whole process (opens new window)!

Keep in mind that you will lose the ability to manage your website's content through the WordPress back-end, and that this process requires that you install a plugin along-side your WordPress site.