初始化 Git 仓库
首先,登陆 GitHub
,然后,点击右上角➕找到 new repository
选项,创建一个新的仓库:
在 Repository name
填入blog
,其他保持默认设置,点击 Create repository
按钮,就成功地创建了一个新的 Git 仓库:
初始化项目
初始化本地项目,将 VuePress 作为本地依赖安装:
# 初始化项目
cd ~/Desktop
mkdir my-vuepress
cd my-vuepress
npm init -y
# 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress # 或者:npm install -D vuepress
# 新建一个 docs 文件夹
mkdir docs
# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md
接着,在 package.json
里加一些脚本:
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs",
"deploy-gh": "GH=1 yarn docs:build && bash scripts/deploy-gh.sh"
}
}
运行本地开发环境:
yarn docs:dev # 或者:npm run docs:dev
或构建线上静态文件:
yarn docs:build # 或者:npm run docs:build
配置 GitHub Pages
关于 GitHub Pages 的介绍,详见阮一峰的《github Pages入门》。
首先,在 docs/.vuepress/config.js
中配置正确的 base
。
module.exports = {
title: "My Blog",
description: "This is a blog.",
base: '/blog/'
}
新建脚本 my-vuepress/scripts/deploy-gh.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
# 把上面的 <USERNAME> 换成你自己的 Github 用户名,<REPO> 换成仓库名,比如我这里就是:
git push -f git@github.com:wtyqer/blog.git master:gh-pages
cd -
执行脚本进行部署:
yarn deploy-gh # 或者:npm run deploy-gh
返回 Git 仓库,点击 settings:
标红的位置就是部署后的 Github Pages 地址:
访问显示如下结果即为部署完成: