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.

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
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