VuePress & Gitee 搭建个人博客

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

前言： 这是我第一次搭建个人博客，挺激动的，不过在这个过程中也踩了巨多坑，但是终于被我搭出来啦。遂写下这篇总结文章，希望可以帮助到一些也想搭建博客的掘友们。附我的博客：布鲁斯的博客。

summary:

• 主题：vuepress-theme-reco
• 工具：VuePress、Gitee、VsCode

搭建方式

• 使用VuePrss框架进行博客网站的构建，然后部署到免费的Gitee上。

实现功能：

• 读者评论
• 添加博客
• 添加标签 等

当然功能的实现得益于vuepress-theme-reco主题的强大，不过我会在后续当中教大家在哪里可以配置出自己想要的效果，先看看我的成果：

搭建过程（一）：

首先创建一个文件夹blog,再用VsCode新建终端打开：

然后进入vuepress-theme-reco官方文档，快速开始：

三种方法根据自己的环境选择一种执行：

在这里一路回车也没有关系，我选择的是blog style,当然后面2.x 版本的大家可以酌情考虑，这三个版本有啥不同可以移步官方文档细看。 （就这一步我居然执行了好几个小时qwq）

回车后静待

看到下面的 successful 就是下载好了

然后输入 npm install 或者 yarn install 安装依赖

现在就有了一个自己的 blog 了，npm run dev 运行一下

打开本地端口：

如下：

这样就可以根据自己的需求对博客进行修改。

下面就是当前目录文件夹，我们要写的就在blogs文件夹里面

在 .vuepress 文件夹里面的config.js 就是用来配置首页信息。

配置示例：

搭建过程（二）：

现在博客网站写的差不多了，接下来就是操作 Gitee , 让我们的博客可以部署到仓库里面。 首先打开：Gitee 官网，登录。

1. 新建一个仓库：

不知道填啥信息的按我写的就可以,点击创建 创建完毕后进入仓库，复制仓库的地址

填写到 config.js 里

2. 接下来就是将项目推送到仓库里面，那么我们就需要在根文件夹新增一个 deploy.sh 协议脚本文件。

内容为：

#!/usr/bin/env sh

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

# 生成静态文件
npm run build

# 进入生成的文件夹
cd public

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

# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f 自己的仓库地址 master:gh-pages  

cd -

注意：

仓库地址获取：

获取后直接替换上去。然后终止项目，运行 sh deploy.sh

3. 在 windows 电脑上执行sh deploy.sh会出错，上网解决即可。
4. 最后进入仓库如下：

实名认证就可以了。

后记： 总的来说博客搭建完毕后会觉得好像也不是很难，但是中间踩到了许多坑，导致博客搭建的过程中很难受。最后希望本文可以帮助到一下掘友们。