VuePress_reco安装及部署
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 # 即可在本地访问
Tips
到此为至，博客页面可以通过本地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 -
Note
- 完成这一步后仍然要在github中进行配置，将Settings→Pages→Branch改成master；
- 如果需要绑定特定的域名，则需要额外在Custom Domain中进行配置；
- 如果github page页面显示404，可以尝试
ctrl + f5强制刷新页面。
3 目录介绍
我是一个懒狗有很多工作的人，这些内容下次补上。
4 如何添加新的笔记内容
我是一个懒狗有很多工作的人，这些内容下次补上。
这个真不行，这个得稍微记录一下怎么写
- 首先在
blogs文件夹下创建你需要的Category目录，然后创建md文章； - 写博客，注意博客头部内容为：
Details
---
title: 第一篇Blog——VuePress_reco安装及部署
date: 2023-02-22 11:07:32
tag:
- VuePress
- git
category:
- 博客部署
# sidebar: true
---
[[toc]]
- 执行之前创建的那个
deploy.sh脚本（💣这个脚本需要在根目录文件下打开Git Bash执行：sh deploy.sh）； - 完成一篇博客的撰写和上传至github仓库。
5 对主题进行更改
这些内容下次补上。
参考链接
https://blog.csdn.net/baijiafan/article/details/126055133——讲VuePress的使用教程
https://www.cnblogs.com/glassysky/p/13387739.html——一篇讲VuePress的使用教程
6 设置评论功能
参考稀土掘金这篇blog
https://juejin.cn/post/7129855052075761694——使用Giscus在Vuepress2中开启评论功能
------------------------------------------------------分-割-线------------------------------------------------------
7 补充内容
最终选择VuePress-hope最为最终主题，因为该主题继承了众多元素功能，并且是VuePress相关开发人员推荐主题，官方文档内容详细。