Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CRAFTING RICH DOCUMENTATION WITH VUEPRESS

CRAFTING RICH DOCUMENTATION WITH VUEPRESS

This talk will be focused on the problems with documenting software and how you can leverage Vuepress as a solution for writing rich documentation. You’ll also learn the features of Vuepress and how it differs from other static site generators.

Gift Egwuenu

August 11, 2018
Tweet

More Decks by Gift Egwuenu

Other Decks in Programming

Transcript

  1. CRAFTING RICH DOCUMENTATION WITH VUEPRESS Concatenate Conference August 2018 Concatenate

    Conference August 2018 @lauragift21, giftegwuenu.com @lauragift21, giftegwuenu.com 1
  2. The Journey The Journey An Overview of Static sites and

    Static Site generators Why Documentation? 4
  3. The Journey The Journey An Overview of Static sites and

    Static Site generators Why Documentation? Hello Vuepress... 4
  4. What are Static Site Generators? What are Static Site Generators?

    Static Site Generators are a new, hybrid approach to web development that allows you to build a powerful, website locally on your computer but pre- builds the site into static files for deployment. https://wsvincent.com/what-is-a-static-site-generator/ 5
  5. Benefits Of Static Sites Benefits Of Static Sites Generators Generators

    Performance Secure Easy to Deploy SEO Friendly 8
  6. Benefits of Documentation Benefits of Documentation It helps keep the

    team informed Maintaining Open Source software 13
  7. Benefits of Documentation Benefits of Documentation It helps keep the

    team informed Maintaining Open Source software Onboarding new team members 13
  8. Benefits of Documentation Benefits of Documentation It helps keep the

    team informed Maintaining Open Source software Onboarding new team members Better opportunities for the team to remember things 13
  9. Why should you love Why should you love VuePress? VuePress?

    Simplicity First Fast Performance Automatic Service Worker 15
  10. Why should you love Why should you love VuePress? VuePress?

    Simplicity First Fast Performance Automatic Service Worker Multiple Language Support 15
  11. Why should you love Why should you love VuePress? VuePress?

    Simplicity First Fast Performance Automatic Service Worker Multiple Language Support Google Analytics out of the box 15
  12. // .vuepress/config.js module.exports = { themeConfig: { nav: [ {

    text: 'Home', link: '/' }, { text: 'Guide', link: '/guide/' }, { text: 'External', link: 'https://google.com' }, ] } } THEMING // .vuepress/config.js module.exports = { themeConfig: { algolia: { apiKey: '1eb37de6308abdccf9b760ddacb418b4', indexName: 'qwerty' } } } Navbar configuration Custom Algolia Search 16
  13. Getting Started // install vuepress globally $ yarn global add

    vuepress # create a markdown file echo '# Hello VuePress' > README.md # start writing vuepress dev # build to static files vuepress build 19
  14. . ├─ docs │ ├─ README.md │ └─ .vuepress │

    └─ config.js └─ package.json Project Structure .vuepress/config.js(config center) README.md (manage content) package.json(manage dependencies) 20
  15. 21

  16. Deployment Github pages Netlify Surge Now Firebase // package.json {

    "scripts": { "doc:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } } 22
  17. THANK THANK Y YOU :) OU :) on twitter giftegwuenu.com

    giftegwuenu.com @lauragift21 Slides: bit.ly/vuepress Questions?? 25