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
-
Create a new folder and the project begins
-
Initialize the package manager
npm init -yes
Copy the code
- Install VueRress local dependencies
cnpm install -D vuepress
Copy the code
- Create the file docs/ readme.md
- Write content in readme.md
# Hello YKThis is the personal homepage of YK bacteria ~ welcome to visitCopy the code
- Modify scripts in package.json
"scripts": {
"docs:dev": "vuepress dev docs"."docs:build": "vuepress build docs"
}
Copy the code
- Start the local server
npm run docs:dev
Copy the code
- 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.sh
file
#! /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 ~~