https://github.com/cwaring/vuepress-plugin-ipfs

Host any VuePress project on IPFS
https://github.com/cwaring/vuepress-plugin-ipfs

ipfs ipfs-gateway vuepress vuepress-plugin vuepress-plugin-ipfs

Last synced: 18 days ago
JSON representation

Host any VuePress project on IPFS

• Host: GitHub
• URL: https://github.com/cwaring/vuepress-plugin-ipfs
• Owner: cwaring
• License: mit
• Created: 2019-12-04T14:07:43.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-03-26T01:17:38.000Z (over 2 years ago)
• Last Synced: 2024-11-02T00:32:35.830Z (about 2 months ago)
• Topics: ipfs, ipfs-gateway, vuepress, vuepress-plugin, vuepress-plugin-ipfs
• Language: JavaScript
• Homepage:
• Size: 38.1 KB
• Stars: 14
• Watchers: 3
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# VuePress Plugin IPFS

![](https://user-images.githubusercontent.com/106938/70317123-0b3abc80-1815-11ea-859a-eb91c0ab4a81.png)

> Convert a [VuePress](https://vuepress.vuejs.org/) 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//`, then `base` will be configured to `"/ipfs//"`. 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:

```vue



```

> 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.**