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配合,就可以配置好你的个人网站。