vuepress-theme-vdoing博客搭建教程

搭建流程

前言

这是笔者搭建个人博客所经历的流程，特附上笔记
笔者个人博客地址：沉梦听雨的编程指南

一、主题介绍

本博客使用的主题为：vuepress-theme-vdoing，相关介绍和使用方法可以参考该主题的官方文档

官方文档快速上手

二、模板套用

为了减少搭建博客的成本，用的是海贼哥封装好了的快速搭建模板。

Github访问地址如下：https://github.com/wuchubuzai2018/vuepress-blog-template

详细用法可以看：海贼哥博客

三、目录结构介绍

 .
├── .github   (可选，GitHub 相关文件)
│   ├── workflows
│   │   ├── baiduPush.yml (可选，百度定时自动推送)
│   │   └── ci.yml (可选，自动部署)
├── docs (必须，不要修改文件夹名称)
│   ├── .vuepress （同官方，查看：https://vuepress.vuejs.org/zh/guide/directory-structure.html#目录结构）
│   ├── @pages (可选，自动生成的文件夹，存放分类页、标签页、归档页)
│   ├── _posts (可选，专门存放碎片化博客文章的文件夹)
│   ├── <结构化目录>
│   └── index.md (首页)
├── vdoing (可选，本地的vdoing主题)
├── utils  (可选，vdoing主题使用的node工具)
│   ├── modules
│   ├── config.yml (可选，批量操作front matter配置)
│   ├── editFrontmatter.js (可选，批量操作front matter工具)
├── baiduPush.sh (可选，百度推送命令脚本)
├── deploy.sh (可选，部署命令脚本)
│
└── package.json

四、目录结构示例

config.js：示例

.
├── docs
│   │  (不参与数据生成)
│   ├── .vuepress
│   ├── @pages
│   ├── _posts
│   ├── index.md（主页）
│   │
│   │ (以下部分参与数据生成)
│   ├── 《JavaScript教程》专栏 (一级目录)
│   │   ├── 01.章节1 (二级目录)
│   │   |   ├── 01.js1.md (三级目录-文件)
│   │   |   ├── 02.js2.md
│   │   |   └── 03.js3.md
│   │   └── 02.章节2 (二级目录)
│   │   |   ├── 01.jsa.md
│   │   |   ├── 02.小节 (三级目录)
│   │   |   |   └── 01.jsxx.md (四级目录-文件)
│   ├── 01.前端
│   │   ├── 01.JavaScript
│   │   |   ├── 01.js1.md
│   │   |   ├── 02.js2.md
│   │   |   └── 03.js3.md
│   │   └── 02.vue
│   │   |   ├── 01.vue1.md
│   │   |   └── 02.vue2.md
│   ├── 02.其他
│   │   ├── 01.学习
│   │   |   ├── 01.xxa.md
│   │   |   └── 02.xxb.md
│   │   ├── 02.学习笔记
│   │   |   ├── 01.xxa.md
│   │   |   └── 02.xxb.md
│   │   ├── 03.文件x.md
│   │   └── 04.文件xx.md
│   └── 03.关于我
│   │   └── 01.关于我.md
.   .

特别注意：数字顺序。详细看官方文档。

五、部署到 github Pages

主要步骤

  1. 在 github 上新建一个自己的项目，作为远程仓库
  2. 把生成的 dist 项目上传到远程仓库中
  3. 上传成功之后，在远程仓库的页面上点击 seeting，然后左边侧边栏找到 Pages 选项点击，找到部署成功的网址

详细流程可以看（可以先浏览以下两点内容再看教程）：

视频：https://www.bilibili.com/video/BV17t41177cr?p=4&vd_source=d130139a92227a66fb558961b98507cb

配套文档：https://www.it235.com/guide/notes/vuepress.html#%E5%8F%91%E5%B8%83%E5%88%B0github-io

要注意的点

在自己的 github 上新建一个项目，建议大家都按照用户名.github.io的格式创建（可以自定义），我这里命名是cmty256.github.io（这里的用户名是指你 github 账户的用户名）

image-20230513010442527

好处：

  1. 最后部署到的网址是：https://用户名.github.io，如果不是上面那种格式的命名的话，网址可能会不太好看：https://用户名.github.io/项目名

  2. 在仓库文件推送成功后，Pages 中的站点自动开通，如果你的仓库名不是 用户名.github.io，则需要你手动选择分支后进行 Save

    具体是指下面这个区域：

image

问题小结

踩坑：第一次创建 github 项目可能会在连接远程仓库时报下面这个错：

git@github.com: Permission denied (publickey). fatal: Could not read from remote repository. 
Please make sure you have the correct access rights and the rep

解决方法：(110条消息) 解决git@github.com: Permission denied (publickey). fatal: Could not read from remote repository. Pleas_杭州小哥哥的博客-CSDN博客

GUI 查看 SSH key

前提：已安装 git

步骤：

右键 -> GIT GUI Here -> Help -> show SSH key

六、部署命令脚本

项目第一个目录下创建 deploy.sh 文件

文件内容：

#!/usr/bin/env sh

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

# 生成静态文件 , yarn docs:build
npm run docs:build
rm -rf ../blog/dist/*

# 将build生成的dist目录拷贝至上一层目录中
cp -rf docs/.vuepress/dist ../blog/

# 进入生成的文件夹
cd ../blog/dist

# git初始化，每次初始化不影响推送
git init
git add -A
git commit -m 'deploy'
git branch -M main

# 注意此处的格式是：git push -f git@github.com:USERNAME/USERNAME.github.io.git main
git push -f git@github.com:cmty256/cmty256.github.io.git main

# 上行代码中 git@github.com:cmty256/cmty256.github.io.git 这一段其实就是你的 github 项目远程地址，建议直接粘贴

这里要注意的是路径问题，笔者是建了两个文件夹，上传只包含 dist 的文件夹：

# 将build生成的dist目录拷贝至上一层目录中
cp -rf docs/.vuepress/dist ../blog/

# 进入生成的文件夹
cd ../blog/dist

运行方法：

右键，打开 Git Bash Here 窗口，执行 npm run deploy 或 yarn deploy

七、场景小结

1、嵌入图片

例子：

image-20230512123353319

// 可以在当前目录下创建一个 images 文件夹，然后在MD文件中写入如下代码进行设置文件的记录：
// 注意：文件夹的命名不能是中文，下面的 ./ 必须加，否则不会识别
![image-20230401144756087](./imags/image-20230401144756087.png)

2、md 文档规范

HashSet<String> -- 错误，格式识别不了，会导致运行之后页面没有内容显示
`HashSet<String>` -- 正确，需转成代码块才能正常识别

直接写 `{{ }}` -- 错误，也会识别不了；可以使用代码块的方式解决

3、插件资源

花里胡哨必备

4、网站上的小 logo 设置

.vuepress/config.js 中的头标签 head 中加入以下代码：

['link', { rel: 'icon', href: '/img/book.png' }],

图片存放在 .vuepress/public/img 目录下，没有就新建

5、图床搭建

PicGo 下载地址：https://github.com/Molunerfinn/PicGo/releases

官方文档：https://picgo.github.io/PicGo-Doc/zh/guide/config.html#%E5%8F%88%E6%8B%8D%E4%BA%91

笔者个人比较喜欢：PicX

6、持续更新主题版本

执行以下命令：

npm update vuepress-theme-vdoing

7、百度统计

获取百度 id：https://tongji.baidu.com/main/setting/10000597553/home/site/index

8、导航栏右侧添加仓库地址

在 config.js 文件下配置：

        // 导航栏仓库链接设置
        repo: 'https://gitee.com/dream-deeply-tyu/cmty256',
        // 自定义导航栏仓库链接名称
        repoLabel: "Gitee",

注意：是在 themeConfig 里面设置。

9、ssh 连接 github 失败

报错信息：

ssh: connect to host github.com port 22: Connection timed out fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists.

解决方法参考：

SSH：连接到主机github.com端口22：连接时间超时 - 天使阿丽塔 - 博客园 (cnblogs.com)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/461823.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

java线程池基础

java线程池基础

目录 一、线程池基础概念1.1 什么是线程池&#xff1f;1.2 为什么要用线程池&#xff1f;1.3 线程池的工作原理 二、java中的线程池2.1 线程池真正实现类 ThreadPoolExecutor 2.1.2 构造器2.1.3 参数2.1.3.1 workQueue2.1.3.2 threadFactory2.1.3.3 handler 2.2 线程池的使用2.…
阅读更多...
超详细解析：在执行一条SQL语句期间发生了什么？

超详细解析：在执行一条SQL语句期间发生了什么？

目录 前言MySQL的执行流程Server层连接器查询缓存词法分析器预处理优化器执行器 引擎层具体流程为什么需要redologredolog的组成redolog如何提高性能&#xff1f;redo log与binlog区别 总结 前言 我们学习MySQL时&#xff0c;首先第一个接触到的就是SQL语句了&#xff0c;那么…
阅读更多...
MD5算法：密码学中的传奇

MD5算法：密码学中的传奇

title: MD5算法&#xff1a;密码学中的传奇 date: 2024/3/15 20:08:07 updated: 2024/3/15 20:08:07 tags: MD5起源算法原理安全分析优缺点比较技术改进示例代码应用趋势 MD5算法起源&#xff1a; MD5&#xff08;Message Digest Algorithm 5&#xff09;算法是由MIT的计算机…
阅读更多...
Linux之shell条件测试

Linux之shell条件测试

华子目录 用途基本语法格式示例 文件测试参数示例 整数测试作用操作符示例~&#xff1a;检查左侧内容是否匹配右侧的正则表达式 案例分析逻辑操作符符号示例 命令分隔符&>&#xff1a;不管成功与否&#xff0c;都将信息写进黑洞中 用途 为了能够正确处理shell程序运行过…
阅读更多...
django开发流式格式后的在nginx的部署的记录

django开发流式格式后的在nginx的部署的记录

关键记录. django上传代码要导出配置 pip freeze > requirements.txt 这个很关键。后面部署直接读取的 关键记录. django上传代码要导出配置 pip freeze > requirements.txt 这个很关键。后面部署直接读取的 关键记录. django上传代码要导出配置 pip freeze > require…
阅读更多...
Python 基础语法：基本数据类型（字典）

Python 基础语法：基本数据类型（字典）

为什么这个基本的数据类型被称作字典呢&#xff1f;这个是因为字典这种基本数据类型的一些行为和我们日常的查字典过程非常相似。 通过汉语字典查找汉字&#xff0c;首先需要确定这个汉字的首字母&#xff0c;然后再通过这个首字母找到我们所想要的汉字。这个过程其实就代表了…
阅读更多...
Unity的AssetBundle资源运行内存管理的再次深入思考

Unity的AssetBundle资源运行内存管理的再次深入思考

大家好&#xff0c;我是阿赵。   这篇文章我想写了很久&#xff0c;是关于Unity项目使用AssetBundle加载资源时的内存管理的。这篇文章不会分享代码&#xff0c;只是分享思路&#xff0c;思路不一定正确&#xff0c;欢迎讨论。   对于Unity引擎的资源内存管理&#xff0c;我…
阅读更多...
调皮的String及多种玩法(下部)

调皮的String及多种玩法(下部)

&#x1f468;‍&#x1f4bb;作者简介&#xff1a;&#x1f468;&#x1f3fb;‍&#x1f393;告别&#xff0c;今天 &#x1f4d4;高质量专栏 &#xff1a;☕java趣味之旅 欢迎&#x1f64f;点赞&#x1f5e3;️评论&#x1f4e5;收藏&#x1f493;关注 &#x1f496;衷心的希…
阅读更多...
0101插入排序-算法基础-算法导论第三版

0101插入排序-算法基础-算法导论第三版

文章目录 一 插入排序二 循环不变式与插入排序的正确性三 伪代码中的一些约定四 Java代码实现插入排序结语 一 插入排序 输入&#xff1a; n n n个数订单一个序列 ( a 1 , a 2 , ⋯ , a n ) (a_1,a_2,\cdots,a_n) (a1​,a2​,⋯,an​). **输出&#xff1a;**输入序列的一个排…
阅读更多...
【how2j练习题】HTML部分综合练习

【how2j练习题】HTML部分综合练习

练习题 1 <html><h1>英雄联盟 &#xff08;电子竞技类游戏&#xff09;</h1> <p> <strong>《英雄联盟》</strong>&#xff08;简称lol&#xff09;是由美国<i>Riot Games</i>开发&#xff0c;中国大陆地区由腾讯游戏运营的网络…
阅读更多...
openGauss学习笔记-244 openGauss性能调优-SQL调优-典型SQL调优点-统计信息调优

openGauss学习笔记-244 openGauss性能调优-SQL调优-典型SQL调优点-统计信息调优

文章目录 openGauss学习笔记-244 openGauss性能调优-SQL调优-典型SQL调优点-统计信息调优244.1 统计信息调优244.1.1 统计信息调优介绍244.1.2 实例分析&#xff1a;未收集统计信息导致查询性能差 openGauss学习笔记-244 openGauss性能调优-SQL调优-典型SQL调优点-统计信息调优…
阅读更多...
4.10.CVAT——3D对象标注

4.10.CVAT——3D对象标注

文章目录 1. 创建任务2. 3D 任务工作区3.标准 3D 模式 Standard 3D mode4. 用长方体进行注释4.1. 用shapes进行注释4.2. 使用长方体进行跟踪Tracking 使用 3D 注释工具来标记 3D 对象和场景&#xff0c;例如车辆、建筑物、景观等。 1. 创建任务 要创建 3D 任务&#xff0c;您必…
阅读更多...
快速从0-1完成聊天室开发——环信ChatroomUIKit功能详解

快速从0-1完成聊天室开发——环信ChatroomUIKit功能详解

聊天室是当下泛娱乐社交应用中最经典的玩法&#xff0c;通过调用环信的 IM SDK 接口&#xff0c;可以快速创建聊天室。如果想根据自己业务需求对聊天室应用的 UI界面、弹幕消息、礼物打赏系统等进行自定义设计&#xff0c;最高效的方式则是使用环信的 ChatroomUIKit 。 文档地址…
阅读更多...
面试题手撕篇

面试题手撕篇

参考博客 开始之前&#xff0c;理解递归 手写 浅拷贝 function shallow(target){if(target instanceof Array){return [...resObj]}else{return Object.assign({},target);} }手写深拷贝 const _sampleDeepClone target > {// 补全代码return JSON.parse(JSON.stringify…
阅读更多...
mybatis源码阅读系列（一）

mybatis源码阅读系列（一）

源码下载 mybatis 初识mybatis MyBatis 是一个优秀的持久层框架&#xff0c;它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以使用简单的 XML 或注解用于配置和原始映射&#xff0c;将接口和 Java 的…
阅读更多...
UE4_调试工具_绘制调试球体

UE4_调试工具_绘制调试球体

学习笔记&#xff0c;仅供参考&#xff01; 效果&#xff1a; 步骤&#xff1a; 睁开眼睛就是该变量在此蓝图的实例上可公开编辑。 勾选效果&#xff1a;
阅读更多...
【小白刷leetcode】第15题

【小白刷leetcode】第15题

【小白刷leetcode】第15题 动手刷leetcode&#xff0c;正在准备蓝桥&#xff0c;但是本人算法能力一直是硬伤。。。所以做得一直很痛苦。但是不熟练的事情像练吉他一样&#xff0c;就需要慢速&#xff0c;多练。 题目描述 看这个题目&#xff0c;说实在看的不是很懂。索性我们直…
阅读更多...
GUROBI建模之非线性约束的处理

GUROBI建模之非线性约束的处理

官方文档 目录 官方文档&#xff1a;GRBModel.AddGenConstrXxx() - Gurobi Optimization 数学规划的约束类型 基本约束(fundamental constraints)&#xff1a; 通用约束(general constraints): 1. GUROBI求解器有针对这类约束的函数&#xff0c;直接调用这类函数即可 2.…
阅读更多...
Python-GIS分析之地理数据空间聚类

Python-GIS分析之地理数据空间聚类

地理空间数据聚类是空间分析和地理信息系统（GIS）领域的一项关键技术。这种方法对于理解地理数据固有的空间模式和结构、促进城市规划、环境管理、交通和公共卫生等各个领域的决策过程至关重要。本文探讨了地理空间数据聚类的概念、方法、应用、挑战和未来方向。 当模式出现…
阅读更多...
音频切割如何操作？剪辑音乐入门教程

音频切割如何操作？剪辑音乐入门教程

随着数字音乐时代的来临&#xff0c;音频编辑和音乐剪辑成为了越来越多人的必备技能。无论是想要制作个人音乐作品&#xff0c;还是想要为视频添加背景音乐&#xff0c;了解如何切割和剪辑音频都是非常重要的。本文将为你提供一份音频切割和音乐剪辑的入门教程&#xff0c;帮助…
阅读更多...
最新文章

Copyright @ 2022~2023