Creating a Vue.js component library: Part V - Deploying Documentation to Netlify

Documentation is no fun if it isn't public. Now, having configured the component library to use VuePress for the documentation and marketing aspect, we need to deploy it. Netlify is a great choice for this! The VuePress documentation does a great job of documenting deployment options. We'll use Netlify for this example.

Deploy on Netlify

After the last post, the component library plugin structure should be like the structure below. If you've modified some of the naming conventions, that's okay.

.
└─ docs/
  ├── .vuepress/
  │   ├─ components/
  │   │  ├─ examples/
  │   │  │  └─ standard-component-doc.vue
  │   │  ├─ Demo.vue
  │   │  └─ SourceCode.vue
  │   ├─ config.js
  │   └─ enhanceApp.js
  ├─ components/
  │  ├─ README.md
  │  └─ standard-component.md
  ├─ guide.md
  └─ README.md

You can link your account to the correct public repo and have the site build on a project push. This works really well if you're using GitHub, GitLab, etc.

Depending on your workflow, the build triggers can be configured if the generic setup needs to be modified.

Perfect. The documentation site is not live on the URL provided assigned by Netlify. 🍸

https://vue-component-library-template.netlify.app/

Set up a custom domain

What if a custom domain better fits this project? Let's add it.

Create a _redirects file .vuepress/public for Netlify to pick up during the deploy process. Any files placed in the public directory are copied to the root of the generated directory when built.

.
└─ docs/
  ├── .vuepress/
  │   ├─ components/
  │   │  ├─ examples/
  │   │  │  └─ standard-component-doc.vue
  │   │  ├─ Demo.vue
  │   │  └─ SourceCode.vue
  │   ├─ config.js
  │   └─ enhanceApp.js
  ├─ components/
  │  ├─ README.md
  │  └─ standard-component.md
+ ├─ public/
+ │  └─ _redirects
  ├─ guide.md
  └─ README.md

The redirect information is available once the site is deployed and configured with a custom domain. Grab that configuration and add it to the new _redirects file. The information is in the Domain management section in the Netlify console.

The example below illustrates a site that has HTTPS enabled through Netlify. Note the https://.

# Redirect default Netlify subdomain to primary domain
https://<your-site-name>.netlify.com/* https://www.<your-custom-domain>/:splat 301!

The redirect will take effect on the next git push to the repo.

Additional options provided by Netlify

• Snippet Injection
• Asset Optimization
• Prerendering
• Deploy Notifications

Additional considerations for VuePress

• Sitemap (helps when setting up Google Webmaster Tools)
• OpenGraph tags with front matter

Next steps

Publish to npm!