preface

As a programmer, no one would be complete without a personal blog. The output of technical articles is an embodiment of our programmer’s ability, and also a very good personal summary.

There are many tools or frameworks for building personal blogs, including Hexo, wordpress, and more. Admittedly, there are some blogging systems on the market that do a good job and have a variety of topics, but there is often a problem: they are heavy.

As a Vue programmer, I would recommend using Vuepress to build a personal blog, because after all, it is produced by Vue, and Vue official is known to be built using Vuepress.

This article will teach you to build a free blog from scratch, zero basic white can also learn oh!

1. What is Vuepress?

Vuepress is officially a minimalist static website generator designed for quick and easy document writing.

It mainly contains the following characteristics:

  • A very simple
  • Good SEO
  • High loading performance
  • You can customize themes
  • You can write vUE components in Markdown

The above points are the main features of Vuepress. For blog site SEO is important, of course, if we write articles nobody see, it’s easy to lose momentum, has good SEO Vuepress, besides, it is for a friend with Vue foundation is very friendly, we custom theme or component is very convenient, some of the blog system on the market while also supports custom theme, But often change to rise more laborious, need to study hard.

Let’s look at the official website of Vuepress: Vuepress

2. Preparation

The blog we set up today doesn’t cost a cent, it’s free! There is also very little to prepare!

Basic Environment:

  • Git is installed on your computer
  • The computer has the Node environment
  • VScode editor (optional)
  • Gitee account

Our preparation is pretty simple, and if you’re a programmer, the above environments and software trust me, you can skip to section 3. If you are small white, so we can build the environment first.

Steps for setting up the environment:

2.1 the node installation

Download the installation package from Node’s official website

Choose the appropriate version of your computer to install, the installation process has been the next step.

2.2 the git installed

Download the installation package from git’s official website

Choose the appropriate version of your computer to install, the installation process has been the next step.

2.3 Gitee account registration

Go to gitee official website to register one account and one account. Later we will deploy the blog site on Gitee: git official website

3. Setup procedure

3.1 Initializing Vuepress

The first step:

Create a folder anywhere on the computer to store our blog system. Here I create a new blog folder, as shown below:

The second step:

Go to the “blog” folder and open the command line tool. If you have git installed, there will be a git menu in the right mouse button menu.

Step 3:

To check whether the node is properly installed, run the following command:

node -v
Copy the code

If the version number is displayed, the installation is successful.

Then in the blog folder with NPM initialization, execute the command:

npm init -v
Copy the code

Step 3:

To install vuePress, run the following command:

npm install -D vuepress
Copy the code

The network installation may take a long time. If the installation fails, re-install it for several times. If the preceding screen is displayed, the installation is successful.

3.2 Initializing a Directory

The first step:

Create a new docs directory under the blog folder, then create a readme. md file under the directory as the front page of our blog, and a doc directory for our articles and related configuration files.

Then modify the readme. md content. For details about the configuration items, see Configuration Items on the official website

ActionText: View resources → actionLink: / Software Resources/Software resources Features: - title: Home: true heroText: a place to share resources Web disk resource Details: All web disk resources are from the Internet. This website does not produce any web disk resources. You need to determine whether the web disk resources fail. - Title: Black technology software details: mainly share some practical tools, film and television, music and other kinds of software, all provided by the Internet giants. Share all kinds of tutorials, including programming, all kinds of certificate examination resources and so on, this website all tutorial resources are from the Internet, if involved in infringement immediately deleted! Footer: science and technology play fun | information sharing - the masterCopy the code

The second step:

Modify the package.json file, which is used to package and run our project, and the modified code is as follows:

{" name ":" blog ", "version" : "1.0.0", "description" : ""," main ":" index. Js ", "scripts" : {" dev ": "vuepress dev docs", "build": "vuepress build docs" }, "keywords": [], "author": "", "license": "ISC", "devDependencies" : {" vuepress ":" ^ 1.9.7 "}}Copy the code

Step 3:

Run the following command to run the blog:

npm run dev
Copy the code

If the following page is displayed, the system runs successfully:

Click the link to visit: http://localhost:8080/

We’ve built one of our simplest blogs.

3.3 Writing articles

Take a closer look at the actionLink field in the readme. md file, which indicates which page to go to when we click the button on the front page.

Create a new software Resources folder under the Docs directory, then create a new software Resources.md file within the folder, and write the following contents:

Click the home button, the jump access effect is as follows:

3.4 Adding a sidebar

Although we have added the sidebar, we need to modify some configuration files.

Create a.vuepress folder under the docs folder, and then create config.js under this folder to configure the relevant configuration of our blog, and write the code as follows:

// docs/.vuepress/config.js module.exports = {title: "exports ", description:" exports ", markdown: // docs/.vuepress/config.js module.exports = {title: "exports ", description:" exports ", markdown: {lineNumbers: true,}, themeConfig: {sidebar: [{title: 'software resources ', children: ['/ software resources/software resources'], initialOpenGroupIndex: 1 // Optional, default is 0}]},};Copy the code

The sidebar field in the themeConfig attribute is used to configure our sidebar. For details, please refer to the official website.

The effect is as follows:

Although there is a sidebar, it seems that the title is not right, this is because the sidebar takes the title of the article, since we did not write a title for the article, so we changed the software resources slightly.

The effect is as follows:

4. Change the theme

The above steps have let us build a simple blog system, and Vue official website long almost, may be some partners do not like, so we can take online to find a good theme to change.

For example, we use a theme like the one below:

Theme official website: theme

Run the following command in the blog directory:

npm install vuepress-theme-reco --save-dev
Copy the code

Then configure the theme in the.vuepress/config.js file as follows:

Module. exports = {title: "exports ", description:" Exports ", theme: 'reco', Markdown: {lineNumbers: {title: "exports ", description:" Exports ", theme: 'reco', Markdown: {lineNumbers: // sidebar: [// {// title: 'software resource ', // children: ['/ software resource/software resource'], // initialOpenGroupIndex: 1 // Optional, the default value is 0 //} //] //},};Copy the code

This time our blog will look a little better, of course, if you want to be more personalized, it is recommended to go to the theme of the official website carefully check the various configuration rules.

5. Deploy to Gitee

Once we’ve got our blog pretty much done locally, it’s time to deploy it and make it accessible to everyone, and here we’re using Gitee to do that.

5.1 Creating a Warehouse

We will create a new warehouse on gitee to store our blog system.

There are two things to note here:

  • It is recommended that the repository name be the same as the personal space address, so that it can be accessed through the personal space address.gizee.io.
  • The warehouse is private or co-owned according to individual circumstances.

Personal space address setting:

After the warehouse is successfully created, the following picture is shown:

5.2 Push to Gitee

After the warehouse is built, we need to push our local blog system to the warehouse.

The first step:

Go to the blog directory, open the gitbash command line tool, package the blog, and run the following command:

npm run build
Copy the code

The second step:

We can follow the steps given by the Gitee repository to push the code to the repository.

Execute the following command line by line:

Git init git add. Git commit -m "initialization" git remote add origin https://gitee.com/sharemore52/myblog-demo.git git push -u origin "master"Copy the code

After executing the above command, our code is pushed to the repository:

5.3 the deployment

From the Warehouse page click on the Services menu and select the GITPage option:

Select the deployment branch and deployment directory, and click Start:

  • Deploy branch, do not change, default master
  • For the deployment directory, select the docs/.vuepress/dist folder that we just generated by executing the package command.

After deployment, we will appear a blog address, visit try:

5.4 Modifying a Configuration File

We can see that there seems to be a problem with the page we visited above. Don’t worry, it is just a problem related to the configuration of our project. We add a code in the config.js file:

base: "./"
Copy the code

Then repackage, deploy, and execute the following commands in turn:

NPM run build git add. Git commit -mCopy the code

After the code in the repository is updated, we re-enter the gitPage directory and restart, which is now accessible:

6. Frequently asked Questions

6.1 Can a Warehouse be private?

Can the

6.2 Why is there a Path in the Blog Address?

Like this: https://sharemore52.gitee.io/myblog-demo/Copy the code

Warehouse name and personal space address can be the same

6.3 How to make automatic generation of sidebar?

You can use the plug-in: vuepress-plugin-autobar

Official website: official website

conclusion

Here we basically set up a personal blog, can enjoy the writing of the article, summary is roughly divided into the following steps:

  1. Install vuepress
  2. Create a catalog according to vuepress official website
  3. Create the Gitee repository
  4. Push code to the Gitee repository
  5. Deploy using Giteepages

This article only introduces how to build a blog. If you want to enrich your blog, you should go to the official website to see the various configuration rules, including Vuepress and custom theme official website.