vuepress 搭建博客 (一)

vuepress 搭建博客

一、环境准备

node 环境

下载安装 node，必须 Node.js 版本 >= 8 nodejs.org/zh-cn/downl…

vuePress

# 安装
yarn global add vuepress # 或者：npm install -g vuepress
复制代码

二、初始化项目

项目基本配置

初始化文件夹

npm init -y 或 yarn init -y
复制代码

新建一个文章目录，存放文章等静态资源，而且咱们须要针对每篇文章，每一个模块进行配置，使用户可以方便导航，查看文章

在文档目录下面建立一个 docs, 而后在 docs 中建立一个 .vuepress 文件夹，里面再建立一个 config.js 配置文件

项目结构以下

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json
复制代码

在 VuePress 网站中，必须的配置文件是 .vuepress/config.js，它须要导出一个 JavaScript 对象：

module.exports = {
  title: 'Z 空间',
  description: '原始社会的一个码农，自我复盘的老巢'
}
复制代码

此时项目能够在本地运行了，vuepress 有两条命令

vuepress dev docs // 运行在本地
vuepress build docs // 打包
复制代码

咱们修改命令，在 page.json中新增脚本

"scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
复制代码

此时咱们运行

npm run dev
复制代码

项目便可运行在本地 http://localhost:8080/

个人是这样

导航配置

博客必定会有导航，否则咱们只有一个页面，一篇文章给用户看，不符合咱们爱写文章装 x 的属性，因此弄点导航出来 在 .vuepress/config.js中，新增如下内容

themeConfig: {
  nav: [{ text: '前端', link: '/fore-end/' }, { text: '其它', link: '/other/' }]
}
复制代码

这样就添加了两个导航，前端 和 其它

此时也要为这两个导航新建两个文件夹，而且分别建立 README.md 文件

此时文件结构以下

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
│  ├─ images
│  ├─ fore-end
│     └─ README.md
│  ├─ other
│     └─ README.md
└─ package.json
复制代码

这样点击导航能够直接读取两个 README.md 中的内容，不至于出现 404 的状况

侧边栏配置

与导航栏配置相似，以下

themeConfig: {
  sidebar: {
    '/other/': ['vuepress搭建博客']
  },
  sidebarDepth: 2, // 读取两级标题显示
}
复制代码

二、静态博客部署

我将博客放在了码云上，因此如下是在码云上部署博客步骤，GitHub 上雷同

建立一个仓库，名为 xxx

仓库开启 gitee pages

此时咱们获得了一个访问地址

咱们来到 .vuepress/config.js 将 base 访问路径设置一下

module.exports = {
  title: 'Z 空间',
  description: '原始社会的一个码农，自我复盘的老巢',
  base: '/blog-preview/'
}
复制代码

否则有可能出现 404 的状况

自动打包上传

在根目录下面新建一个文件，deploy.sh 将仓库地址复制到下面文字处，这个脚本能够自动打包，并将打包完成的页面传到仓库中

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm 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 项目提交地址 master

# 若是发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -
复制代码

在 package.json 中加入脚本运行指令

"scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs",
    "deploy": "bash deploy.sh"
  }
复制代码

so，运行一下指令

npm run deploy
复制代码

这时咱们去仓库能够看到

而后在 gitee pages 中更新一下

更新完成以后去咱们的网站看看

第一期就到这里了，好玩的东西你们能够本身摸索下，下一期集成 评论