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.
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. 🍸
What if a custom domain better fits this project? Let's add it.
.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
# 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.
- Snippet Injection
- Asset Optimization
- Deploy Notifications
- Sitemap (helps when setting up Google Webmaster Tools)
- OpenGraph tags with front matter