个人博客网站开发笔记3

news2024/11/18 23:42:38

文章目录

  • 前言
  • p4 Front Matter
  • p5 配置文件
  • p6 命令
  • p7 部署
  • 新的教学视频
  • 部署博客到```github```
  • 找视频教程也是一个技能
  • 详细步骤
    • 安装主题
    • 安装渲染器
    • 修改主题
    • 创建gitub仓库
    • 生成密钥
    • 验证密钥是否匹配
    • 修改config文件
    • 推送到github

前言

主要是安装啥的比较费劲
现在已经比较简单了感觉

之后估计就是学一下命令行操作,然后部署一下,设置一下域名,自己选一下模板,就可以了

和自己配眼镜有点儿像,就是选配置呗,以后有机会准备做一个近视眼手术,不想一直戴着眼镜

p4 Front Matter

大概的意思是配置文件

在这里插入图片描述
红框里面的就是配置文件

配置文件使用的是yaml语法规则,link,但是有点搞笑哈哈,这个官网比较简陋,就是一个界面
在这里插入图片描述

插件需要使用这部分来进行配置,自己单独使用的时候其实是不多的,注意写语法的时候要空格,不然是会发生一些错误的
在这里插入图片描述

这些地方都是有空格的

p5 配置文件

前面是配置文件,这个也是配置文件,这个是啥意思呢

定制个性化的网站需要了解如何玩转配置文件,我肯定是要定制个性化的网站的

我的这些文件我不知道怎么同时打开,只能在文件夹里面寻找,哦在vscode里面打开文件夹就好了

在这里插入图片描述
这个文件就是我们需要的配置文件

我是因为学习htmlcss下载安装了vscode,也进行了一些配置,但是只能运行htmlcss的文件,其他类型的文件,因为我,没有配置好,基本不能使用

我没有找到自己文件里面的主题配置文件,只有网站配置文件,也就是前面截图的那个文件,有点慌,害怕出现什么错误

在这里插入图片描述
最后面可以用一个这样的域名,我非常满意

在这里插入图片描述
我现在自己的csdn博客,其实也有一个域名,哦原来在这里,我还没有进行设置
在这里插入图片描述
我设置成这样子,感觉非常可以
在这里插入图片描述
另外因为自己写博客比较多才有这个权限,需要博客等级6级才可以设置属于自己的域名,我感觉真的挺好的,csdn会员还可以设置自己的个性化板块,等我的排名到全站前100,我就给自己充值一个csdn会员

官网的配置文件的说明文档非常多,有点难受

url表示的意思是网址

文章的id不是恒定的,在进行一些特定的操作之后,id会发生改变,所以可以考虑使用这个插件
在这里插入图片描述
link
这个是github里面的一个项目,这里面有一些使用和安装说明,但是我其实不太敢用,怕出问题,等自己比较熟练的时候,再去使用这个,目前貌似对这个文章id没啥需求

大部分都是不动,默认配置就可以了

其实我还是觉得这个东西挺厉害的,这么多东西,非常庞大的一个工程

教程总共是七个视频,希望跟着教程做下来,自己可以实现一个属于自己的博客网站

现在是第五个教程视频了

主题配置文件的优先级要高于网站配置文件

p6 命令

这个可能是用来管理自己的网站需要进行的一些设置

类似于网站的admin的状态

这个是在命令行进行一些操作

输入

hexo g -w

用来监控文件变动,其实也看不懂是干啥
在这里插入图片描述

我们在本地修改文件,并保存,就会出现下面的界面
在这里插入图片描述

输入

hexo list post

显示下面的界面,大概就是文章列表的意思
在这里插入图片描述

输入hexo route
在这里插入图片描述
可以发现把所有的命令和对应的功能都列出来了
输入hexo list route,可以看到网站一个详细的列表
在这里插入图片描述
输入hexo version,表示查询hexo的版本
在这里插入图片描述
输入hexo g --debug,会产生一堆的debug信息
在这里插入图片描述
我按照操作没有在直接显示的文件里面找到debug信息,我感觉有点儿奇怪,难道存在其他文件夹下面了吗

在这里插入图片描述
搜了一下,压根就没有这个文件,有点无奈

p7 部署

输入

install hexo-deployer-git --save

安装一个东西
在这里插入图片描述

输入npm list hexo-deployer-git
在这里插入图片描述
视频里面博主复制了一个他自己的链接,我手敲出来使用不了,相当于是卡在这一步了

我再搜一下怎么部署,看一下还有没有教学视频,不行的话就去看文档来进行部署

新的教学视频

油管:快速使用 Hexo 搭建个人博客 #001 - Hexo 框架介绍
确确实实自己还差一点儿,先学一下这个教程的部署,再看要不要学这个教程的其他部分

部署博客到github

pages
这个链接是github提供的,可以为自己的github项目生成一个静态的网站的这样一个东西,类似于服务器

使用这个搭建博客的优点是,不需要自己付费购买域名

在这里插入图片描述
貌似可以直接部署到服务器上面

没学会怎么部署

找视频教程也是一个技能

油管:如何创建一个hexo的静态博客,免费部署在github上面,或者vercel容器里面,可以自定义域名,可以国内外访问,速度超快,超级稳定,个人博客首选

这个教程是一个宝藏呀,貌似可以直接公网访问,但是域名和自己的github用户名一样,我准备重新创建一个github账号,这样域名更好一些

在这里插入图片描述

破防了,我真是真人呀

博客链接:这个是教程里面用到的命令

之前的努力不算白费,一些基础的东西,我算是安装好了

详细步骤

我输入了下面的命令,和视频对照了一下,貌似是报错了

npm config set registry https://registry.npm.taobao.org
npm install -g hexo-cli
hexo init  三冬四夏会不会有点漫长

在这里插入图片描述

现在貌似更奇怪,我以为是因为中文根目录的原因,我重新建了一个文件夹,但是现在命令行直接不动了
在这里插入图片描述
在这里插入图片描述

原来是需要等待一下,这个报错信息的意思是我之前安装过这个文件了,就是之前跟着之前那个教程安装的,把之前安装的这个删掉是不是就可以了

等下,我看错意思了,意思是证书过期了

在这里插入图片描述

现在我之前配置的文件里面反正有这个文件了,等下,我想到一件事情,是不是我把我的文件上传到github,然后按照最开始的教程的步骤,就可以部署成功,但是最后也没看到成功上线,我还是按照这个视频,只是从public这个文件夹开始操作

在这里插入图片描述

哈哈哈,我非常激动,创建成功了

我在之前创建的test文件那里选择git bash打开,然后输入hexo init 三冬四夏会不会有点漫长,就创建好了这样一个文件夹,文件夹里面还有一堆的文件

现在继续操作

在这里插入图片描述

现在自己的博客排名到了3000多,,非常开心,希望有一天可以到前100

在这里插入图片描述
我打开在“三冬四夏会不会有点漫长”这个目录下面打开git bash,输入

hexo g 
hexo s

然后复制链接到浏览器运行,出现错误,我现在重新在test目录下面运行这个命令

在命令行复制粘贴不方便使用快捷键,直接用鼠标操作就好,显示正常,我再接着往下学习
在这里插入图片描述

安装主题

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

test目录打开git bash,输入上面的命令安装一个主题
在这里插入图片描述
themes文件夹里面现在多了一个butterfly主题
在这里插入图片描述

安装渲染器

npm install hexo-renderer-pug hexo-renderer-stylus --save

修改主题

教程里面安装了notepad,我好像直接用vscode也是一样的,有需要再安装吧,反正是起到一个编辑器的功能

我在config.yml文件里面把theme修改为butterfly,保存,然后使用

hexo clean && hexo g
hexo s

在这里插入图片描述
出现这个样子,貌似没有问题,但是刷新浏览器链接,我傻了,出现的是这样
在这里插入图片描述

Hexo启动页面显示extends includes/layout.pug block content include includes/recent-posts.pug include
谷歌一下就找到解决办法了,我试试
在这里插入图片描述
处理之后变成这样,也不对劲呀

会不会是需要等待一会儿,我重新输入命令,然后等待一会儿

在这里插入图片描述
输入这些命令,git bash没有任何反应,有点无奈

npm install hexo-renderer-pug hexo-renderer-stylus --save

网上说输入这行命令就可以解决,但是我这边明显没有解决

现在自己继续在网上寻找解决办法,复制这个报错信息,去搜索

出现的问题是这个

extends includes/layout.pug block content include ./includes/mixins/post-ui.pug #recent-posts.recent-posts +postUI include includes/pagination.pug

在这里插入图片描述
我在别人的博客的评论区进行了提问

出现这个报错,好像是一个什么证书过期,搜了一下,要删掉一些文件,再重新下载回来,比较复杂,我担心出现什么奇怪的错误,算了,我先用原来的那个landscape,先把这个博客跑通再说

现在可以正常显示,之后再修改主题就好了

A brand new default theme for Hexo.
在这里插入图片描述
我把油管调成中文模式,舒服多了

创建gitub仓库

在这里插入图片描述
把名称按照这个格式设置,就是用户名+.github.io

生成密钥

 git config --global user.name "你的GitHub用户名"

在这里插入图片描述

ssh-keygen -t rsa -C "你注册github的邮箱"

自己的邮箱貌似暴露了,不过好像没啥事
在这里插入图片描述

ssh-keygen -t rsa -C "你注册github的邮箱"

在这里插入图片描述

多次点击enter,出现下面的界面
在这里插入图片描述

找到刚刚创建的.ssh密钥文件
在这里插入图片描述
用记事本打开这个文件,视频里面用的是notepad这个软件打开的,应该没啥影响
在这里插入图片描述
然后把密钥粘贴到github里面

验证密钥是否匹配

出现shell access表示匹配
在这里插入图片描述
我需要复制的命令啥的都在这个文档里面:如何创建一个hexo的静态博客,免费部署在github上面,或者vercel容器里面,可以自定义域名,可以国内外访问,速度超快,超级稳定,个人博客首选

修改config文件

在这里插入图片描述

推送到github

npm install hexo-deployer-git --save

在这里插入图片描述
我破防了,貌似就差最后一步,现在又是这个证书过期的报错

npm ERR! code CERT_HAS_EXPIRED
npm ERR! errno CERT_HAS_EXPIRED
npm ERR! request to https://registry.npm.taobao.org/hexo-deployer-git failed, reason: certificate has expired
npm ERR! A complete log of this run can be found in: C:\Users\86136\AppData\Local\npm-cache_logs\2024-05-21T02_14_58_555Z-debug-0.log

谷歌出来的社区是stackoverflow,好像之前看到y 总也是用到了这个网站

我刚刚把c盘的npm文件删除了,现在重新安装这个文件

在这里插入图片描述
在这里插入图片描述
解决办法:前面的那个错误,貌似删除文件,就可以解决

然后继续按照文档操作

我都到最后一步了,但是又出现了一个错误

Error: Spawn failed
at ChildProcess. (C:\Users\86136\test\node_modules\hexo-deployer-git\node_modules\hexo-util\lib\spawn.js:51:21)
at ChildProcess.emit (node:events:519:28)
at cp.emit (C:\Users\86136\test\node_modules\cross-spawn\lib\enoent.js:34:29)

挺奇怪的,我准备参考官方文档看一下能不能行
官方文档

在尝试之前,我再试一遍视频的命令

卧槽!!!貌似可以了!!!
在这里插入图片描述
博客地址

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

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

相关文章

动手学深度学习23 LeNet

动手学深度学习23 LeNet 1. LeNet2. 代码3. QA 1. LeNet 两层卷积两层池化两层全连接 卷积就是让每一层shape不断压缩变小【高宽减少】,通道数增多,把特征信息放到不同的通道里面。每一个通道认为是一个模式。然后再做全连接的输入。 2. 代码 impor…

面经记录【面试准备】

面经记录【面试准备】 前言版权面经【Java每日一题】Http协议和RPC协议有什么区别?【Java每日一题】什么是微服务,说一下你对微服务的理解Java面试题:应用的线程数应该设置成多少【Java面试】说一下HashMap的put方法字节二面:MySQ…

打印机里失败的任务删不掉的解决办法 斑马打印机更新电脑驱动和升级打印机固件 提示ribbon out 并黄状态亮+黄供应闪

强删打印任务 WinR services.msc 停止服务 Print spooler C:\Windows\System32\spool\PRINTERS 清空文件夹下所有文件 详细 要删除打印机里失败的任务,可以按照以下步骤操作: 停止打印服务:您需要停止Windows系统中的“Print Spooler”服…

【WEEK13】 【DAY4】Shiro Part 4【English Version】

2024.5.23 Thursday Continued from 【WEEK13】 【DAY3】Shiro Part 3【English Version】 Contents 15.6. Integrate Shiro with MyBatis15.6.1. Modify pom.xml15.6.2. Create application.yaml15.6.3. Connect to the database15.6.4. Modify application.properties15.6.5.…

集合的交集、并集和差集运算

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 集合最常用的操作就是进行交集、并集、差集和对称差集运算。进行交集运算时使用“&”符号,进行并集运算时使用“|”符号&…

redis--哨兵

概念 哨兵(Sentinel) 是一个分布式系统,可以在一个架构中运行多个哨兵(sentinel) 进程,这些进程使用流言协议(gossip protocols)来接收关于Master主服务器是否下线的信息,并使用投票协议(Agreement Protocols)来决定是否执行自动故障迁移,以…

力扣:15. 三数之和

15. 三数之和 给你一个整数数组 nums ,判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k ,同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意:答案中不可以包含重复的三…

OpenHarmony迎来首个互联网技术统一标准,鸿蒙OS生态走向如何?

开源三年半,OpenHarmony(以下简称“开源鸿蒙”)迎来了新进展。在5月25日召开的「OpenHarmony开发者大会」上,鸿蒙官宣了开源鸿蒙设备统一互联技术标准。 一直以来,各行业品牌操作系统相互独立、难以协同,成为其互联互通的痛点。为进一步解决…

【官方指南】3ds Max中纹理贴图问题及正确解决方案

在使用3ds Max进行设计和制作时,纹理贴图是一个非常重要的环节。然而,许多用户在使用过程中常会遇到各种纹理贴图问题。为此,Autodesk官方提供了一些有效的解决方案,可以解决90%的纹理贴图难题。这里小编都帮大家整理好了&#xf…

剪画小程序:”霸屏各大平台“的黏土滤镜是怎么制作的呢?

最近,网上出现大量“黏土”风格的人物照片。尤其是在社交平台,这类型的分享数量急剧上升。 这是马斯克开车的样子 还有这张是周杰伦七里香的专辑图片 一张照片,十几秒钟,就能还原出你在黏土世界的样子。 以上这些照片是用-【剪画…

基于微信小程序实现的【二手物品交易平台】后端 JAVA Springboot (内附设计LW + PPT+ 源码+ 演示视频 下载)

项目名称 项目名称: 基于微信小程序的二手物品交易平台 项目技术栈 该项目采用了以下核心技术栈: 后端框架/库: Java, SSM框架数据库: MySQL前端技术: 微信小程序技术其他相关技术: HTML, MyEclipse开发…

Ant Design Vue Pro流程分析记录

一、基本介绍 Ant Design Vue Pro提供了一套完整的解决方案,包括路由、状态管理、UI组件库、HTTP请求封装等,方便开发者快速搭建和维护企业级应用。 二、官网地址 Ant Design Pro of Vue 三、下载及安装 推荐使用Yarn 四、文件分布及说明 dist&#xf…

文件上传巩固及流量分析

1.[GXYCTF2019]BabyUpload 1)打开题目也是没有任何提示, 2)进入环境,看到下面页面猜测是文件上传漏洞,下面开始传文件 3)首先上传一句话木马 a.php,代码如下: 下面这个代码中并没有…

pinia持久化未生效

pinia官方文档 https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/ pinia持久化未生效的原因很有可能就是在main.js中重复创建了pinia,导致持久化未生效

基于jeecgboot-vue3的Flowable增加表单功能(一)

因为这个项目license问题无法开源,更多技术支持与服务请加入我的知识星球。 1、通过online表单设计进行,生成代码 主要注意2点,1个是查询需要选择哪些字段,同时创建人员需要选择用户选择 这里,SysForm增加下面的一个注…

反射、类加载、静态代理,jdk动态代理,cglib代理

一、 反射 反射是在程序运行状态下,动态获取类的结构(属性,构造器,方法,注解),动态的创建类对象然后调用类中的属性方法。反射的起源Class,Class中包含类反射要使用的API 获取Class的…

AI 前沿发展摘要

🔔 AI 前沿发展摘要 1⃣️ ChatScene: 一句话生成自动驾驶关键场景 主要功能: Chat Scene 能够在CARLA仿真环境中创建多样化和复杂的场景, 有效地弥合了交通场景文本描述和CARLA实际仿真之间的鸿沟 效果: 通过使用生成的安全关键场景来微调不同的基于RL的自动驾…

艾体宝干货 | 教程:使用ntopng和nProbe监控网络流量

本教程旨在分享如何通过 ntopng 和 nProbe 这两款工具,深入了解和掌握网络流量监控的艺术。我们将提供从基本概念到高级应用的全面指导,涵盖了在多种平台和设备上的部署和配置步骤。不论您是专业人员还是技术爱好者,跟随本教程,都…

『香橙派』基于Orange Pi AIpro打造高效个人云存储解决方案

📣读完这篇文章里你能收获到 了解Orange Pi AIpro硬件优势,为构建高效云存储基础设施的理想平台。学会使用Orange Pi AIpro硬件平台,搭载Ubuntu Server系统,打造云存储环境。掌握利用Kodbox软件,享受文件管理、多格式…

如何将 Langfuse 链接到自有 PostgreSQL 数据库并升级 PostgreSQL 版本

在本文中,我们将介绍如何将 Langfuse 应用程序链接到自有的 PostgreSQL 数据库,并升级 PostgreSQL 以支持 jsonb 类型。 前提条件 运行 CentOS 7 的服务器已安装的 PostgreSQL 9.2 或更低版本需要将 Langfuse 连接到自有数据库,并升级 PostgreSQL 以支持 jsonb 类型1. 将 La…