前言
作为一个在厂子里整天埋头苦干的程序员，在拧螺丝的同时，也要学会总结。所以你需要把你的文章分享出来，让更多的人受益。写文章的方式有很多种，比如知乎，掘金等等。如果你想自己写一个博客网站，就需要自己写一个项目，然后部署到自己的服务器上，很显然，这个学习成本和资金成本都很高。不过，很高兴的是，github为每个用户免费提供了一个gitPage站点，我们可以部署我们的静态页面。所以，今天来教大家如果使用vuepress+gitPage搭建一个属于自己的博客。
准备
在开始前你需要准备好以下工具
- github账号
- 本地环境：git、node
- 编辑器：vscode
备注：本地需要配置好github所需的SSH
起步
在自己的github新建一个仓库，起名：[username].github.io，比如我的xiumubai.github.io，如下图所示：
clone：
git clone https://github.com/xiumubai/xiumubai.github.io.git
添加一个文件 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>this is my blob</h1>
</body>
</html>
提交代码
git add .
git commit -m 'deploy'
git push -u origin master
在浏览器访问地址：xiumubai.github.io ,查看页面效果（可能需要等一两分钟）:
原理：其实xiumubai.github.io就相当于github为你免费提供了一个服务器， 这上面可以放你的一些静态页面，默认首页是index.html。
自动化
上面我们是通过本地push的方式直接把静态页面推送到这个仓库，其实本质上来说，这个仓库不用更改。 下面我们来卡看一下如何自动化部署你的代码。
1. 在你的github仓库另外起一个项目：docs
2. 本地搭建自己的项目，这个项目我们用vuepress去搭建。具体过程详情参考我之前写的一篇文章：vuepress的使用。
大概长下面这个样子。页面样式：
效果预览：https://melody-core/github.io。
这个是我们的开源社区文档。
4. 配置自动化脚本
在根目录创建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'
# dist目录发布到 https://xiumubai.github.io
# git push -f将本地的代码库推送到远端，并覆盖
git push -f https://github.com/xiumubai/xiumubai.github.io.git master
在package.json中添加scripts命令
"scripts": {
"deploy": "bash deploy.sh"
},
执行命令：npm run deploy以后，就能在浏览器访问了。
自动化部署原理： 当运行
npm run deploy的时候，本地项目文件会打包到dist目录下，进入dist目录，初始化git仓库，coomit，push到远程仓库。
