使用 VuePress 搭建个人博客并部署到 GitHub Pages

#初始项目

# 创建并进入一个新目录
mkdir blog && cd blog

# 使用包管理器进行初始化
npm init

# 安装 VuePress
npm install -D vuepress

#在 package.json 中添加 scripts

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

#目录结构

blog
├── docs
│   ├── .vuepress
│   │   ├── public # 存放静态资源
│   │   │   └── favicon.ico
│   │   ├── styles # 存放样式
│   │   │   ├── index.styl # 全局样式文件
│   │   │   └── palette.styl # 重写默认颜色常量
│   │   └── config.js # 配置文件
│   │
│   ├── _posts # 博客文件夹
│   │   └── xxx.md
│   └── about # 新建关于页面
│       └── index.md
├── deploy.sh # 部署
└── package.json

#基本配置

• 安装主题：meteorlxy(opens new window)

npm install vuepress-theme-meteorlxy

1
主题安装成功之后进入 config.js 进行配置 具体配置主题说明里写的很详细 传送门(opens new window)

• 安装插件
插件的话这里先不写了，过几天单独写一个插件篇(opens new window)

• 开始写文章...

#部署到 GitHub Pages

1. 在 Github 新建一个仓库
仓库的名字是：username.github.io 其中 username 换成你自己的用户名

2. 新建 deploy.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 -

1234567891011121314151617181920212223
把发布到的 GitHub 仓库用户名修改成你自己的

3. 配置 git 公钥连接到仓库
• 首先配置本地用户名及邮箱

# 配置用户名
git config --global user.name "用户名"

# 配置邮箱
git config --global user.email "邮箱地址"

12345
以上命令执行结束后，可用 git config --global --list 命令查看配置是否成功
• git 生成公钥

ssh-keygen -t rsa -C '邮箱地址'

1
提示设置存放公钥的位置和密码，全部默认的话直接按回车
• 查看公钥

cat ~/.ssh/id_rsa.pub

1
• 在 GitHub 上配置 SSH Key
细心的同学会发现 GitHub 上有两个地方都可以配置 SSH Key
第一种是在个人设置里全局 (opens new window)的 Key



这个全局 Key 设置之后你以后再用 git 提交到其他仓库时就不会提示你 id_rsa.pub error 了
然后再说第二种 在仓库的设置中配置 仅用于此仓库的读和写 具体路径如下



需要注意的是复制的时候把前边的 ssh-rsa 也要复制上 并勾选下边的写入选项

4. 运行 deploy.sh 文件
运行后会自动在 docs/.vuepress/dist 目录下生成网页文件 并上传到 GitHub 可能会有几分钟延迟
部署成功后就可以访问 username.github.io 查看啦！
 
原文：使用 VuePress 搭建个人博客并部署到 GitHub Pages | Biubiubiu