preface

A few days ago, I suddenly wanted to set up a personal blog. I thought it was too much trouble to set up my own website. But I don’t know why, I did not do it for a week, either this is wrong is wrong. How to categorize, how to manage the tags are messy, and the documentation is a pain to write. And then I gave up. It didn’t take me long to learn that there was another thing called Vuepress. Although it will be 9102 years now, I haven’t used vUE many times. So I decided to take this project to practice and learn VUE. It turned out to be another pothole, but it turned out to be a long time before the site was created.

1. Vuepress is what

Vuepress is a static blogging system based on VUE. What is a static blog? A static blog is a blog that does not have to deal with the background and only has a presentation function. That means no comments, no likes, no online discussions, etc. Ah, see these to be humbled, have no comment in case someone likes me how to do? But to interact, you need a database and you need a background. These things go on forever. And a lot of money. I thought about it, thought about it, and finally decided not to have a girlfriend. Just a static blog, and I’ll leave my wechat at the end. If you like me, you can add me.

2. Install vuepress

Install VuePress. Yarn is recommended on the official website. The official recommendation proved correct. I used NPM on my Windows and got a lot of errors. Eventually, yarn was used.

What is YARN? I’ve known this for a year, but it’s the first time I’ve used it. You can think of YARN as NPM. It’s just a notch above NPM. They’re just using different commands. The function is the same, also from the NPM library download modules.

Installation steps:

  1. Create a new folder, such as blog
  2. Using an Administrator accountRun the command line tool, enter the newly created blog folder, and executeyarn init -yGenerate package. Json
  3. performyarn global add vuepressInstall vuePress globally and run againyarn add -D vuepressInstall YARN on the local PC
  4. Command line executionmkdir docsCreate a new docs folder under the Blog folder.
  5. Run echo ‘# hello world’ > docs/ readme. md to create a markdown file in the docs folder
  6. performnpx vuepress dev docsPreview the effect.

2.1 Detailed steps:

Step 3 explains that vuepress is installed globally for the convenience of invoking the vuepress command from the command line. There is also no need to install VuePress locally, which is for decoupling. After global VuePress is upgraded to another version, local vuepress of earlier versions can be used to avoid project unavailability due to upgrade. Global installation is only for the command line to use commands, the actual code is still native code.

From steps 1 through 4, the result of the folder directory is as follows:

There are package.json and docs files in the blog folder, but there is also node_modules folder in the blog folder, which I forgot here, so I won’t print it out on the command line.

.
|-blog
  |-docs
    |-README.md
  |-package.json
Copy the code

The vuepress dev. Command output is as follows:

The command line:

Browser:

The browser didn’t display it in the right format, it should have displayed it in title 1 format, and the result was ‘# Hello VuePress! ‘. This is something that happens all the time. Don’t worry. Later we’ll use our markdown tool and edit the readme. md folder under docs.

2.2 modify the package. The json

Add some commands to package.json to simplify our work.

"scripts": {
	"docs:dev": "vuepress dev docs"."docs:build": "vuepress build docs"
}
Copy the code

When we run YARN Docs :dev is equivalent to running vuepress dev docs

When we run YARN Docs: Build, we run vuepress build docs

The complete code of package.json is as follows:

{
  "name": "blog"."version": "1.0.0"."main": "index.js"."scripts": {
		"docs:dev": "vuepress dev docs"."docs:build": "vuepress build docs"
	},
  "license": "MIT"
}

Copy the code

2.3 Preview Effect

Run yarn docs:dev to preview the effect. You can use your MarkDown tool to modify the readme. md content under Docs, and the browser will automatically refresh to show you the latest content.

2.4 packaging

Command line yarn docs:build,vuepress will package our markdown files into HTML files. The package is generated in the.vuepress folder, and the generated HTML file is stored in the.vuepress folder dist folder.

We can create a new config.js file under.vuepress, which can be generated to a different directory by modifying dest. I’m not going to change it.

The generated HTML file can be deployed to any static server, which I uploaded to Github.

At this point, the directory structure is as shown in the figure:

|-blog
  |-docs
  |  |-.vuepress
  |  |  |-dist
  |  |  |  |- 404.html
  |  |  |  |-assets
  |  |  |  |  |-css
  |  |  |  |  |  |- 0.styles.f164d2bb.css
  |  |  |  |  |-img
  |  |  |  |  |  |-search83621669..svg
  |  |  |  |  |-js
  |  |  |  |  |  |- 2.aae77c18.js
  |  |  |  |  |  |3.48b292a8.js
  |  |  |  |  |  |4.6947 e3e9.js
  |  |  |  |  |  |-app. 0ffe2193.js
  |  |  |  |-index.html
  |  |-README.md
  |-package.json
Copy the code

2.5 summarize

The above is the basic usage of Vuepress and I believe that most people can implement it successfully. The next step is the advanced stage.

3. Configure favorite. Icon

This is a very small knowledge point, but it is also very troublesome. Favorite. Icon is favorite.

The steps to configure this are as follows:

1. Make an icon, the size can be 16*16 or 32*32 or 64*64. You can decide your own size. You can make one by PS or download one by Baidu

2. Create a public folder under. Vuepress and put the icon in it.

3. Create the config.js configuration file under. Vuepress. There are a lot of items that can be configured in config.js. You can click here to view the configuration. I will only cover the basics here.

The directory structure is as follows:

|-blog
  |-.gitignore
  |-docs
  |  |-.vuepress
  |  |  |-config.js
  |  |  |-public
  |  |  |  |-favicon.ico
  |  |  |  |-favorite.png
  |  |-README.md
  |-package.json
  
Copy the code

4. Configuration config. Js

module.exports = {
	title:"Front snail Road".description:"Guo Han's Personal Blog".head:[
		['link', {rel:'icon'.href:'/favicon.ico'}}]]Copy the code

/public/favicon.ico /favicon.ico /favicon.ico /favicon.ico /favicon. favicon.ico /favicon. favicon.ico /favicon. favicon.ico

Ok, now go back to the command line and rerun YARN Docs :dev to see the effect (sometimes refresh works, sometimes not).

4. Configure the navigation bar

4.1 What is the goal

I want such a navigation bar, respectively for home page, article, nuggets, GitHub, Zhihu, girlfriend.

  • Click “Home” to return to the front page of your blog
  • Click on “Articles” to bring up the drop-down list with two items “soft Skills” and “WebGL”. These are the two types of blog content I want to share
  • Click “nuggets”, “GitHub”, “Zhihu” to jump to the corresponding home page of my other websites
  • “Girlfriend” is some of my sigh (take keyboard cover face)

4.2 configure config. Js

With these goals in mind we configure config.js. We modify config.js as follows:

The nav under themeConfig is the navigation bar we configured.

module.exports = {
	title:"Front snail Road".description:"Guo Han's Personal Blog".head:[
		['link', {rel:'icon'.href:'/favicon.ico'}]],themeConfig: {
    nav: [{text: 'home'.link: '/' },
        { 
          text: 'articles'.items:[
            { text: 'Soft Skills' , link:'/softskill/'},
            { text: 'webgl' , link:'/webgl/'}]}, {text: 'the nuggets'.link: 'https://juejin.cn/user/8451823770045' },
        { text: 'GitHub'.link: 'https://github.com/ggwork'},
        { text: 'zhihu'.link: 'https://www.zhihu.com/people/yagb/activities'},
        { text: 'Girlfriend'.link: '/girlfriend/'}].}}Copy the code

In the configuration, text is the text displayed on the navigation bar, link is the link, and items is the secondary menu. Items can be nested so that multi-level menus can be displayed.

Before the configuration:

After the configuration:

4.3 Creating a Directory

In addition to external links in the navigation bar, we have configured several links ‘/ SoftSkill /’, ‘/webgl/’ and ‘/girlfriend/’ that don’t exist yet. These links correspond to the corresponding directories on our server. If we don’t have these directories on our server, clicking on these menus will result in a 404 error.

So we’re going to create these new directories

Create the softskil, WebGL, and Girlfriend folders under the.vuepress directory. There must be a readme.md file in each folder or an error will be reported.

The directory structure is as follows:

|-blog
  |-docs
  |  |-.vuepress
  |  |  |-config.js
  |  |  |-public
  |  |  |  |-favicon.ico
  |  |  |  |-favorite.png
  |  |-girlfriend
  |  |  |-readme.md
  |  |-README.md
  |  |-softskill
  |  |  |-readme.md
  |  |-webgl
  |  |  |-readme.md
  |-package.json
Copy the code

Go back to your browser, refresh, click on the navigation bar, and you’ll see that the navigation bar is already accessible. For example, click “girlfriend.” The results are as follows:

Our navigation bar is now configured. For more information about configuration options, click here: Topic Configuration

5. Configure the sidebar

5.1 Requirements

Let’s start configuring the sidebar, using “Soft Skills” under the articles option in the navigation bar as an example. I need to click “soft skills”, the left side sidebar will appear, showing the articles I need to share under my SoftSkill folder, so that users can click the sidebar to view different articles.

5.2 configure config. Js

The config sidebar also needs to be configured with config.js as follows:

Module. exports = {title: 'exports ', description:' exports ', head: [['link', {rel: 'icon', href: '/ favicon. Ico}]], themeConfig: {nav: [{text:' front page 'link:'/'}, {text: 'articles, the items: [{text:' soft skills', link: '/ softskill/'}, {text:' webgl, link: '/ webgl /}]}, {text:' the nuggets', link: "Https://juejin.cn/user/8451823770045"}, {text: 'lot', link: 'https://github.com/ggwork'}, {text: 'zhihu, link: "Https://www.zhihu.com/people/yagb/activities"}, {text: 'girlfriend', link: '/ girlfriend /}], sidebar: {'/softskill / : [", 'Soft Skills - Survival Guide Beyond Code 1 (Careers) ',' Soft Skills - Survival Guide Beyond Code 2 (Self-Marketing) ', 'Soft Skills - Survival Guide Beyond Code 3 (Self-Learning) ',' Soft Skills - Survival Guide Beyond Code 4 (Productivity) ', 'Soft Skills - Out of Code Survival 5 (Finance) ',' Soft Skills - Out of Code Survival 6 (Fitness) ', 'Soft Skills - Out of Code Survival 7 (Spirit) '], '/ webGL /': [']}}}Copy the code

Sidebar is the sidebar and softskill is our softskill. The “under SoftSkill means, click on” Soft skills “to display the readme.md file under it. Everything else is the corresponding Markdown file.

5.3 Creating a MarkDown File

The directory structure is as follows:

. |-blog |-docs | |-.vuepress | | |-config.js | | |-public | | | |-favicon.ico | | | |-favorite.png | |-girlfriend | | | - readme. Md | | - readme. Md | | - softskill | | | - readme. Md | | | - soft skills - code of survival guide 1 (professional). Md | | | - soft skills - code of survival guide 2 (marketing). The md | | | - soft skills - code of survival guide 3 (learning). The md | | | - soft skills - code of survival guide (productivity). 4 md | | | - soft skills - code of survival guide 5 (financial). Md | | | - soft skills - code of survival guide 6 (gym). Md | | | - soft skills - code of survival guide 7 (spirit). Md | | - webgl | | | - readme. MdCopy the code

Refresh your browser. It’s done.

One thing to note here: the text in the sidebar configured in config.js may not be the same as the text displayed in the browser sidebar. The text configured in config is the file name of the corresponding Markdown article. The text displayed in the browser sidebar is the first header 1 text in markdown’s article content

Static resources

When we write markdown, many times we need to introduce static resources, such as images and js. Vuepress provides a corresponding method for importing static resources. For details, please click here, Static Resources.

However, I personally don’t like this, because sometimes my blog often needs to be copied and pasted to other sites. At this time if the use of static resources will be more troublesome, each time to upload typesetting. Here I recommend object storage of Tencent Cloud, why recommend it? Because it’s free, and it has 50 gigabytes of space, enough for me to use for years.

Click here for detailed usage. Tencent Object Storage

Deployment of 7.

For deployment, the official website provides a.sh file. Unfortunately, the.sh file does not run on Windows. Anyway, according to the official website to the tutorial, did not succeed for a long time. At present, according to my baidu results, vuepress does not have any method of automatic deployment. Finally, I honestly upload the dist folder to my Github page manually using Git every time AFTER packing.

For how to create a Github page you can baidu, this is very simple, I won’t share. Let me know if you have a good deployment method.

The recommended deployment method is as follows: Deploy

8. Other advanced usage

Vuepress is simple but powerful. With the above steps we can basically build an ugly but useful website. Vuepress is beautifying and has many advanced uses, such as an awesome extension to the Markdown syntax and the ability to create your own components. I won’t talk about that. I’m happy to have an ugly website. For more detailed usage, click here:

Vuepress document

In addition, I recommend my own website: front snail road

I have uploaded the vuepress demo to Github, you can check it here. Vuepress demo

This tool is my own development, ctree-CLI, welcome to download and use.