vuepress-theme-vdoing博客搭建教程

news2024/12/23 20:56:58

搭建流程

前言

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

一、主题介绍

本博客使用的主题为：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)

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

力扣趣味题：找不同

力扣趣味题：找不同

经典面向样例编程 char findTheDifference(char* s, char* t) {if(sNULL){return t[0];}for(int x0;x<strlen(s);x){for(int y0;y<strlen(t);y){if(s[x]t[y]){t[y]1;break;}}}for(int x0;x<strlen(t);x){if(t[x]!1){return t[x];}}return NULL; }
阅读更多...
银发经济@315：消费、陷阱与孤独的老人

银发经济@315：消费、陷阱与孤独的老人

【潮汐商业评论/文】 又是一年315。 这一天&#xff0c;从品牌到消费者&#xff0c;从线下到网络&#xff0c;都不约而同地将目光锁定在大众消费生活和与其相伴的消费“陷阱”上。 这其中&#xff0c;作为“有闲又有钱”且与社会经济发展速度相对有一定“代沟”的老年消费者群…
阅读更多...
新加坡大带宽服务器托管优势

新加坡大带宽服务器托管优势

在数字化快速发展的今天&#xff0c;服务器托管成为企业拓展业务、提高服务质量的关键环节。而新加坡作为一个国际性的金融、贸易和科技创新中心&#xff0c;其大带宽服务器托管服务在全球范围内享有盛誉。本文将为您科普新加坡大带宽服务器托管的诸多优势。 首先&#xff0c;新…
阅读更多...
AXI CANFD MicroBlaze 测试笔记

AXI CANFD MicroBlaze 测试笔记

文章目录 前言测试用的硬件连接Vivado 配置Vitis MicroBlaze CANFD 代码测试代码测试截图Github Link 前言 官网: CAN with Flexible Data Rate (CAN FD) (xilinx.com) 特征: 支持8Mb/s的CANFD多达 3 个数据位发送器延迟补偿(TDC, transmitter delay compensation)32-deep T…
阅读更多...
VS Code上,QT基于cmake，qmake的构建方法（非常详细）

VS Code上,QT基于cmake，qmake的构建方法（非常详细）

VS Code上,QT基于cmake&#xff0c;qmake的构建方法 1 前言2 QT基于cmake的构建方法2.1 VS Code关键插件安装2.2 系统环境变量配置2.3 VS Code中&#xff0c;环境变量配置2.4 Cmake新建一个新的Porject 3 QT基于qmake的构建方法 1 前言 最近&#xff0c;由于认证了github的学生…
阅读更多...
RabbitMQ学习总结-延迟消息

RabbitMQ学习总结-延迟消息

1.死信交换机 一致不被消费的信息/过期的信息/被标记nack/reject的信息&#xff0c;这些消息都可以进入死信交换机&#xff0c;但是首先要配置的有私信交换机。私信交换机可以再RabbitMQ的客户端上选定配置-dead-letter-exchange。 2.延迟消息 像我们买车票&#xff0c;外卖…
阅读更多...
PHP 生成图片

PHP 生成图片

1.先确认是否有GD库 echo phpinfo(); // 创建一个真彩色图像 $image imagecreatetruecolor(120, 50);// 分配颜色 $bgColor imagecolorallocate($image, 255, 255, 255); // 白色背景 $textColor imagecolorallocate($image, 230, 230, 230); // 黑色文字// 填充背景 image…
阅读更多...
MyFileServer

MyFileServer

靶场下载地址 https://download.vulnhub.com/myfileserver/My_file_server_1.ova 信息收集 # nmap -sn 192.168.56.0/24 -oN live.nmap Starting Nmap 7.94 ( https://nmap.org ) at 2024-02-24 22:07 CST Nmap scan report for 192.168.56.2 (192.168.56.2) Host is up (0.…
阅读更多...
Java学习笔记（13）

Java学习笔记（13）

阶段项目 拼图小游戏 JFrame JMenuBar JMenu JMenuItem 用add方法添加到不同的对象中 添加图片 先创建一个图片ImageIcon的对象&#xff0c;写入图片的路径 再创建JLabel管理容器对象&#xff0c;把图片放到这个容器中&#xff0c;再把容器添加到界面 界面坐标位置 改变图…
阅读更多...
nmcli --help（nmcli -h）nmcli文档、nmcli手册

nmcli --help（nmcli -h）nmcli文档、nmcli手册

文章目录 nmcli --helpOPTION解释OBJECT解释1. g[eneral]&#xff1a;查看NetworkManager的状态2. n[etworking]&#xff1a;启用或禁用网络3. r[adio]&#xff1a;查看无线电状态&#xff08;例如&#xff0c;Wi-Fi&#xff09;4. c[onnection]&#xff1a;列出所有的网络连接…
阅读更多...
openwrt下部署clouddrive2

openwrt下部署clouddrive2

在启动项上增加启动参数 在exit 0前面增加 mount --make-shared /mnt/data480g注意&#xff0c;后面的/mnt/data480g要替换成你设置的共享映射券。 拉取镜像 docker pull cloudnas/clouddrive2启动镜像 一定要用ssh在后台用docker run命令启动&#xff0c;因为openwrt前台…
阅读更多...
AI技术崛起：数据可视化之路更近

AI技术崛起：数据可视化之路更近

在当今AI技术蓬勃发展的时代&#xff0c;数据可视化作为信息传达的重要手段&#xff0c;其门槛逐渐降低。然而&#xff0c;这并不意味着我们可以忽视学习数据可视化的重要性。即使不需要深入专业技术&#xff0c;对数据可视化的基础知识的了解也是至关重要的。那么&#xff0c;…
阅读更多...
恢复u盘数据时可以关机吗？深入解析与操作建议

恢复u盘数据时可以关机吗？深入解析与操作建议

随着科技的飞速发展&#xff0c;U盘已成为我们日常生活中不可或缺的数据存储设备。然而&#xff0c;当U盘中的数据遭遇丢失或损坏时&#xff0c;如何安全有效地恢复数据成为了一个重要的问题。在这个过程中&#xff0c;许多用户可能会疑惑&#xff1a;恢复u盘数据时可以关机吗&…
阅读更多...
基于matlab使用 fmincon 函数来进行有约束条件的最小化问题求解

基于matlab使用 fmincon 函数来进行有约束条件的最小化问题求解

一、一般步骤 生成带有噪声的正态分布数据&#xff1b;定义拟合模型。 model (params, x) normpdf(x, params(1), params(2)); 初始参数猜测 initial_guess [mu, sigma]; 设置约束条件 lb [0, 0]; % 参数的最小值 ub [10, 10]; % 参数的最大值 定义优化问题 opts …
阅读更多...
Android studio SDK Manager显示不全的问题解决

Android studio SDK Manager显示不全的问题解决

发现SDK Manager中只显示已下载的SDK版本&#xff0c;想下载其他版本下载不到&#xff0c;尝试翻墙也没用&#xff0c;修改host文件成功 在多个地点Ping服务器,网站测速 - 站长工具 输入dl.google.com&#xff0c;进行ping检测。 选择一个地址&#xff0c;比如180.163.150.1…
阅读更多...
Docker使用(三)Docker底层分析

Docker使用(三)Docker底层分析

Docker使用(三)Docker底层分析 四、底层分析 1、Docker镜像原理 1.1 commit镜像 docker commit 提交容器成为一个新的副本 # 命令和git原理类似 docker commit -m“提交的描述信息” -a“作者” 容器id 目标镜像名:[TAG] 实操&#xff1a; # 1、启动一个默认tomcat # …
阅读更多...
【并查集】模版

【并查集】模版

【模板】并查集 - 洛谷 #include <bits/stdc.h> using namespace std; const int N2e59; int a[N]; int Find(int x) {if(xa[x]){return x;}else{a[x]Find(a[x]);return a[x];} } void push(int x,int y) {a[Find(x)]Find(y);return ; } int main() {int n,m; cin>>…
阅读更多...
kubernetes部署集群

kubernetes部署集群

kubernetes部署集群 集群部署获取镜像安装docker[集群]阿里仓库下载[集群]集群部署[集群]集群环境配置[集群]关闭系统Swap[集群]安装Kubeadm包[集群]配置启动kubelet[集群]配置master节点[master]配置使用网络插件[master]node加入集群[node]后续检查[master]测试集群 集群部署…
阅读更多...
【C语言进阶篇】数据在内存中的存储

【C语言进阶篇】数据在内存中的存储

目录 1.大小端字节序和字节序判断 2.浮点数在内存中的存储与读取 2.1 浮点数在内存中的存储 2.2 浮点数在内存中的读取 在前面的学习中&#xff0c;我们知道内存被划分为一个个小的内存单元&#xff0c;数据就是存储在这些内存单元中的。那么&#xff0c;具体是如何存储的&am…
阅读更多...
ADC 架构 IV ：Σ-Δ 型 ADC 高级概念和应用

ADC 架构 IV ：Σ-Δ 型 ADC 高级概念和应用

目录 简介 高阶环路考量 数字滤波器对多路复用应用的意义 多级噪声整形 (MASH) Σ-Δ 转换器 总结 简介 上节已论述了 Σ-Δ 型 ADC 的基本原理。本教程将介绍一些更高级的概念&#xff0c;包括 空闲音、多位 Σ-Δ、MASH、带通 Σ-Δ&#xff0c;并提出一些示例应用。 简…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023