Pro Yearly is on sale from $80 to $50! »

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.

21c519517dbb5876f15c89ae433d97f3?s=128

Egwuenu Gift

August 11, 2018
Tweet

Transcript

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

    Conference August 2018 @lauragift21, giftegwuenu.com @lauragift21, giftegwuenu.com 1
  2. HI A lil bit about me.. 2

  3. Gift Egwuenu Gift Egwuenu giftegwuenu.com Software Developer @Andela Open Source

    Contributor @okkurLabs @lauragift21 3
  4. The Journey The Journey 4

  5. The Journey The Journey An Overview of Static sites and

    Static Site generators 4
  6. The Journey The Journey An Overview of Static sites and

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

    Static Site generators Why Documentation? Hello Vuepress... 4
  8. 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
  9. Popularity Trend from 2014 - Present 6

  10. https://www.staticgen.com/ Staticgen.com Staticgen.com 7

  11. https://www.staticgen.com/ Staticgen.com Staticgen.com Hugo 7

  12. https://www.staticgen.com/ Staticgen.com Staticgen.com Hugo Gatsby 7

  13. https://www.staticgen.com/ Staticgen.com Staticgen.com Hugo Gatsby Vuepress 7

  14. Benefits Of Static Sites Benefits Of Static Sites Generators Generators

    8
  15. Benefits Of Static Sites Benefits Of Static Sites Generators Generators

    Performance 8
  16. Benefits Of Static Sites Benefits Of Static Sites Generators Generators

    Performance Secure 8
  17. Benefits Of Static Sites Benefits Of Static Sites Generators Generators

    Performance Secure Easy to Deploy 8
  18. Benefits Of Static Sites Benefits Of Static Sites Generators Generators

    Performance Secure Easy to Deploy SEO Friendly 8
  19. Gotchas?? Gotchas?? 9

  20. Gotchas?? Gotchas?? 9

  21. Gotchas?? Gotchas?? No server 9

  22. Gotchas?? Gotchas?? No server No complex functionality 9

  23. #JAMSTACK Javascript API's Markup 10

  24. #JAMSTACK Javascript API's Markup 10

  25. #JAMSTACK Javascript API's Markup Algolia Snipcart Netlify forms Auth0 Cloudinary

    Disqus 10
  26. The Possibilities The Possibilities Are (Almost) Are (Almost) Endless Endless

    11
  27. So why Documentation? So why Documentation? 12

  28. So why Documentation? So why Documentation? 12

  29. Benefits of Documentation Benefits of Documentation 13

  30. Benefits of Documentation Benefits of Documentation It helps keep the

    team informed 13
  31. Benefits of Documentation Benefits of Documentation It helps keep the

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

    team informed Maintaining Open Source software Onboarding new team members 13
  33. 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
  34. Vuepress Vuepress vuepress.vuejs.org 14

  35. Vuepress Vuepress vuepress.vuejs.org Building Blocks 14

  36. Vuepress Vuepress vuepress.vuejs.org Vue Router Webpack Vue Building Blocks 14

  37. Why should you love Why should you love VuePress? VuePress?

    15
  38. Why should you love Why should you love VuePress? VuePress?

    Simplicity First 15
  39. Why should you love Why should you love VuePress? VuePress?

    Simplicity First Fast Performance 15
  40. Why should you love Why should you love VuePress? VuePress?

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

    Simplicity First Fast Performance Automatic Service Worker Multiple Language Support 15
  42. 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
  43. // .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
  44. SHOWCASE Vue cli Vuex Vue-server-renderer Vue router Vue-test-utils Vue loader

    Laravel Nova 17
  45. DEMO TIME DEMO TIME 18

  46. 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
  47. . ├─ docs │ ├─ README.md │ └─ .vuepress │

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

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

    "scripts": { "doc:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } } 22
  50. REPO bit.ly/vuepress-repo DEMO bit.ly/vuepress-demo 23

  51. RESOURCES RESOURCES https://staticgen.com https://vuepress.vuejs.org https://github.com/vuejs/vuepress https://github.com/myles/awesome- static-generators https://www.thenewdynamic.org/ https://jamstack.org/ 24

  52. THANK THANK Y YOU :) OU :) on twitter giftegwuenu.com

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