GET new skills! Your own website suddenly doesn’t smell good

Songo’s own sites fall into two categories:

One is www.javaboy.org, which is based on GitHub Pages and uses a technology stack called Hexo + Icarus, to which I sync all posts from the public account.

There is another kind of e-book website, this is more:

• maven.javaboy.org
• spring.javaboy.org
• springmvc.javaboy.org
• mybatis.javaboy.org
• springboot.javaboy.org
• vhr.javaboy.org

This is Jekyll + Jekyll-text-theme, which is a kind of e-book website technology stack. It can be made into an online ebook without spending a penny.

Recently I saw others using VuePress to build a blog website, and suddenly I felt that my website is not good anymore.

Then give me another one!

1. Vuepress is introduced

Similar to hexo, vuePress can also be used to generate static web pages. If you’ve done Vue development, or if you’ve seen Zongo’s micro people (github.com/lenve/vhr), you’ll see that VuePress is very approachable and very easy to customize, unlike Hexo customization.

According to the official website of Vuepress, vuepress consists of two parts: The first part is a minimalist static web site generator that contains a VUe-driven theme system and plug-in API, and the other part is a default theme optimized for writing technical documentation, which was originally created to support the documentation needs of Vue and its subprojects.

Every page generated by VuePress comes with pre-rendered HTML, which is good for loading performance and search engine optimization (SEO). Meanwhile, once the page is loaded, Vue takes over the static content and turns it into a full single-page application (SPA), while other pages load on demand only as the user navigates through them. So you don’t have to worry about your website being unable to be crawled by search engines.

One of the core goals of both Hexo and VuePress is to get us to focus on content rather than website building. In that sense, both work well, but vuePress is easier to use and customize for those with vUE development experience.

Compared to other e-book sites, Vue has obvious advantages, such as:

Nuxt

Nuxt can theoretically do what VuePress can do, but Nuxt was built to build applications, while VuePress focuses on content-centric static websites and offers out-of-the-box features tailored for technical documentation.

Docsify / Docute

Both projects are also Vue based, however they are completely run-time driven and thus not SEO friendly. If you don’t care about SEO and don’t want to install a lot of dependencies, they’re still a great choice!

Hexo

Hexo has always driven Vue documentation — in fact, we probably have a long way to go before we migrate our main site from Hexo to VuePress. Hexo’s biggest problem was that its theme system was too static and relied too much on pure strings, and we wanted to make good use of Vue to handle our layout and interactions, while Hexo’s Markdown rendering configuration was not the most flexible.

GitBook

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

2. The structures,

2.1 Project Creation

The setup was easy.

First, make sure nodeJS is installed locally on your computer (no extra preparation is necessary if the local VUE development environment is complete, but if you are not familiar with VUE, check out Songo’s micro-human video tutorial).

With the environment ready, start creating the project.

Start by preparing a new directory:

mkdir java-guide
cd java-guide
Copy the code

Next, initialize the directory:

npm init
Copy the code

During the initialization process, there will be some questions. If you need to configure it, you can configure it. If you don’t need to configure it, you can press Enter.

Next install the Vuepress dependency:

npm install -D vuepress
Copy the code

Now that we’re ready, we can create our first article.

Create the docs directory (whatever name you want) in the java-Guide directory you created initially, and then create a readme.md file in that directory, which will be the front page of our website. Write a random line in the readme.md file as test content.

Next modify package.json and add two lines of script:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs"
},
Copy the code

Docs :dev is run in the development environment, docs:build is compiled for the project.

With everything ready, you can start the project with the following command:

npm run docs:dev
Copy the code

After the project is successfully started, enter http://localhost:8080/ in the browser address bar to view the startup effect. Of course, the current effect is relatively simple, just a Hello Javaboy!

2.2 Home Page Configuration

Now that the page is too simple, we can configure the front page of the project by opening the docs/ readme. md file and adding the following:

- home: true heroImage: https://open.weixin.qq.com/qr/code?username=a_javaboy heroText: jiangnan some rain tagline: ActionText: Start learning → actionLink: / Springboot/features:- Do not do the Internet porter, Songko pure hand knock, pure original tutorial.- Tutorial collection, bid farewell to fragmented learning, Java learning step in place!- The article has supporting cases, part of the series has supporting video, scan code to pay attention to the wechat public number [jiangnan a little rain], timely access to the document update notice! Footer: Pay attention to wechat public account [a little rain in Jiangnan], reply 888, get the actual combat data of Spring Boot+Vue project! ---Copy the code

After modification, the project does not need to be restarted. Just like vUE, it will automatically update hot, and the browser will automatically refresh. At this time, the home page display effect is as follows:

2.3 Navigation Page Configuration

To configure the navigation page, create the docs/.vuepress/config.js configuration file. The content of the file is as follows:

module.exports = {
    title: 'A little Rain in the South'.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'}};Copy the code

In the head area, the logo is the logo of the browser navigation bar.

After the configuration is complete, the following information is displayed:

As you can see, it’s got a navigation bar.

Link is the address of the link in the navigation bar. You can replace link with an items, items is an array, items will be displayed in 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'}}]].Copy the code

2.4 Sidebar configuration

The configuration of the sidebar is really the configuration of the left menu.

With VuePress, we might write articles that categorize files, such as the following:

The Java directory holds Java articles and the Python directory holds Python articles. Let’s drop a few articles into the catalogue.

The directory structure is as follows:

Java - guide ├ ─ package - lock. Json ├ ─ package. The json ├ ─ docs | ├ ─ README. Md | ├ ─ python | | ├ ─ README. Md | | ├ ─ python - 1. The md | | └ python - 2. Md | ├ ─ Java | | ├ ─ README. Md | | ├ ─ Java - 1. The md | | └ Java - 2. Md | ├ ─. Vuepress | | └ config. JsCopy the code

In python and Java directories, the corresponding article access paths are:

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

Note that the title of each article should be displayed at the top of the article (there are other ways to configure the title, which Songo recommends). In the java-1.md example, the top of the article reads as follows:

---
title: Java01
---

Copy the code

Also, there is a readme. md file in both the Java and Python directories that can be accessed from

• http://localhost:8080/java/

Or:

• http://localhost:8080/python/

So we first file directory access path clear.

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']]},Copy the code

The configuration is as follows:

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

Deployment of 3.

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 is easy to compile it first by executing the following command:

npm run docs:build
Copy the code

After successful compilation, the following directory structure is generated:

Java - guide ├ ─ docs | ├ ─. Vuepress | | ├ ─ dist | | | ├ ─ 404 HTML | | | ├ ─ index. The HTML | | | ├ ─ python | | | | ├ ─ index. The HTML | | | | ├ ─ python - 1. HTML | | | | └ python - 2. HTML | | | ├ ─ Java | | | | ├ ─ index. The HTML | | | | ├ ─ Java - 1. HTML | | | | └ Java - 2. HTML | | | ├ ─ assets | | | | ├ ─ js | | | | | ├ ─ 10. Fd63f6ac. Js | | | | | ├ ─ 11.919333 a2. Js | | | | | ├ ─ 2.5618 c3b9. Js | | | | | ├ ─ 3.01385 c65. Js | | | | | ├ ─ 4.7 d5f245c. Js | | | | | ├ ─ 5.5 surprised e19538 jeter s | | | | | ├ ─ 6.6523 d9fe. Js | | | | | ├ ─ 7.6182 cc1a. Js | | | | | ├ ─ 8.5 aa56f7e. Js | | | | | ├ ─ 9. C492a2c2. Js | | | | | └ app. 803870 cb. Js | | | | ├ ─ img | | | | | └ search. 83621669. SVG | | | | ├ ─ CSS | | | | | └ 0. Styles. 3 f949b7f. CSSCopy the code

The dist files are the static files that we’re going to dump on the server, directly into the nginx directory.

3.2 GitHub Pages

Of course, GitHub Pages can also be used to deploy, save!

GitHub Pages: GitHub Pages: GitHub Pages: GitHub Pages

• Without spending a dime, Songo teaches you how to start your own blog
• Organize your scattered knowledge into a system and make it into an online ebook without spending a penny

Once the GitHub repository is ready, create a script file deploy.sh in the project root directory with the following contents:

#! /usr/bin/env sh
Make sure the script throws any errors it encounters
set -e

Generate static files
npm run docs:build

Go to the generated folder
cd docs/.vuepress/dist

# if publish to custom domain name
echo 'docs.javaboy.org' > CNAME

git init
git add -A
git commit -m 'deploy'

# if posted to https://
      
       .github
      
git push -f [email protected]:onedocs/onedocs.github.io.git master

cd -
Copy the code

This has two places need to modify according to their own actual situation, one is if you need to customize the domain name, change to their own domain name; The other is a GitHub account, changed to his own.

Finally, execute the script. When the execution is complete, the project goes live.

For Windows, you can execute the commands in this script by yourself. They are all relatively simple commands, so I will not repeat them.

4. Summary

Well, today I mainly introduce vuePress to you. Your personal blog has already introduced three technology stacks to you:

• hexo+icarus
• Jekyll + jekyll-TeXt-theme
• vuepress

Interested partners might as well try oh ~

If you feel that you have a harvest, remember to point to the songko under the encouragement of watching ~

Reference:

1. vuepress.vuejs.org/zh/guide