Vuepress 搭建个人博客

步骤一：安装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  中的标签
        ['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://.github.io/，则可以省略这一步，因为 base 默认即是 "/"。
如果你打算发布到 https://.github.io//（也就是说你的仓库在 https://github.com//），则将 base 设置为 "//"。
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://.github.io <根据实际情况修改>
git push -f [email protected]:caoyezi/caoyezi.github.io.git master

# 如果发布到 https://.github.io/ <根据实际情况修改>
# git push -f [email protected]:/.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 ()
    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 ()
    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 ()
    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

写在最后的最后：

按照别人的文档和官方文档，基本一篇文档是搞不定的，总会遇到奇奇怪怪的问题，把自己遇到的坑都记下来，如果对你帮助实属荣幸。