VuePress & Gitee 搭建个人博客

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

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

summary:

搭建方式

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

实现功能:

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

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

QQ图片20221218143055.png

QQ图片20221218143103.png

搭建过程(一):

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

QQ图片20221218143803.png

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

QQ图片20221218143920.png

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

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

回车后静待

QQ图片20221218144409.png

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

QQ图片20221218151230.png 然后输入 npm install 或者 yarn install 安装依赖

QQ图片20221218151659.png 现在就有了一个自己的 blog 了,npm run dev 运行一下 QQ图片20221218151907.png

打开本地端口: QQ图片20221218152004.png

如下:

QQ图片20221218152053.png

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

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

QQ图片20221218152215.png

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

QQ图片20221218152417.png

配置示例:

QQ图片20221218153235.png

QQ图片20221218152916.png

搭建过程(二):

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

  1. 新建一个仓库:

QQ图片20221218153729.png

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

QQ图片20221218155259.png 填写到 config.js

QQ图片20221218155537.png

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

QQ图片20221218155905.png

内容为:

#!/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 -
复制代码

注意:

QQ图片20221218160209.png 仓库地址获取:

QQ图片20221218160337.png

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

QQ图片20221218160552.png

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

QQ图片20221218160842.png

实名认证就可以了。

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

分类:
前端
标签: