Gitee+VuePress搭建个人博客

麋鹿大哥

发布于 2020-08-19 10:16:33

1K0

发布于 2020-08-19 10:16:33

文章被收录于专栏：麋鹿的技术专栏

#

重点：不需要服务器，不需要域名，不要一分钱，白嫖使我快乐哈哈哈哈哈哈

首先说一下环境要求，既然是Gitee部署的话，Gitee的账号我们得有哈，Node环境咱也得有哈，最好是能有yarn的。这里就不过多的介绍Node和安装啦，比较简单。Git的基本操作咱也得会哈。

顺便说下Yarn的下载地址https://yarnpkg.com/latest.msi

安装完之后yarn --version检测一下是否安装成功，当然你直接用npm也是可以的。

说不多说，咱们直接开整。

如果是初次安装Node的同学还得配置一下淘宝镜像，毕竟外网访问实在是太慢了哈

持久使用
npm config set registry https://registry.npm.taobao.org
配置后可通过下面方式来验证是否成功
npm config get registry
通过cnpm使用
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 第一步、克隆

https://gitee.com/vuepress-reco/vuepress-theme-reco?_from=gitee_search在gitee页面中克隆一份VuePress-themo-reco，这里就有人会疑惑了，咱们不是整VuePress吗，怎么克隆一份VuePress-themo-reco，VuePress-themo-reco是基于VuePress开发一款博客主题，我个人就是用的这个博客主题，感觉还蛮好的。怕有人不想打开网站克隆我这里直接给出git的命令啦~。

git clone https://gitee.com/vuepress-reco/vuepress-theme-reco.git

使用npm的同学

# init
npm install @vuepress-reco/theme-cli -g
theme-cli init my-blog

# install
cd my-blog
npm install

# run
npm run dev

# build
npm run build

使用yarn的同学

# init
yarn global add @vuepress-reco/theme-cli
theme-cli init my-blog

# install
cd my-blog
yarn install

# run
yarn dev

# build
yarn build

启动之后的访问localhost:8080

ok，第一步已经完成啦。

# 第二步、在Gitee中新建一个仓库

# 第三步、创建本地仓库连接远程仓库

一、Git的配置
git config --global user.name "yourname"

git config --global user.email "your_email@youremail.com"

这里建议直接配置密钥，免得推送要输入账号密码麻烦
cd ~/.ssh
如果.ssh文件夹不存在，执行指令自动创建 mkdir ~/.ssh（我已经创建了，所以不用使用这个命令）
生成RSA密钥对
ssh-keygen -t rsa -C "你的邮箱@xxx.com"
查看公钥内容
cat ~/.ssh/id_rsa.pub

将公钥内容（全部）复制并粘贴（注意：公钥内容以ssh-rsa开头）

添加公钥完成后进行测试公钥（测试SSH链接）

- ssh -T git@gitee.com
- 当终端提示welcome to Gitee.com,yourname!表示链接成功

如果上面操作出现问题，最简单的办法就是clone一下你的项目到本地，然后把my-blog文件夹下的文件拷贝到你clone下来的项目里面

git status

git add .

git commit -m"提交代码"

git push

这样应该不会出问题了。

# 第四步、部署

下述的指南基于以下条件：

文档放置在项目的 public 目录中；
VuePress 以本地依赖的形式被安装到你的项目中，并且配置了如下的 npm scripts:

{
  "scripts": {
    "dev": "vuepress dev .",
    "build": "vuepress build .",
    "deploy": "./deploy.sh"
  }
}

Gitee Pages

在 docs/.vuepress/config.js 中设置正确的 base。如果你打算发布到 https://<USERNAME>.gitee.io/，则可以省略这一步，因为 base 默认即是 "/"。如果你打算发布到 https://<USERNAME>.gitee.io/<REPO>/（也就是说你的仓库在 https://github.com/<USERNAME>/<REPO>），则将 base 设置为 "/<REPO>/"。
在你的项目中，创建一个如下的 deploy.sh 文件（请自行判断去掉高亮行的注释）:

#!/usr/bin/env sh

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

# 生成静态文件
yarn build

# 进入生成的文件夹
cd public

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

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

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@githee.com:<USERNAME>/<REPO>.git master:gh-pages
cd -