likes
comments
collection
share

VuePress & Gitee 搭建个人博客

作者站长头像
站长
· 阅读数 13

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

summary:

搭建方式

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

实现功能:

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

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

VuePress & Gitee 搭建个人博客

VuePress & Gitee 搭建个人博客

搭建过程(一):

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

VuePress & Gitee 搭建个人博客

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

VuePress & Gitee 搭建个人博客

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

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

回车后静待

VuePress & Gitee 搭建个人博客

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

VuePress & Gitee 搭建个人博客 然后输入 npm install 或者 yarn install 安装依赖

VuePress & Gitee 搭建个人博客 现在就有了一个自己的 blog 了,npm run dev 运行一下 VuePress & Gitee 搭建个人博客

打开本地端口: VuePress & Gitee 搭建个人博客

如下:

VuePress & Gitee 搭建个人博客

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

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

VuePress & Gitee 搭建个人博客

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

VuePress & Gitee 搭建个人博客

配置示例:

VuePress & Gitee 搭建个人博客

VuePress & Gitee 搭建个人博客

搭建过程(二):

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

  1. 新建一个仓库:

VuePress & Gitee 搭建个人博客

不知道填啥信息的按我写的就可以,点击创建 VuePress & Gitee 搭建个人博客 创建完毕后进入仓库,复制仓库的地址

VuePress & Gitee 搭建个人博客 填写到 config.js

VuePress & Gitee 搭建个人博客

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

VuePress & Gitee 搭建个人博客

内容为:

#!/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 -

注意:

VuePress & Gitee 搭建个人博客 仓库地址获取:

VuePress & Gitee 搭建个人博客

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

VuePress & Gitee 搭建个人博客

  1. 在 windows 电脑上执行sh deploy.sh会出错,上网解决即可。
  2. 最后进入仓库如下:

VuePress & Gitee 搭建个人博客

实名认证就可以了。

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