Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to build a website with vuepress". In daily operation, I believe many people have doubts about how to build a website with vuepress. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how to build a website with vuepress"! Next, please follow the editor to study!

1.vuepress introduction

Similar to the well-known hexo,vuepress can also be used to generate static web pages. Vuepress is very friendly, and it's very easy to customize, not as strange as hexo customization.

According to the official website of vuepress, VuePress consists of two parts: the first part is a minimalist static website generator, which contains a theme system and plug-in API driven by Vue, and the other is a default theme optimized for writing technical documentation. It was born to support the documentation requirements of Vue and its subprojects.

Every page generated by VuePress comes with a pre-rendered HTML, so it has very good loading performance and search engine optimization (SEO). At the same time, once the page is loaded, Vue will take over the static content and convert it into a complete single-page application (SPA), while other pages will be loaded on demand only when the user browses it. So you don't have to worry that your website can't be crawled by search engines.

Whether it's hexo or vuepress, a core goal is to focus on content rather than website construction. From this point of view, both are good, but for partners with vue development experience, vuepress is easier to use and customize.

Vue obviously has more advantages than other e-book sites, such as:

Nuxt

Nuxt is theoretically capable of what VuePress can do, but Nuxt is designed to build applications, while VuePress focuses on content-centric static sites, while providing some out-of-the-box features tailored for technical documentation.

Docsify / Docute

Both projects are also based on Vue, but they are fully run-time driven and therefore not SEO-friendly. If you don't care about SEO and don't want to install a lot of dependencies, they're still a very good choice!

Hexo

Hexo has been driving Vue documentation-in fact, we may have a long way to go before we move our master site from Hexo to VuePress. Hexo's biggest problem is that his theme system is too static and over-reliant on pure strings, and we really want to be able to make good use of Vue to handle our layout and interaction, at the same time, Hexo's Markdown rendering configuration is not the most flexible.

GitBook

Our subproject documentation uses GitBook all the time. The biggest problem with GitBook is that when there are many files, the reload time after each edit is unbearably long. Its default theme navigation structure is also more restrictive, and the theme system is not Vue-driven. The team behind GitBook is also now more focused on making it a commercial product than an open source tool.

two。 Build 2.1 Project creation

The concrete construction is actually very easy.

First of all, make sure that nodejs is installed locally on your computer (if the local vue development environment is complete, you don't need to prepare it. If you are not familiar with vue, you might as well take a look at Song GE's micro-personnel video tutorial).

Once the environment is ready, start creating the project.

First prepare a new directory:

Mkdir java-guide

Cd java-guide

Next, initialize the directory:

Npm init

During the initialization process, there will be some inquiries. If you need configuration, you can configure it. If you do not need configuration, enter directly. Finally, you can choose yes.

Next, install the vuepress dependency:

Npm install-D vuepress

When we are ready, we can create the first article.

Create the docs directory under the java-guide directory created at the beginning (the directory name is arbitrary), and then create a README.md file in the directory, which will be the home page of our website, and write a random line in README.md as the test content.

Next, modify the package.json to add two lines of script:

"scripts": {

"test": "echo\" Error: no test specified\ "& exit 1"

"docs:dev": "vuepress dev docs"

"docs:build": "vuepress build docs"

}

Docs:dev runs in the development environment, while docs:build compiles the project.

Once all the work is ready, you can start the project with the following command:

Npm run docs:dev

After the project starts successfully, enter http://localhost:8080/ in the browser address bar to see the startup effect. Of course, the effect is relatively simple now, just one hello javaboy!

2.2 Home configuration

Now the page is too simple. We can configure the home page of the project, open the docs/README.md file, and add the following:

-

Home: true

HeroImage: https://open.weixin.qq.com/qr/code?username=a_javaboy

HeroText: a little rain in Jiangnan

Tagline: Java training manual

ActionText: start learning →

ActionLink: / springboot/

Features:

-title: pure original

Details: do not do the Internet porter, brother Song pure hand knock, pure original tutorial.

-title: in series

Details: a series of tutorial collections, bid farewell to fragmented learning, Java learning in one step!

-title: there is a case

Details: all articles have supporting cases, some series have supporting videos, scan the code to follow the official account of Wechat [a little rain in the south of the Yangtze River], and get the document update notice in time!

Footer: follow the official account of Wechat [a little rain in the south of the Yangtze River], reply to 888, get the actual combat materials of the Spring Boot+Vue project!

-

After the modification is completed, the project does not need to be restarted. Like vue, the project will be automatically hot updated and the browser will automatically refresh. At this time, the home page will be displayed as follows:

2.3 Navigation Page configuration

The configuration of the navigation page requires a new docs/.vuepress/config.js configuration file, which contains the following contents:

Module.exports = {

Title: a little rain in the south of the Yangtze River

Head: [

['link', {rel:' icon', href: 'https://open.weixin.qq.com/qr/code?username=a_javaboy'}]

]

ThemeConfig: {

Logo: 'https://open.weixin.qq.com/qr/code?username=a_javaboy',

Nav: [

{text: 'home', link:'/'}

{text: 'international station', link: 'http://www.javaboy.org'},

{text: 'domestic station', link: 'http://www.itboyhub.com'}

]

Sidebar: 'auto'

}

}

What is configured in head is the corner of the browser, and logo is the logo of the browser navigation bar.

After the configuration is completed, the display effect is as follows:

As you can see, there is a navigation bar on it.

Configure the navigation bar in themeConfig.nav. Link is the address of the navigation bar link. You can replace link with an items, items is an array, and items is displayed in the form of a drop-down box, for example:

Nav: [

{text: 'home', link:'/'}

{text: 'international station', link: 'http://www.javaboy.org'},

{text: 'domestic station', link: 'http://www.itboyhub.com'},

{text: 'other', items: [

{text: 'international station', link: 'http://www.javaboy.org'},

{text: 'domestic station', link: 'http://www.itboyhub.com'}

]}

]

2.4 sidebar configuration

The configuration of the sidebar is actually the configuration of the menu on the left.

Using vuepress, we may classify files when we write articles, such as the following:

Java directory put Java articles, python directory put python articles. We casually put a few articles into the catalogue.

The directory structure is as follows:

Java-guide

├─ package-lock.json

├─ package.json

├─ docs

| | ├─ README.md |

| | ├─ python |

| | ├─ README.md |

| | ├─ python-1.md |

| | └ python-2.md |

| | ├─ java |

| | ├─ README.md |

| | ├─ java-1.md |

| | └ java-2.md |

| | ├─ .vuepress |

| | └ config.js |

In the python and java directories, the access paths to the corresponding articles are:

Http://localhost:8080/java/java-1http://localhost:8080/java/java-2http://localhost:8080/python/python-1http://localhost:8080/python/python-2

Note that the title of each article needs to be marked at the top (of course, there are other ways to configure the title of the article, which Song GE recommends). Take java-1.md as an example, the top of the article is as follows:

-

Title: Java01

-

At the same time, there is a README.md file in both the java and python directories, and the access path to this file is

Http://localhost:8080/java/

Or:

Http://localhost:8080/python/

In this way, we first figure out the access path of the file directory.

Next, we configure the sidebar navigation in docs/.vuepress/config.js as follows:

Sidebar: [

{

Title: 'Java'

Path:'/ java/'

Collapsable: false

SidebarDepth: 2

Children: [

'/ java/java-1'

'/ java/java-2'

]

}

{

Title: 'Python'

Path:'/ python/'

Collapsable: false

SidebarDepth: 2

Children: [

'/ python/python-1'

'/ python/python-2'

]

}

]

After the configuration is completed, the effect is as follows:

Of course, there are many specific configuration methods, Songge here combined with their own way of use to introduce one, other configuration friends can refer to the official website.

3. Deploy 3.1 Universal

Like hexo, vuepress is eventually compiled into a static file and thrown to the server, so if you are your own server, it's easy to first execute the following command to compile:

Npm run docs:build

After successful compilation, the following directory structure is generated:

Java-guide

├─ docs

| | ├─ .vuepress |

| | ├─ dist |

| ├─ 404.html |

| ├─ index.html |

| ├─ python |

| ├─ index.html |

| ├─ python-1.html |

| └ python-2.html |

| ├─ java |

| ├─ index.html |

| ├─ java-1.html |

| └ java-2.html |

| ├─ assets |

| ├─ js |

| ├─ 10.fd63f6ac.js |

| ├─ 11.919333a2.js |

| ├─ 2.5618c3b9.js |

| ├─ 3.01385c65.js |

| ├─ 4.7d5f245c.js |

| ├─ 5.5e19538d.js |

| ├─ 6.6523d9fe.js |

| ├─ 7.6182cc1a.js |

| ├─ 8.5aa56f7e.js |

| ├─ 9.c492a2c2.js |

| └ app.803870cb.js |

| ├─ img |

| └ search.83621669.svg |

| ├─ css |

| └ 0.styles.3f949b7f.css |

The files in the dist directory are the static files that we want to throw on the server, and you can just throw them into the directory corresponding to nginx.

3.2 GitHub Pages

Of course, you can also use GitHub Pages deployment to save time!

I won't introduce GitHub Pages too much. If you don't know anything about it, please refer to these two articles:

Without spending a penny, Brother Song teaches you to go online on your personal blog without spending a penny, organize your scattered knowledge into a system and make an online e-book.

After preparing the GitHub repository, create a script file called deploy.sh under the root of the project, as follows:

#! / usr/bin/env sh

# make sure the script throws the error encountered

Set-e

# generate static files

Npm run docs:build

# enter the generated folder

Cd docs/.vuepress/dist

# if publishing to a custom domain name

Echo 'docs.javaboy.org' > CNAME

Git init

Git add-A

Git commit-m 'deploy'

# if you publish to https://.github.io

Git push-f git@github.com:onedocs/onedocs.github.io.git master

Cd-

There are two places that need to be modified according to your actual situation, one is to change your custom domain name to your own domain name, and the other is your GitHub account to change it to your own domain name.

Finally, execute the script. After the implementation is completed, the project will be online.

If it is a Windows system, follow the commands in this script and execute them on your own. These are relatively simple commands, so I won't repeat them.

At this point, the study on "how to build a website with vuepress" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.