Vue
# VuePress 使用教程
# 安装与配置
全局安装vuepress
npm install -g vuepress
npm install @vuepress-reco/theme-cli -g
2
打开cmd 进入存放项目的目录,输入
theme-cli init my-blog
填入相关内容
E:\Vue workSpace>theme-cli init demo_test
? What's the title of your project? demo
? What's the description of your project? demo_test
? What's the author's name? Ruan.X.T.
2
3
4
选择

自动生成以下目录

|-- demo_test
|-- .gitignore
|-- package-lock.json
|-- package.json
|-- README.md
|-- yarn.lock
|-- docs
|-- README.md
|-- .vuepress
| |-- config.js
| |-- public
| | |-- favicon.ico
| | |-- head.png
| | |-- hero.png
| |-- styles
| |-- palette.styl
|-- timeLine
| |-- README.md
|-- views
|-- category1
| |-- 2018
| | |-- 121501.md
| |-- 2019
| |-- 092101.md
|-- category2
| |-- 2016
| | |-- 121501.md
| |-- 2017
| |-- 092101.md
|-- other
|-- guide.md
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
使用npm install 安装依赖
# 部署到github上
# 登录GitHub账号
没有GitHub账号请先去注册,地址:https://github.com/
# 创建一个仓库
# 创建ssh公钥
首先需要先安装git
接着在任意位置右键点击Git Bash Here
然后输入cd ~/.ssh
接着输入ls,如果有id_rsa id_rsa.pub 这两文件就是有,可以跳到获取ssh继续看

输入ssh-keygen -t rsa -C "xxxxx@xxxxx.com"创建ssh密钥,按三次回车
再然后输入 cat ~/.ssh/id_rsa.pub 获取打印出来的密钥
# 将ssh公钥绑定到GitHub账号



在上图输入秘钥
# 修改config.js文件
添加base选项,内容为你的仓库的名字,必须以斜杠"/"作为开头和结束

# 创建deploy.sh文件
在项目根目录下创建deploy.sh文件
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run docs:build
# 进入生成的文件夹
cd docs/.vuepress/dist
# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
cd -
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
这里大部分人仅需要修改git push -f git@github.com:/.git master:gh-pages 中设置你的用户名和仓库名,并取消#注释即可
# 修改package.json文件
这里务必修改成这样子,docs:build是官方建议的格式所以上一步deploy.sh文件中使用的也是这个形式的命令,而bash deploy.sh是用于免密码输入上传
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs",
"deploy": "bash deploy.sh"
},
}
2
3
4
5
6
7
# 设置git的用户名和邮箱
部分人没有设置git的用户名和邮箱而导致失败,所以没有设置的人仅需要输入下面两条命令,修改即可
git config --global user.name "username"
git config --global user.email "email"
2
# 上传
在项目根目录下点击右键,选择Git Bash Here,输入npm run deploy即可
# 查看页面
在你的仓库中选择Settings选项,下拉到GitHub Pages部分,点击绿色部分字体就可以查看页面了


https://rxt520.github.io/Ruan.X.T.blog/
# 使用mddir 生成MarkDown目录结构
若没有装过node.js 需要先去装 node.js 8.0版本以上
使用命令,会在当前目录生成结构目录
npm install mddir -g or npm install mddir -D