Gitee+VuePress搭建个人博客

时间:2022-07-23
本文章向大家介绍Gitee+VuePress搭建个人博客,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

#

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

首先说一下环境要求,既然是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

  1. docs/.vuepress/config.js 中设置正确的 base。 如果你打算发布到 https://<USERNAME>.gitee.io/,则可以省略这一步,因为 base 默认即是 "/"。 如果你打算发布到 https://<USERNAME>.gitee.io/<REPO>/(也就是说你的仓库在 https://github.com/<USERNAME>/<REPO>),则将 base 设置为 "/<REPO>/"
  2. 在你的项目中,创建一个如下的 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 -

然后运行

yarn deploy

1

点击发布,然后就部署成功啦!