步骤一：安装VuePress
全局安装vuepress
# 全局安装
yarn global add vuepress@next
# 或者
yarn global add vuepress # 或者：npm install -g vuepress
上述命令需要用户已经安装了node、yarn、git环境。如果用户对这一部分内容不熟悉，请参考相关教程
步骤二：初始化VuePress项目
建立项目文件夹及首页
cd D
mkdir vuepressBlog
cd vuepressBlog
yarn init
mkdir docs
cd docs
touch README.md
touch .vuepress/config.js // 最好手动新建.vuepress文件，用touch 会报错
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
└─ package.json
在docs目录中的README.md文件将成为项目的根目录文件，该文件会被渲染成为index.html。
yarn init 效果图，都是随便瞎输的
package.json效果图
touch .vuepress报错图
步骤三：在 package.json 里添加两个启动命令:
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
package.json
步骤四：启动
yarn run dev
步骤四： 配置
config.js
module.exports = {
title: 'vuePress模板博客',
description: '我的个人网站',
head: [ // 注入到当前页面的 HTML <head> 中的标签
['link', { rel: 'icon', href: '/logo.jpg' }], // 增加一个自定义的 favicon(网页标签的图标)
],
base: '/', // 这是部署到github相关的配置
markdown: {
lineNumbers: false // 代码块显示行号
},
themeConfig: {
nav: [ // 导航栏配置
{ text: 'GitHub', link: 'https://github.com/caoyezi' },
{ text: '简书', link: 'https://www.jianshu.com/u/2ce8cb7701b8' },
{ text: '有问题请问我', link: 'https://baidu.com' }
],
sidebar: [{ // 左侧导航栏配置
title: 'Vuepress搭建'
// collapsable: false, //是否展开
},
['/accumulate/2019/准备工作', '准备工作']
]
// sidebar: 'auto', // 侧边栏配置
// sidebarDepth: 2, // 侧边栏显示2级
}
};
步骤六：发布GitHub上
在 docs/.vuepress/config.js 中设置正确的 base:
如果你打算发布到 https://<USERNAME>.github.io/，则可以省略这一步，因为 base 默认即是 "/"。
如果你打算发布到 https://<USERNAME>.github.io/<REPO>/（也就是说你的仓库在 https://github.com/<USERNAME>/<REPO>），则将 base 设置为 "/<REPO>/"。
config.js
module.exports = {
base: '/test/', // 比如你的仓库是test
}
创建脚本文件:
在project的根目录下，创建一个deploy.sh文件：
复制进去，稍微修改即可
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件 <根据实际情况修改>
yarn run 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:caoyezi/caoyezi.github.io.git master
# 如果发布到 https://<USERNAME>.github.io/<REPO> <根据实际情况修改>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
cd -
打包上传到GitHub
./deploy.sh 运行命令图
./deploy.sh 运行命令图，输入GitHub密码回车即可
打开GitHub userName.github.io 刷新即可看到效果
文件目录如下
效果图
效果图
注：
错误1:
运行localhost:8080会报错
(node:14508) UnhandledPromiseRejectionWarning: TypeError: res.getHeader is not a function
at processRequest (C:\ProgramData\nvm\v10.9.0\node_modules\vuepress\node_modules\webpack-dev-middleware\lib\middleware.js:82:18)
at ready (C:\ProgramData\nvm\v10.9.0\node_modules\vuepress\node_modules\webpack-dev-middleware\lib\util.js:51:12)
at handleRequest (C:\ProgramData\nvm\v10.9.0\node_modules\vuepress\node_modules\webpack-dev-middleware\lib\util.js:167:5)
at Promise (C:\ProgramData\nvm\v10.9.0\node_modules\vuepress\node_modules\webpack-dev-middleware\lib\middleware.js:44:7)
at new Promise (<anonymous>)
at middleware (C:\ProgramData\nvm\v10.9.0\node_modules\vuepress\node_modules\webpack-dev-middleware\lib\middleware.js:43:12)
at Promise.all.Promise (C:\ProgramData\nvm\v10.9.0\node_modules\vuepress\node_modules\koa-webpack\index.js:43:7)
at new Promise (<anonymous>)
at C:\ProgramData\nvm\v10.9.0\node_modules\vuepress\node_modules\koa-webpack\index.js:42:5
at dispatch (C:\ProgramData\nvm\v10.9.0\node_modules\vuepress\node_modules\koa\node_modules\koa-compose\index.js:42:32)
at C:\ProgramData\nvm\v10.9.0\node_modules\vuepress\node_modules\@shellscape\koa-static\legacy\index.js:58:19
at Generator.throw (<anonymous>)
at step (C:\ProgramData\nvm\v10.9.0\node_modules\vuepress\node_modules\@shellscape\koa-static\legacy\index.js:6:221)
at _throw (C:\ProgramData\nvm\v10.9.0\node_modules\vuepress\node_modules\@shellscape\koa-static\legacy\index.js:6:455)
(node:14508) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:14508) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
GitHub issues问题出处
解决办法：
在package.json里面加上
"devDependencies": {
"vuepress": "^0.14.10",
"webpack-dev-middleware": "3.6.0"
}
配置如下
错误2：
yarn init -y
写在最后的最后：
按照别人的文档和官方文档，基本一篇文档是搞不定的，总会遇到奇奇怪怪的问题，把自己遇到的坑都记下来，如果对你帮助实属荣幸。
网友评论