Crafting Rich Documentation with Vuepress

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

HI A lil bit about me.. 2

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

The Journey 4

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

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

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

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 prebuilds the site into static files for deployment. https://wsvincent.com/what-is-a-static-site-generator/ 5

Popularity Trend from 2014 - Present 6

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

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

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

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

Benefits Of Static Sites Generators 8

Benefits Of Static Sites Generators Performance 8

Benefits Of Static Sites Generators Performance Secure 8

Benefits Of Static Sites Generators Performance Secure Easy to Deploy 8

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

Gotchas?? 9

Gotchas?? No server 9

Gotchas?? No server No complex functionality 9

#JAMSTACK Javascript API's Markup 10

#JAMSTACK Javascript API's Markup Algolia Snipcart N e t l i f y fo r m s Au t h 0 Cloudinary Disqus 10

The Possibilities Are (Almost) Endless 11

So why Documentation? 12

Benefits of Documentation 13

Benefits of Documentation It helps keep the team informed 13

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

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

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

Vuepress vuepress.vuejs.org 14

Vuepress vuepress.vuejs.org Building Blocks 14

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

Why should you love VuePress? 15

Why should you love VuePress? Simplicity First 15

Why should you love VuePress? Simplicity First Fast Performance 15

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

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

Why should you love VuePress? Simplicity First Fast Performance Automatic Service Worker Multiple Language Support Google Analytics out of the box 15

THEMING // .vuepress/config.js module.exports = { themeConfig: { nav: [ { text: 'Home', link: '/' }, { text: 'Guide', link: '/guide/' }, { text: 'External', link: 'https://google.com' }, ] } } Custom Algolia Search Navbar configuration // .vuepress/config.js module.exports = { themeConfig: { algolia: { apiKey: '1eb37de6308abdccf9b760ddacb418b4', indexName: 'qwerty' } } } 16

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

DEMO TIME 18

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

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

21

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

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

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

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