# 搭建一个自动更新的博客

孙小烨
1,364 阅读3分钟

vuepress介绍

相信大家在学习vue的时候也看到了，官方文档逻辑清晰，设计合理，对我们的学习有很大的帮助。是不是也想有这么一个风格的网站，用来记录自己平时的一些积累。

vuepress就是为此而生，通过vuepress你可以搭建一个和vue官方文档一摸一样的网站，天然的友好seo，你可以不用关注任何设置，开箱即用，当然你也可以尽情折腾，创造属于自己style的网站。

实际上，vuepress网站就是一个类似vue全家桶的单页应用。如果你的vue比较熟练，你甚至可以随意开发，自定义主题。vuepress在构建时，会创造一个服务端渲染的版本，这样就类似于nuxt。

开始搭建

完整的搭建指南可以到vuepress官网查看，本篇只提供一个基础的示例

新建目录blog作为博客项目的主体, 依次执行以下代码

yarn init // 初始化
yarn add -D vuepress // 安装vuepress

安装好vuepress后，就可以写文章了。新建docs作为文章的存放目录，在docs下新建一个README.md，写入yaml数据

---
home: true
heroImage: /hero.png
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---

还差一步我们就能看到我们的成果了，在package.json的script中添加指令

"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs",

执行指令,访问本地地址即可看到熟悉的页面。

yarn docs:dev

部署

各个平台的部署指南可以到vuepress官网查看，本篇只提供一个github page的部署示例

  1. 在 docs/.vuepress/config.js 中设置正确的 base。

    如果你打算发布到 https://<USERNAME>.github.io/，（需要首先创建<USERNAME>.github.io远程仓库）则可以省略这一步，因为 base 默认即是 "/"。

    如果你打算发布到 https://<USERNAME>.github.io/<REPO>/（也就是说你的仓库在 https://github.com/<USERNAME>/<REPO>），则将 base 设置为 /<REPO>/

  2. 在你的项目中，创建一个如下的 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 -

    双击执行deploy.sh，如果没有意外，博客就会自动部署到你想要发布的仓库。

使用自己的域名

vuepress也支持部署到自定义域名下，但是需要将自己的域名解析。如下图添加解析后即可

持续集成

整个blog项目提交github后，手动触发deploy.sh部署，也比较麻烦，有没有方法在push之后就自动触发呢。可以，我们通过travis-ci来达到目的。

  1. 登录www.travis-ci.org, 关联自己的github

  2. 在头像处选择setting，打开博客仓库的设置，进入设置后，我们需要填入github的令牌{access_token: token}

  3. 打开自己的github,点击Generate new token,选择所有的选项，生成令牌，复制后填入步骤2

  4. 修改deploy.sh

  # 如果使用 travis 持续集成
  git push -f https://${access_token}@github.com/<USERNAME>/<USERNAME>.github.io.git master
# git push -f https://${access_token}@github.com/<USERNAME>/<REPO>.git master:gh-pages
  1. 在blog项目根目录创建.travis.yml，填入内容
language: node_js
sudo: required
node_js:
  - 8.11.2
branch: master
cache:
  directories:
    - node_modules
script:
  - ./deploy.sh
  1. 最后一步，将 deploy.sh 变成可执行文件，执行命令：
git update-index --add --chmod=+x build.sh

这样每次push代码，都会自动部署，可以点击www.travis-ci.org/dashboard查看是否部署成功。

avatar
文章
阅读
粉丝