通过VuePress reco搭建个人博客系统

胡图图先生

已于 2023-02-23 09:59:40 修改

阅读量777

点赞数

分类专栏：个人博客搭建文章标签： git github vue

于 2023-02-23 09:42:50 首次发布

本文链接：https://blog.csdn.net/HUAHUATII/article/details/129175058

版权

个人博客搭建专栏收录该内容

1 篇文章 0 订阅

订阅专栏

VuePress-reco搭建个人blog

内心吐槽

折腾了两三天，看了很多关于Hexo，Wordpress还有VuePress等许多创建个人博客的工具，最后还是选择VuePress（其实感觉这几个工具都大同小异，既然最终决定用VuePress就加油好好干！！

果然官方文档都是最好的教程：

https://markdown.com.cn/ ——markdown官方文档
https://vuepress.vuejs.org/zh/——VuePress官方文档
https://vuepress-reco-doc.vercel.app/——VuePress reco官方文档
https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.json——emjoi列表

1 使用npm本地快速部署VuePress reco项目

# 引入vuepress-theme-reco主题（这是作者推荐的脚手架工具，简化许多配置）
> npm install @vuepress-reco/theme-cli -g
# 使用官方的模板初始化项目
> theme-cli init <your-project>  # 然后选择对应的配置
> cd <your-project>
> npm install
> npm run dev  # 即可在本地访问

到此为至，博客页面可以通过本地8080访问。

2 连接github

项目内右键 -> Git Bash Here：

# 设置用户名和邮箱
git config --global user.name "GitHub 用户名"
git config --global user.email "GitHub 邮箱"
# 创建SSH密钥
ssh-keygen -t rsa -C "GitHub 邮箱" # 然后一路回车

进入C:\Users\用户名\.ssh记事本打开公钥文件id_rsa.pub复制内容；
登录Github，进入Settings界面，选择SSH and GPG keys添加密钥；
回到Git Bash：ssh -T git@github.com，显示："Hi xxx…"即连接成功。
创建Github Pages仓库，修改Repository name为：<github用户名>.github.io
在项目根目录下创建脚本deploy.sh，内容如下：

#!/usr/bin/env sh

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

# 生成静态文件
npm run build

# 进入生成的文件夹
cd D:\\Blog\\VuePress_reco\\.vuepress\\dist


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

# 如果发布到 https://<USERNAME>.github.io
git push -f git@github.com:Huahuatii/Huahuatii.github.io.git master

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

cd -

完成这一步后仍然要在github中进行配置，将Settings→Pages→Branch改成master；
如果需要绑定特定的域名，则需要额外在Custom Domain中进行配置；
如果github page页面显示404，可以尝试ctrl + f5强制刷新页面。

3 目录介绍

我是一个懒狗有很多工作的人，这些内容下次补上。

4 如何添加新的笔记内容

~~我是一个懒狗有很多工作的人，这些内容下次补上。~~
这个真不行，这个得稍微记录一下怎么写

首先在blogs文件夹下创建你需要的Category目录，然后创建md文章；
写博客，注意博客头部内容为：

---
title: 第一篇Blog——VuePress_reco安装及部署
date: 2023-02-22 11:07:32
tags: 
 - VuePress
 - git
categories:
 - 博客部署
sidebar: true
---
[[toc]]

:::
3. 执行之前创建的那个deploy.sh脚本（💣这个脚本需要在根目录文件下打开Git Bash执行：sh deploy.sh）；
4. 完成一篇博客的撰写和上传至github仓库。

5 对主题进行更改

这些内容下次补上。

6 参考链接

这两篇文章+官方文档几乎可以解决大部分问题
https://blog.csdn.net/baijiafan/article/details/126055133——讲VuePress的使用教程
https://www.cnblogs.com/glassysky/p/13387739.html——一篇讲VuePress的使用教程
:::