Static-site generators

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

Hugo

Refer the 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 the 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.

Jekyll

Refer the Jekyll's Installation (opens new window) guide to 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.