This article takes you hand in hand to build a small project of your own personal home page attention! Here is just starting, the skeleton built, the specific content will be added to the inside according to their own needs ~

This is the project address. Welcome star

Gitee.com/ykang2020/y…

Github.com/yk2012/yk_h…

Yk2012.github. IO /

Are in the official documents to learn ~

YK bacteria record the steps to share with everyone, to avoid repeating some pits ~

The official documentationvuepress.vuejs.org/zh/

1. Initialize the project

  1. Create a new folder and the project begins

  2. Initialize the package manager

npm init -yes
Copy the code
  1. Install VueRress local dependencies
cnpm install -D vuepress
Copy the code
  1. Create the file docs/ readme.md

  1. Write content in readme.md
# Hello YKThis is the personal homepage of YK bacteria ~ welcome to visitCopy the code
  1. Modify scripts in package.json
"scripts": {
  "docs:dev": "vuepress dev docs"."docs:build": "vuepress build docs"
}
Copy the code
  1. Start the local server
npm run docs:dev
Copy the code
  1. View the web page

2. Set up the overall structure of the page

Vue official documentation should be built with this ~

1. Install a blog theme

The first page we get is a document page, and we can install a blog theme to make our page a blog page

cnpm install @vuepress/theme-blog -D
Copy the code

2. Directory structure

I can follow the official tutorial, because I want to create a home page here, so I made some changes to the directory structure

3. Configure the project

The official documentation for every detail is very detailed, so I directly present the Settings file, you can refer to the complete structure

Since I wanted to keep the home page, I didn’t set it exactly as documented

.vuepress/config.js

module.exports = {
  title: "Hello YK".dest: "dist".description: "YK HomePage".theme: "@vuepress/blog".themeConfig: {
    nav: [{text: "Home page".link: "/" },
      { text: "Blog".link: "/blog/" },
      { text: "Essays".link: "/writing/" },
      { text: "Label".link: "/tag/" },
      { text: "Baidu".link: "https://baidu.com" },
      { text: "Clock".link: "http://ykang2020.gitee.io/clock/"},].directories: [{id: "blog".dirname: "_blogs".path: "/blog/".title: "My Blog"}, {id: "writing".dirname: "_writing".path: "/writing/".title: "My Essays"],},siderbar: "auto".footer: {
      contact: [{ type: "github".link: "https://github.com/yk2012"}].copyright: [{text: "YK bacteria".link: "https://gitee.com/ykang2020" },
        { text: "YK | Copyright © 2021"},],},},},};Copy the code

4. Edit blog posts

Here’s an example

-- Title: My first article Data: 2021-04-22 Author: YK bacteria location: HeFei Tags:  - JavaScript
  - DOM
Summary: This is the summary of the article

# This is the first article
Copy the code

So this is what it looks like

You can sort your blogs by tags

5. Edit the home page

<img SRC = <img SRC ="Https://raw.githubusercontent.com/yk2012/image-yk/master/20210422/YK. Kpl2nkte2z4. JPG" width="100px" />
Copy the code

3. Deploy online

GitHub access is slow or cannot be accessed

Create a new project on Github named yk2012.github

Create a new one at the project rootdeploy.shfile

#! /usr/bin/env sh
set -e
npm run docs:build
cd dist
git init
git add -A
git commit -m 'deploy'
git push -f [email protected]:yk2012/yk2012.github.io.git master
cd - 
Copy the code

Run the. Sh file

Enable the GitHub Pages service

4. Visit the web

yk2012.github.io/

This is the project address. Welcome starGitee.com/ykang2020/y…

Github.com/yk2012/yk_h…

At present, the project is still in continuous iteration, striving to achieve the appearance in my heart as soon as possible ~~