michaelolof-vuepress-plugin-ipfs
v1.0.3
Published
Host a VuePress project on IPFS
Downloads
1
Readme
VuePress Plugin IPFS
Convert a VuePress 1.x bundle into relative paths making it suitable for hosting on IPFS.
Usage
npm i -D vuepress-plugin-ipfs
Setup
Add to config.js
or theme/index.js
module.exports = {
plugins: [
['vuepress-plugin-ipfs'],
]
}
Once included this this plugin will post process all generated pages and CSS files to use relative asset paths during a production build.
$withBase - Base URL helper
Sites hosted on IPFS will be accessed via a variable depth so it is important to use relative paths for assets wherever possible, however there are certain scenarios where this is not viable due to components being included on multiple pages (such as headers/footers) or when asset paths are programmatically included.
If your site is accessed via an IPFS gateway the base
path will be computed to include the current IPFS gateway and CID. For example, https://gateway.ipfs.io/ipfs/<CID>/
, then base
will be configured to "/ipfs/<CID>/"
. The same goes for any IPNS gateway paths.
Therefore it is best to use this built in helper method to wrap asset paths. $withBase
(injected onto Vue’s prototype) to generate the correct path when accessed via the root domain or IPFS gateway:
<img :src="$withBase('/foo.png')" alt="foo">
Tip: You can use the above syntax in theme components and Markdown files.
💡If you have a base
key set in .vuepress/config.js
or theme/index.js
you will need to remove it in order for this plugin to work correctly.