# VuePress文档博客
# 为什么使用VuePress构建文档博客
- 之前使用hexo构建博客,操作太繁琐了,不喜欢。
- VuePress 由vue驱动的极简静态网站生成器,熟悉vue所以用了。
- 喜欢把学习的内容记录成静态文章,不需要花里胡哨的样式内容。
- 主题内容适配手机。
- 博客源文件内容参考 GitHub (opens new window),实际效果访问 笔记 (opens new window)
# 构建本地博客
- 新建名为
blog目录
中初始化项目
(该项目命名为blog_src
,初始化后上传到GitHub中方便后面跨平台记录)参考vuepress官网指南中的快速上手 (opens new window)。为修改自己熟悉的项目启动命令,我修改的如下:
{
"name": "blog",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
},
"devDependencies": {
"vuepress": "^1.9.7"
}
}
初始化好项目之后一定要好好看下官网中介绍的VuePress项目的目录结构 (opens new window)。
添加
首页
,导航栏
,侧边栏
等主题配置,参考官网主题中默认主题配置 (opens new window)添加
图标
等好的配置作品参考——vuepress-reco (opens new window)。具体项目线上效果——vuepress-theme-reco (opens new window)
# 手动上线部署
为了方便我博客的管理,blog文件夹下有 blog_src
(项目源文件)和 dist
(项目打包后需要部署的文件)两个文件夹。
- 使用gitPage部署。
github (opens new window)中新建一个仓库,名为
xxx.github.io
(xxx为你GitHub的用户名)。在
blog目录
下,拉去新建仓库内容,并将项目名称改为dist
。正常在
blog_src
中将文章写好后,确定本地访问正常。将blog_src
中内容提交到GitHub中,保留源文件。对本地项目进行打包处理,将
blog/docs/.vuepress/dist
中内容复制进入到blog/dist
中(删除blog/docs/.vuepress/dist
,保证 blog/dist 中.git
文件不被删除)。进入
blog/dist
执行一下命令将代码提交:
git add .
git commit -m 'xxx' //本地提交的说明
git push -u origin master // 提交至master分支
代码提交后,等待gitPage自动部署。几分钟后在访问https://xxx.github.io
即可看到内容。
# 自动化部署方案
blog_src
项目根目录下创建deploy.sh,进行自动化部署(不用我去手动部署了)。blog_src
项目根目录下终端运行sh deploy.sh xxx部署描述
完成自动部署。
自动部署脚本内容如下
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# blog_src项目打包
npm run build
# 进入到dist中删除旧内容
cd ../dist
# 删除除了.git 以外的所有文件,不直接复制覆盖是为了避免文件名修改出错。
ls | grep -v .git | xargs rm -rf
# 进入 blog_src 将打包内容复制到 dist 中,删除打包文件
cd ../blog_src
#将打包内容复制到 dist 中
mv docs/.vuepress/dist/* ../dist
# 删除打包文件
rm -rf docs/.vuepress/dist
# 提交 blog_src 中修改到GitHub中
git add .
git commit -m $1
git push -u origin master
# 进入到dist中提交打包内容
cd ../dist
# 提交打包内容到GitHub中
git add .
git commit -m $1
git push -u origin master
← nginx那些事 使用nvm管理node →