CRAFTING RICH DOCUMENTATION WITH VUEPRESS

Slide 1

Slide 1 text

CRAFTING RICH DOCUMENTATION WITH VUEPRESS Concatenate Conference August 2018 Concatenate Conference August 2018 @lauragift21, giftegwuenu.com @lauragift21, giftegwuenu.com 1

Slide 2

Slide 2 text

HI A lil bit about me.. 2

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

The Journey The Journey 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Popularity Trend from 2014 - Present 6

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Benefits Of Static Sites Benefits Of Static Sites Generators Generators 8

Slide 15

Slide 15 text

Benefits Of Static Sites Benefits Of Static Sites Generators Generators Performance 8

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Benefits Of Static Sites Benefits Of Static Sites Generators Generators Performance Secure Easy to Deploy SEO Friendly 8

Slide 19

Slide 19 text

Gotchas?? Gotchas?? 9

Slide 20

Slide 20 text

Gotchas?? Gotchas?? 9

Slide 21

Slide 21 text

Gotchas?? Gotchas?? No server 9

Slide 22

Slide 22 text

Gotchas?? Gotchas?? No server No complex functionality 9

Slide 23

Slide 23 text

#JAMSTACK Javascript API's Markup 10

Slide 24

Slide 24 text

#JAMSTACK Javascript API's Markup 10

Slide 25

Slide 25 text

#JAMSTACK Javascript API's Markup Algolia Snipcart Netlify forms Auth0 Cloudinary Disqus 10

Slide 26

Slide 26 text

The Possibilities The Possibilities Are (Almost) Are (Almost) Endless Endless 11

Slide 27

Slide 27 text

So why Documentation? So why Documentation? 12

Slide 28

Slide 28 text

So why Documentation? So why Documentation? 12

Slide 29

Slide 29 text

Benefits of Documentation Benefits of Documentation 13

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Vuepress Vuepress vuepress.vuejs.org 14

Slide 35

Slide 35 text

Vuepress Vuepress vuepress.vuejs.org Building Blocks 14

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Why should you love Why should you love VuePress? VuePress? 15

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

SHOWCASE Vue cli Vuex Vue-server-renderer Vue router Vue-test-utils Vue loader Laravel Nova 17

Slide 45

Slide 45 text

DEMO TIME DEMO TIME 18

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Deployment Github pages Netlify Surge Now Firebase // package.json { "scripts": { "doc:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } } 22

Slide 50

Slide 50 text

REPO bit.ly/vuepress-repo DEMO bit.ly/vuepress-demo 23

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

THANK THANK Y YOU :) OU :) on twitter giftegwuenu.com giftegwuenu.com @lauragift21 Slides: bit.ly/vuepress Questions?? 25