VuePress快速构建博客

Posted 2022-12-11 饮尽杯中月

本地:

1. 创建并进入一个新目录

mkdir vuepress-starter && cd vuepress-starter

2. 使用你喜欢的包管理器进行初始化

yarn init # npm init

3. 将 VuePress 安装为本地依赖

yarn add -D vuepress # npm install -D vuepress

4. 创建你的第一篇文档

mkdir docs && echo '# Hello VuePress' > docs/README.md

5. 在 package.json 中添加一些 scripts

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

6. 在本地启动服务器

yarn dev # npm run dev

7. 开启热更新
   package.json 中

"dev" : "vuepress dev docs"

改为

"dev": "vuepress dev docs --temp .temp"

部署上线

1.github构建仓库

① 新建仓库一：username.github.io
（必须为你的github账户的username，而不是昵称啥的）
② 新建仓库二，名称随意如vuepress-demo
二者的关系是：仓库一负责显示网站内容，我们不需要改动它；日常开发和新增内容，都在仓库二中，并通过 npm run deploy 命令，将代码发布到仓库一

2.关联本地项目与github仓库

// 先cd到你的demo
cd vuepress-demo
// git初始化
git init
// 关联github仓库
git remote add origin [e-mail]:accompanyXB/MyBlog.git

3.新建部署文件

根目录下新建deploy.sh:

#!/usr/bin/env sh

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

# 生成静态文件
npm run build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.yourwebsite.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果你想要部署到 https://USERNAME.github.io
git push -f [e-mail]:accompanyXB/accompanyXB.github.io.git master

# 如果发布到 https://USERNAME.github.io/<REPO>  REPO=github上的项目
# git push -f [e-mail]:USERNAME/<REPO>.git master:gh-pages

cd -

4.git提交

在根目录下添加.gitignore文件，以防止不必要的提交

docs/.vuepress/dist
node_modules
.temp

// 提交到暂存区
git add .
// 提交到本地仓库
git commit -m '基本搭建完毕'
// push到github仓库
git push --set-upstream origin master

5.新建deploy指令并执行

package.json 文件夹中添加发布命令：

"scripts": 
  "deploy": "bash deploy.sh"

运行：

bash deploy.sh