How to generate a static website using VuePress

This time I will show you how to use VuePress to generate a static website, and what are the precautions for using VuePress to generate a static website. The following is a practical case, let's take a look.

What is VuePress

VuePress consists of two parts: a lightweight static website

generator based on Vue, and a tool for writing technical documentation And optimized default theme. It was created to meet the needs of Vue's own subproject documentation.

VuePress provides preloaded HTML for every page generated by it, which not only has excellent loading speed, but is also very friendly to SEO. Once the page is loaded, Vue takes over all static content, turning it into a complete SPA application. Other pages will also be loaded on demand when the user uses navigation to enter.

How VuePress works

A VuePress application is actually based on Vue, VueRouter and webpack. If you have used vue before, then when you use VuePress When developing or customizing your own theme, you will find that the experience is almost the same ~ you can even use Vue DevTools to debug your customized theme!

During the build process, VuePress will render the relevant HTML by creating a server-side rendered version and accessing each route. This approach is inspired by Nuxt's nuxt generate command, and other projects such as Gatsby.

Each markdown file is compiled into HTML and then processed as a template for a Vue component. This way you can use Vue directly in markdown files, which is very useful when you need to embed dynamic content.

VuePress features

• The built-in markdown extension is specially optimized for technical documents

• Can be used in markdown The customizable theme of vue

• vue

  driver

• # is directly used in the file to support PWA - Progressive Web App (progressive style web application)

• Integrate Google Analytics

• A default VuePress includes:

1. Responsive layout

2. Optional home page

3. A simple header

   SearchComponent

4. Customizable navigation bar and sidebar

##Auto-generated GitHub link and page editing link
VuePress Enjoy the Vue webpack development environment, use Vue components in markdown, and develop custom themes through Vue. VuePress provides preloaded html for every page generated by it, which not only has excellent loading speed, but is also very friendly to SEO. Once the page is loaded, Vue takes over all static content, turning it into a complete SPA application. Other pages will also be loaded on demand when the user uses navigation to enter.

# install
npm install -g vuepress
# create a markdown file
echo '# Hello VuePress' > README.md
# start writing
vuepress dev
# build to static files
vuepress build

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How EL gets the context parameter value (with code)

JS makes the left and right lists mutually Mobile effect

Detailed explanation of the use of Vue custom dynamic components

The above is the detailed content of How to generate a static website using VuePress. For more information, please follow other related articles on the PHP Chinese website!