O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

VuePress Quick Start Guide

Book Description

A fast paced that will teach you to build Static JavaScript Sites and Amazing Web Apps Using VuePress

Key Features

  • Build quick, SEO-friendly static websites with VuePress and Vue.js
  • Develop and maintain your sites long term
  • Use the power of Vue + webpack, and develop custom themes with Vue

Book Description

What are static site generators, why do you need them, and how are they better than general blogging or writing or content tools? This book answers all those questions as you learn how to build sites with VuePress.

This book teaches you how to build static sites in VuePress in no time. All the site content is rendered as HTML by VuePress and is then executed as a single-page web app. This means everything works fast and loads quickly.

You will start by installing and setting up the VuePress static site generator. You will learn about the powerful JavaScript framework Vue.js, which underpins VuePress, looking at its uses and advantages. You will then dig deep into the specifics of VuePress, covering content creation in Markdown, customization, internationalization, and deployment. You will also learn about security methods, configuration files for new installations, and many other techniques to have you building your own sites safely and quickly.

By the end of the book, you will have built your own static website by leveraging the power of Vue.js and VuePress.

What you will learn

  • Put together a simple site in Markdown
  • Use VuePress to generate a super-fast static site
  • Customize the appearance of your VuePress site using custom themes
  • Work with internationalization and localize your site in multiple languages
  • Set up a custom home page with a call to action button as well as other pages and a navigation menu
  • Deploy your JavaScript site to services such as Heroku, and Netlify

Who this book is for

If you want to create static sites easily, this book is for you. No knowledge of VuePress is required, but some experience with JavaScript will be helpful.

Downloading the example code for this book You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Title Page
  2. Copyright and Credits
    1. VuePress Quick Start Guide
  3. Dedication
  4. Packt Upsell
    1. Why subscribe?
    2. Packt.com
  5. Contributors
    1. About the author
    2. About the reviewers
    3. Packt is searching for authors like you
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Download the color images
      3. Conventions used
    4. Get in touch
      1. Reviews
  7. Introducing Static Site Generators and VuePress
    1. What exactly is Vue.js?
    2. What are static site generators?
      1. Comparing static site generators to dynamic ones – differences in methodology
        1. Advantages of static site generators
        2. Disadvantages of static site generators
        3. Some major static site generators
          1. Jekyll
          2. Hugo
          3. Gatsby
          4. Hexo
          5. Nuxt.js
    3. Why should you use VuePress?
      1. A primer to getting started with VuePress
    4. Summary
  8. Getting Started with VuePress
    1. Getting started with Vue.js and VuePress
      1. What is Vue.js?
      2. Some basic Vue.js terminology
        1. Why not some other JS framework?
          1. Angular/AngularJS
          2. React
          3. Everything else
        2. How is Vue.js related to VuePress?
    2. Understanding what makes VuePress special
      1. How does VuePress work?
      2. What can VuePress do?
        1. What about the alternatives?
    3. Getting started with VuePress
      1. Installation
        1. Installing VuePress globally
        2. Installing VuePress within an existing project
      2. Understanding VuePress configuration
        1. Other configurations
    4. Summary
  9. VuePress Development – Preliminary Steps
    1. VuePress development – getting started
      1. VuePress configuration values
        1. Basic config values for VuePress
          1. Title
          2. Description
          3. Head
          4. ga
          5. Locales
          6. shouldPrefetch
          7. serviceWorker
          8. dest
          9. port
          10. host
        2. Browser compatibility-related config values
          1. evergreen
        3. Build pipeline-related config values
          1. postcss
          2. scss
          3. stylus
          4. less
          5. sass
          6. chainWebpack
          7. configureWebpack
    2. What is asset handling?
      1. URLs in VuePress
        1. Handling public files in VuePress
        2. What about relative URLs?
    3. Summary
  10. Creating a Site in VuePress
    1. Building a site in VuePress
      1. What will we be building?
    2. Creating a VuePress site
      1. The README.md file
        1. Starting the dev engine
      2. Building the home page
        1. Adding metadata
      3. Adding other content pages
      4. Adding the navigation menu
    3. Final build
    4. Summary
  11. Using Markdown in VuePress
    1. Learning Markdown for usage in VuePress
      1. What is Markdown?
        1. An example
        2. The markdown-it parser
      2. Markdown config reference
        1. markdown.slugify
        2. markdown.externalLinks
        3. markdown.config
        4. markdown.toc
        5. markdown.anchor
        6. markdown.lineNumbers
      3. Markdown extensions in VuePress
        1. Header anchors
        2. Links
          1. External links
          2. Internal links
        3. Emoji
        4. Adding tables
        5. Front matter
        6. Custom formatting options
          1. Highlighting in code
          2. Customized containers
        7. Importing code snippets
    2. Summary
  12. Theme Development in VuePress
    1. Theme development in VuePress
      1. Working with themes in VuePress
        1. What and how?
        2. Config entities for theming
          1. theme
          2. themeConfig
    2. Default theme config in VuePress
      1. Home page
        1. Custom layouts for pages
      2. Nav bar
        1. Nav bar links
      3. Search bar
        1. Native search box
        2. Using Algolia Search
        3. How to disable the navbar?
        4. Previous and next links
      4. The sidebar
        1. Modifying header links in the sidebar
          1. Displaying the header links of every page
          2. Nested header links
          3. Active header links
        2. Organizing the sidebar
        3. Using more than one sidebar
        4. Adding sidebars to single pages
          1. How to disable the sidebar?
      5. For GitHub users
        1. Syncing to a GitHub repository
        2. How to hide the Edit link on some pages?
        3. Timestamps from GitHub
    3. CSS in VuePress theme development
      1. Custom classes for pages
      2. CSS override file structure
        1. Backwards compatibility
      3. Ejecting the theme
    4. Custom theme development in VuePress
      1. Customizing the default theme
        1. Working with metadata
      2. Other possible enhancements
        1. Application-level enhancements
    5. Summary
  13. Doing More with VuePress!
    1. VuePress: internationalization and doing more with it
      1. What is internationalization?
      2. Internationalization in VuePress
        1. i18n config in VuePress
          1. i18n config for the default theme
          2. i18n config at the site level
    2. Analyzing VuePress
      1. What's next for VuePress?
        1. Working with VuePress in the long run
    3. Summary
  14. Deploying VuePress to the Web
    1. Deploying VuePress – an introduction
      1. Prerequisites for VuePress deployment
        1. Can we use shared hosting to run VuePress?
    2. Getting started with VuePress deployment
      1. Deploying VuePress to GitHub Pages
        1. What is GitHub Pages?
        2. Usage
        3. Using custom domains
      2. Deploying VuePress to Google Firebase
        1. What is Google Firebase?
        2. Usage
        3. Using custom domains
      3. Deploying VuePress to Surge
        1. What is Surge?
        2. Usage
        3. Using custom domains
      4. Deploying VuePress to Heroku
        1. What is Heroku?
        2. Usage
        3. Using custom domains
      5. Deploying VuePress to Netlify
        1. What is Netlify?
        2. Usage
        3. Using custom domains
      6. Deploying VuePress to GitLab Pages
        1. What is GitLab Pages?
        2. Usage
        3. Using custom domains
    3. Summary
      1. Links to remote or cloud platforms
      2. Concluding words
  15. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think