day1 用VuePress来搭建个人网站详细流程

VuePress可以让你非常方便的在Markdown文档中编写Vue代码，VuePress会为每个页面预渲染生成静态的HTML,同时，每个页面被加载的时候，将作为SPA运行

接下来用VuePress来搭建个人网站

环境搭建

查看node的版本号

node -v

node.js的版本号必须要大于等于8才可以

全局安装vuepress

yarn global add vuepress

或者

npm install -g vuepress

检查vuepress是否安装成功

vuepress -v

创建一个文件夹

mkdir try_blogs

切换到新建文件夹目录

cd try_blogs

初始化项目

npm init -y

通过npm init快速创建项目的package.json文件

新建docs文件夹

mkdir docs

新建的docs文件夹作为项目文档更目录，主要放置Markdown类型的文章和.vuepress文件

切换到docs目录

cd docs

创建.vuepress文件夹

mkdir .vuepress

.vuepress目录是放置所有的vuepress特有文件的地方

切换到.vuepress目录

cd .vuepress

创建config.js文件

touch config.js

用来放配置文件

再创建public文件夹

mkdir public

用来存放公共图片

新建⼀个md⽂件

echo '# Hello VuePress - first blog!' >README.md

基础配置

在README.md里面添加内容

---
home: true
heroText: Vue技术博客初试
tagline: 项目结构，关注讨论，每日分享
actionText: 每日更新 →
actionLink: /testlink/
features:
- title: 项目结构
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: 关注讨论
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发和定义主题。
- title: 每日分享
  details: VuePress 为每个页面预渲染形成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: LearnVueonECS Licensed | Copyright © 2020-present
---

在package.json里面添加内容

  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  },

运行

npm run docs:dev

运行效果

部署

命令行里面执行：

vuepress build

当出来下边这一行代码就说明打包成功了

Success! Generated static files in vuepress

再将打包好的vuepress目录上传到github，
和github page配合，就可以配置好你的个人网站。