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
Top comments (0)