A presentation at Concatenate in in Lagos, Nigeria by Egwuenu Gift
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?? 9
Gotchas?? No server 9
Gotchas?? No server No complex functionality 9
#JAMSTACK Javascript API's Markup 10
#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
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
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.
Here’s what was said about this presentation on social media.
for free. You
can too.