Build a personal blog with vuePress

Recently, I have learned vuePress to build a personal blog. I have felt a lot during the whole process. This list is hereby listed for the convenience of communication and progress

Step1 (initialize the project)

At present, vuePress has officially released two versions 0.x and 1.x, and some problems with 1.x have been found during the use. For example, the project cannot hot update the changes in the config.js file, navbar display exception, etc., so I recommend using 0.x.

• This part can be initialized according to the quick Start on the official website. I used THE NPM method

NPM install -g vuepress (global vuepress installation) 2. Mkdir Project name (Create a project folder. NPM init -y (go to the newly created project folder and initialize the project) 4. Create the docs folder at the root of the project folder, create the.vuepress folder in docs, Create the public folder,components folder,override.styl file,style.styl file and config.js file in.vuepress. The initial project structure is as follows: vuepressBlog/ / project folder ├ ─ ─ ─ docs │ ├ ─ ─ ─ ─ the README. Md / / are commonly used to do page │ └ ─ ─ ─ ─ the vuepress / / to hold global configuration, components, such as static resources | ├ ─ ─ the components / / in the directory Vue Component will automatically be registered as a global components │ ├ ─ ─ public / / static resource directory | ├ ─ ─ override. Styl / / used to override the default color constant, or set a new stylus color constant. (defined style constants can be used directly in the vue components) | ├ ─ ─ style.css. Styl / / will be automatically applied global style file, with a higher priority than the default styles (need to override the default styles code written in the file) │ └ ─ ─ config. Js ├ ─ └─ package.json // Setup entry file (config stuff is basically here)Copy the code

At this point, the project initialization is complete, including the initialization of the project structure directory above, which will be further refined in the following steps, but will be configured on demand.

Step2 (project configuration)

• This part of the work we do in the config.js file, don’t ask me why, rules, rules, rules, important things say three times!! I generally try not to use bb for problems that can be presented in code, so I paste the code in the config.js file directly, which can be copied to use.

  module.exports = {
      title: 'Stone\'s blog'.// Blog title
      description: 'My Personal Blog'.// Personal description
      head: [ // The tag injected into the HTML  of the current page
        ['link', {  // Add a custom favicon
          rel: 'icon'.type: 'image/x-icon'.href: './favicon.ico'
        }],
        ['link', { rel: 'apple-touch-icon'.href: './favicon.ico'}].// Adapt to mobile ICO].base: '/'.// This is the configuration associated with deploying to Github
      markdown: {
        lineNumbers: false // The code block displays the line number
      },
      themeConfig: {
        nav: [ // Navigation bar configuration
          {
            text: 'Home'.link: '/' // '/' defaults to the readme.md file in the docs folder
  
          },
          {
            text: 'Blog'.link: '/blog/'
          },
          {
            text: 'Space'.link: '/space/'
          },
          {
            text: 'GitHub'.link: 'https://github.com/HUYIJUNCODING': {}],'/blog/': [{title: 'front end daily', /sidebar/ sidebar name collapsable:true./ / folding
              children: [
                  '/blog/javaScript/one'.// Address of the article
                  '/blog/javaScript/two',]}, {title: 'Frame dependent'.collapsable: true.children: [
                  '/blog/framework/vuepressBlog',]}, {title: 'Tool collection'.collapsable: true.children: [
                  '/blog/tools/one'.'/blog/tools/two',]},],'/space/': [{title: 'Poetry and Far Away'.collapsable: true.children: [
                  '/space/poetryAndDistance/one',]}, {title: -- Passage.collapsable: true.children: [
                  '/space/talk/one',]},]},// Sidebar configuration
        sidebarDepth: 2.// The sidebar shows 2 levels}}Copy the code

Now that you’re halfway through the project, I’d like to highlight a few points about configuration that I’ve had problems implementing.

Href: './favicon. Ico 'href: './favicon.Copy the code

• Add two startup commands to package.json

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

• npm run devProject fly up

  Local startup project: NPM run dev Package project: NPM run buildCopy the code

After that, the project will be basically completed, and then some work will be done in business logic or according to personal preference. In short, once the foundation is completed, there is only coding left (writing blog articles, you need to do it yourself).

Step3 (deployment online)

• We will deploy the project on GitHub, so that friends who admire you can access your blog online.

• There are many ways to do this, but I’ll just use GitHub as an example. (Joy: :joy: :joy: :joy:

Log in to Github to create two new repositories

New repository 1: GithubuserName.github. IO

Here GITHUBUSERNAME is your GitHub name, is your GitHub name, is your GitHub name, very important things to say three times, must be exactly the same, to be more specific, I post a picture.

The Repository name is githubusername.github. IO, in my case huyijuncoding.github

Ok, the first warehouse has been built. There is no need to clone the warehouse to the local or do any operation. All code modifications are carried out in the second warehouse, which is only used to store the codes published online after association, that is, the files in the dist directory

New repository 2: the name of the repository can be arbitrary, for example :blog.github.

This repository holds the local project code, where future changes are made.

• If you are building from scratch, copy the contents of the root directory of the current blog project to repository 2 and create the deploy.sh file in the local root directory of the repository as follows:

  #! /usr/bin/env sh # make sure the script has an error set -e # generate static file NPM run build # go to the generated folder CD docs/.vuepress/dist git init git add -a git Commit -m "deploy" git push - f [email protected]: USERNAME/USERNAME. Making. IO. Git master / / the need to configure your warehouse address, in addition to this code, the other copy and paste to a CD  -Copy the code

• Post my warehouse catalog to illustrate

  

• Modify the deploy.sh file (the code above is already there, but it’s a separate one here to illustrate its importance)

  git push -f [email protected]:USERNAME/USERNAME.github.io.git master
  
  / / the code above, and if you want to deploy on https://USERNAME.github.io, you will need the USERNAME replace your lot name, for example, I replace HUYIJUNCODING,
  / / the git push - f [email protected]: HUYIJUNCODING/HUYIJUNCODING lot. IO. Git master
  Copy the code

Some friend here are confused about how to do a warehouse and warehouse the two correlation, is very good, if you have this doubt, that I am serious tell you at this time, just change the place is the solution to this problem, used to link two warehouse, warehouse is similar to our online server, warehouse for local development.

• Add the publish command to the package.json folder

  "Scripts ": {"dev": "vuepress dev docs", // Run project "build": "vuepress build docs", // package project "deploy": Sh "publish": "vuepress build docs && bash "} "publish": vuepress build docs && bash"Copy the code

A flower show is completed!

Run the NPM run deploy command// Only publish the project, if the code is updated, you need to run the NPM build before doing soPackage publish command: NPM run publish// There is no need to run the NPM run build separately
Copy the code

• Then you can run your own project. Here is my address: huyijuncoding.github

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — a magnificent line — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — –

Thought I was fucked up, didn’t you? How is that possible? No, of course not. Hahaha! Here are some friendly tips and benefits

• The.md file refers to the vue component method a. page override reference. This reference method will cover the entire page (except navbar), so the display content is written in the. Vue component, just like we write vue code.

  

  
   B. Local reference
  
       The reference method will not overwrite the current page, as needed to introduce, partial display, examples pleaseTo document.

• Global default style override, color constant Settings

   override.styl // Used to override the default color constant, or to set a new stylus color constant. (Defined style constants can be used directly in vUE components)
   style.styl // A global style file that is automatically applied and has higher priority than the default style (the default style code that needs to be overridden is written in this file)
  Copy the code

When we need to overwrite some default styles in vuePress, such as navbar,sidebar font colors, background colors, etc., we can overwrite them directly in style.styl file. When you need to define or override color constants, you can set them in override.tyl and use them directly in the.vue component.

• A collection of emojis available in vuePress
  
  
• Markdown syntax resources