艾雪周刊 V.09—网站从0到1纯小白零基础教程

本文字数:21542  阅读时长:43分钟

访问量 0

AI摘要

关于本刊

这是艾雪期刊的第 09 期,作为一个独立系列进行更新,更新时间在周末,主要内容为周内内容汇集以及碎碎念,有时会分享一些有趣的项目,有时是一些生活的碎碎念

周刊地址:AIOVTUE-雪—艾雪周刊
RSS订阅:艾雪周刊
邮件订阅:艾雪周刊
微信公众号:AIOVTUE-雪
私信:任意前缀@yybb.us

博客推荐

本期推荐的博客是!铭心の博客,这是雪在友链的友链的友链看到的,就是这么朴实无华,好吧,其实是开往随机太随机了,之所以选这个站点呢,是因为在这里发现了一个很有意思的东西,他搞了一个成就系统,看了一下作者的文章,是想将博客打造成一场游戏的样子,不得不说,想法很新颖

点我访问—铭心の博客

进站第一件事,看页脚,居然是基于wordpress的,完全没想到啊,因为在雪的印象里wordpress一直是和卡顿联系在一块的,但是这个完全没感觉到,这配置,应该很高吧,其实一开始看这个ui和布局,雪觉得是butterfly来着,和这个长的差不多,并且他的魔改版本真的太多了,站点整体是偏紫色的配色,左下角的看板娘简支就是为网站量身定制的,随后是去友链页面逛了一下,他这个友链,有个小巧思,选中之后头像会转圈圈,这个设计还蛮可爱的,比起哪些一动不动的会灵动很多,站点还有一个展示软件推荐的页面,雪其实也一直想搞一个来着,但是一直在构思ui,他这个就很简单,一路平铺,雪感觉还是差点意思,站点开着樱花特效,一直在飘落,文章列表和详情页就和大部分博客一样,雪感觉最有意思的还是右下角的成就和等级系统,会有一些小任务,完成之后就会有成就,还可以升级,这个创意挺不错,雪也行弄一个,但是静态的话,数据嘛,有时间思考一下吧~

本文简介

本文纯为零基础小白打造,旨在为从未部署和了解过网站的小伙伴普及知识,并且拥有一个简单的属于自己的网站,好吧,是雪的朋友对网站有兴趣,问雪怎么弄的,突然发现没有详细的教程,也懒得一部分一部分找,说实话,这样看起来也麻烦,电脑开一堆网页,索性直接写一篇咯,本文内容会比较长,涵盖的东西比较多,由于是临时觉定的,源本已经写到一半的周刊内容会放在下一期,本文后续应该还会不断更新,雪希望将他做成一篇全面且完善的小白入门教程,顺便也回顾一下来时的路~

正文开始啦

域名

搭建网站第一步绝对是认识域名,什么是域名,就是你平时访问网站在地址栏输入的那一串字符,例如baidu.comgoogle.com等,这里的baidu.comgoogle.com就是百度和谷歌的域名,像这种某某.com某某.cn某某.us等就是一级域名,这部分通常是需要购买的,例如本站的yybb.us,购买之后这个后缀就是雪的了,如何可以在前面加任何前缀,例如daily.yybb.usday.yybb.ussuibian.yybb.us,甚至是a.a.ybb.us,理论上前面加上面都可以,并且可以加很多级,可以说有一个域名就有了无数个域名

同样的,由于域名的这个性质,就有一些公益站点提供免费的域名,这种域名通常是这样的某某.us.kg某某.us.ci等,看出区别了吗,就是原本的一级域名的变成二级域名的后缀了,大家获取之后就会是这样的aiovtue.us.kg,当然你拥有这个之后也可以在前面增加各种前缀,变成例如daily.aiovtue.us.kg,能看出区别吗,这就是大部分的免费域名,也叫做二级域名,不过能用就行,其中一部分二级域名可以托管到cloudflare,至于什么是cloudflare,接着往下看吧

Cloudflare

什么是cloudflare,新手只需要知道,cloudflare是一个可以托管域名的平台,之前不是说域名可以加很多前缀吗,那么怎么加,在哪里加,就是在这里,首先注册一个账户,跟着步骤注册一下吧 首先点击链接前往cloudflare官网,点我跳转cloudflare注册地址,进入站点后可以在右上角切换中文,注册的时候没什么特别要求,邮箱可以使用qq邮箱,就是把密码记住就完了,跟着步骤操作吧

  • 开始注册Cloudflare账号

输入邮箱、密码,邮箱国内外均可(建议qq邮箱);密码需要满足以下条件 image.png

  • 激活cloudflare账号

在注册绑定的邮箱中会收到以下邮件,点击邮件链接将账号激活 image.png

到这里验证完链接就可以正常使用啦,下面介绍一下怎么添加域名吧

添加域名

  • 第一阶段:在 Cloudflare 添加你的域名

添加域名, 打开 Cloudflare 后台,点击左侧边栏的域名-概览,在这个页面的右上角点击添加域名 然后会出现这个界面,点击链接域名即可,点击之后再接下来的页面输入你的域名,即你要添加的域名,例如yybb.us

需要注意前面不需要加 www 或者 http://,直接填根域名就行,别填错了否则绑定不上去。

接下来是套餐选择,如果你有钱可以考虑Pro或者其他套餐,但是其实免费的free套餐就够用了,小白就直接选择free选项就行

检查 DNS 记录,这里有一个点要注意,CF托管域名的时候会自动扫描你域名现有的 DNS 记录,大家新注册的或者一些免费域名,基本是这里就是空的,直接点击继续就行,就算扫到了也没关系,后面也可以删除的,点继续就行

获取NS记录 (最主要的一部),是最核心的步骤。cloudflare会给出两个ns地址,比如图中的 bob.ns.cloudflare.com 和 cass.ns.cloudflare.com,不同账号或者添加不同域名的时候给的地址会不一样,实际要以你电脑上显示的为准,先将这俩地址复制下来,并且不要关闭网页,后面还会用到

  • 第二阶段:修改NS记录

什么是NS,在哪里修改NS,首先NS就是给域名添加一个指向记录,添加位置通常在购买域名的地方,或者是在获取免费域名的地方,写的很明显,就叫修改NS,具体的要根据对应的站点去搜索,这里拿后面会用到的免费域名演示怎么修改 首先打开对应的域名网站,其他平台原理都差不多,会写着DNS服务器,或者ns地址这种,还是比较明显的 在弹出来的弹窗中输入刚才复制的两个地址(比如示例的bob.ns.cloudflare.com 和 cass.ns.cloudflare.com),在这个地方,一行一个,写上去点击保存就行 这边保存完之后,回到cloudflare刚才让你们不要关闭的页面,此时可以点继续按钮了,一般这个操作是会需要几分钟甚至十几分钟的时间同步的,cloudflare那边加载好了也会给你发邮件提醒,当然你着急可可以点击页面上有一个立即检查名称服务器的按钮,这个就是触发检查的,点个一两次就行,一般不会很久的

域名解析

解析介绍

添加完域名后,要想让对应的域名地址访问对应的网站,就需要添加解析,那么各个解析是什么意思,怎么添加和管理呢,首先将什么是域名解析: 一开始在互联网上,所有的地址都是IP地址(例如 110.242.68.3 ,这个就是百度的地址,丢在浏览器访问栏就能跳转百度),但是由于这些IP地址太难记了,所以就出现了域名(比如 https://daily.yybb.us )而域名解析就是让这个域名和ip地址对应,你访问域名就等同于你在访问ip地址,你可能觉得ip地址和域名没啥区别,也不是很长对吧,但要直到,ip地址分为ipv4和ipv6,这是一个ipv4地址110.242.68.3,这是一个ipv6的2409:8089:1020:5010:1000::12,还觉得没必要么,抛开这些不谈,要是你有很多个网站,就得每个网站记一个ip地址,而有了域名的话,只需要加一个前缀就行,是不是一下就能理解域名的用处啦 域名的管理组织及机构: 域名使用的时候,会先在DNS(也就是域名解析服务器)访问一遍,看一下是解析在哪里的,如何访问对应的地址,然后才能在浏览器打开网站,而这必备的域名解析服务商当然就是前文介绍的cloudflare啦 下面介绍一些常见的域名解析类型:

  • A:把域名指向一个 IPv4 地址,例如 example.com → 1.2.3.4,最常用于网站访问。
  • AAAA:把域名指向一个 IPv6 地址,作用和 A 记录类似,只是使用 IPv6。
  • CNAME:把一个域名指向另一个域名,例如 www.example.com → example.com,常用于 CDN、第三方服务等。
  • MX:指定这个域名的邮件服务器,决定发送到 xxx@example.com 的邮件应该交给哪台服务器。
  • TXT:给域名添加一段文本信息,常用于域名验证以及 SPF、DKIM、DMARC 等邮件安全配置。
  • NS:指定负责这个域名解析的DNS 服务器,相当于告诉互联网“这个域名的解析信息去哪里查询”。
解析教学

下面是使用cloudflare添加域名解析步骤,跟着一起看看吧

  • 添加 A 记录

假设你的服务器 IP 地址是 10.0.0.1,你想让 yybb.us 这个域名来访问他,就需要添加A记录,首先点击添加1记录,选择类型A,名称填写@,这个就是代表只使用yybb.us这部分,如果要加前缀,例如想变成a.yybb.us,就填a,能理解吧,ipv4地址那里就写你想访问的地址,例如这里的10.0.0.1,然后保存即可 添加A记录

  • 添加 CNAME 记录 (设置 www 子域名)

如果你想和大部分网站一样,让www.yybb.usyybb.us访问的页面是一样的,就需要使用到这个,一样的,点击添加,类型选择CNAME,名称填写www,目标填yybb.us,最后保存就行

  • 重点:橙色云 vs 灰色云

是不是很好奇,为什么每个域名列表后边都有一个云朵图标,还能控制开关,这其实是cloudflare最重要的一个东西

  • 橙色云 (已代理): 当云是橙色时,所有指向这个域名的流量都会先经过 Cloudflare 的全球网络。这意味着你的网站享受到了 CDN 加速、DDoS 防护、免费 SSL 证书等一系列好处。用户的真实 IP 也会被隐藏
  • 灰色云 (仅限 DNS): 当云是灰色时,Cloudflare 只提供 DNS 解析服务,流量会直接打到你的源站服务器,不享受任何加速和保护。这通常用于一些不需要或不能通过代理的记录

对于小白的话,应该暂时用不到这个,先不用开,因为开了之后可能反而访问速度会变慢,等后续熟悉了再来研究吧

Github

搭建网站,github也绝对是离不开的一个部分,什么是github,简单点说就是一个储存代码的地方,不止是网站的代码,各种各样的代码都会在这里,这也是世界上最大的开源项目聚合站点,平时听到的什么各种开源项目基本说的都是发布到github的项目,是不是疑惑这和网站有什么关系,在上面会有很多开源的大佬,发布了自己的站点项目,或者是主题,很多网站拿过来就能用,除此之外,很多部署网站的平台,包括cloudflare,都支持从github导入网站源码,会方便后续的更新和维护,小白必备,可以说,算是真正进入互联网的一个重要标志

Github注册保姆级流程

github访问比较随缘,很可能碰到国内无法访问的情况,这个看运气,大佬都会自备魔法环境的,小白的话先考一下运气吧,实在不行研究一下魔法环境,这个不方便教,可以问问身边的会的朋友~ ,准备后打开官网-点我跳转github注册地址 点击上边的注册地址进入注册页面,然后填写一下基本信息,首先邮箱的话可以使用QQ邮箱,密码自己想一个就行,用户名可以慎重一下,而且需要是英文的,填写无误之后确定就行,这个不难的,看不懂英文的话可以用浏览器的翻译翻译一下 在提交注册之后,github会和大部分网站注册一样,给你的邮箱发送一个验证邮件,就和上面注册cloudflare的时候一样,点击右键里面的确认右键确认一下就可以了,大家注册完之后可以先完善一下个人信息哦,例如头像上面的,当然不上传也没什么,比较谁没事看这个

博客

先介绍一下什么是博客,博客就是一个网站,独属于你自己的网站,主要用途是在上面发布自己的文章,想些什么写什么(合法合规),本站就是一个很好的例子,在自己的博客,每个人都会有独属于自己的小巧思,大家也基本是把这个当成自己在互联网的一块小地盘来的,除了分享一些教程文章,也有一些记录自己生活的,更有甚者当成朋友圈来发的也有,一个博客有哪些部分呢,首先是基本每个博客都会有的部分,文章列表和文章详情页,这也是博客最基本的功能,就是写文和发文,大部分博客也还会配有三个特殊页面,分别是分类归档标签,三个页面,顾名思义,就是每个文章都可以添加一个分类和加上一些标签,这几个页面就可以根据分类和标签筛选文章,所谓归档就是把文章按照时间轴列出来,更加直观

除此之外,大部分博客都会有的就是友链页面,这也是博客中比较独特的一种文化,例如本站的友链页面,大家可以去看看点我跳转友链页面,先说什么叫友链,就是在你的网站上的一个专门的页面,在上面添加其他博客网站的访问链接,别人在你的站点访问的时候,点一下就能跳到别人的网站去,相应的,别人的站点也会添加你的,这个是相互的,一般申请规则都会在友链页面写上的,需要的根据对应规则申请就行

还有一个页面叫做关于页面,这个页面也是绝大部分都会有,这个页面是用来干什么的呢,主要是用来介绍自己的,全称其实叫关于我,就是写一些自我介绍,方便大家了解你,也会有站长留自己的联系方式这些,大部分其实和普通的文章页面没什么区别,一部分站长会把这个页面装修的花里胡哨的,看个人喜好咯

然后是一些小众的页面,本站的特殊页面就比较多,大家可以访问欣赏一下,这些部分就是看个人了,例如相册页面,会放一些相册照片,动态页面,本站当成朋友圈来发的,还有音乐页面,游戏页面,周刊页面等等,不同的站点可能会有不同的页面,这就得发挥自己的想象力啦(前提是会魔改代码哦)

博客架构介绍

知道了博客,接下来要了解怎么搭建了,搭建之前需要了解博客的分类,大致分为两类,一种是动态,一种是静态,本站就是静态,区别是什么呢,分类下又有哪些可以选择呢,本站写过对应的文章哦,可以跳转查看,下面也会简要介绍一下点我查看原文

对于很多新接触的小伙伴,可能如我当初一般懵懂,和大家介绍一下主流道一些网站架构和其特点,网站两大分类动态博客静态博客,二者最根本的区别就是一个可以实时更改网站内容,一个不可以,一个需要服务器支持,一个不需要,动态博客可以看做部署在服务器上的一个程序,静态博客则可以看为一个比较复杂的html网页,当然不单单是html文件,但是可以这么理解,它将所有数据全部写死在文件中,有许多免费托管平台可以帮你托管,缺点就是更改文章内容需要重新写入文件,再次部署托管,动态博客最出名的有两个,一个叫wordpress,一个叫typecho,二者都有丰富的主题支持和官方文档教程,但是并不适合新了解的小伙伴们,因为成本稍微有点高,并且服务器有被攻击的可能,这也会造成损失,不过多介绍

静态博客,所有新伙伴的第一个选择,其中也包含十分丰富的选择,虽然效果都差不多,但是底层架构有所不同,比较主流的有以下架构hexo,hugo,VuePress,Jekyll,Astro,Gatsby,他们在外观,构建速度,技术门槛,中文支持上各有优劣,下面的表格能直观的展示

系统语言构建速度技术门槛中文生态
HexoNode.js中等极强
HugoGo极快(毫秒级)中高
JekyllRuby慢(分钟级)中高
AstroNode.js/TS
VitePressNode.js/Vue中高中强
GatsbyNode.js/React极高

简单说说如何抉择,hexo,所有小白萌新最推荐的入门级博客,主题非常丰富,中文支持也是最好的,构建速度不快不慢,主要是有很多基于此的各路主题大佬发布的相关教程,或许是因为他最适合萌新,导致当今各路大佬依旧在用这个吧,AIOVTUE-雪的首个博客也是hexo,主题使用的是一款很优秀的butterfly主题,配合着大佬发布的好几期美化教程Butterfly 文檔(一) 快速開始,一共有很多篇,讲解的很详细,同时我也发现了一些十分优秀的主题,这里给大家列出供大家参考:

hugo,所有架构中构建速度断档式第一的存在,构建毫秒级别,其他的无可匹敌,但是也有很严重的缺点,就是中文支持不那么好,并且主题很少,尤其是中文主题,少之又少,好看的就更少了,它不适合花里胡哨,适合安安静静写文章,文章数量很多或者将来会很多的人,但是!,AIOVTUE-雪就喜欢他的构建速度,但是也想要花里胡哨的主题,因此,AIOVTUE-雪使用hugo制作了自己的主题,同时发现,也有一些其他的项目在使用hugo,但是可能不那么多,本站使用的就是AIOVTUE-雪自己写的主题,架构为hugo,并且也已经开源,提供了大量文章教程和视频教程(b站)有意者可跟随部署使用,也和大家推荐一些发现的不错的主题

Astro,新兴的架构,前端的宠儿,以页面现代化,优美为优点,编译速度和主题也比较好,很多看着好看的博客astro占比很大,并且似乎部署挺简单的,但是AIOVTUE-雪并没有体验过,因为主题虽然很现代,但是布局样式和其他一些问题不太符合预期,但是也发现过一些比较好看的主题,列在下方供大家参考

至于其他架构,雪(一直打全名太累了)没有了解过,也未曾使用过,就不做推荐,并且似乎,没怎么遇到过使用这些架构的主题和站点,小白也不是很建议使用这些,因为各方面都有更能打的存在,这种不上不下的确实有点没必要了

单独提一下一个新的架构-Valaxy,这是一个全新的架构,这两年才刚出来,介绍说是因为作者打算写主题,但是直接写了一个新的架构,当然还有很多其他参与人员,这是一个很庞大的工程,当前的架构主题还很少,AIOVTUE-雪也鼓捣过一段时间的valaxy,也魔改了一份主题,已经开源,不过不太适合零基础的小伙伴啦,有兴趣可以鼓捣鼓捣,下面是我的项目地址,内附教程

部署平台

上述内容都只能在本地预览自己的网页,要想真正将自己的项目上线,还需要部署到云端,由于是静态的,因此不必须配服务器,很多托管平台提供一定的免费额度,方便大家体验和部署,最出名的,想必大家也听过cloudflare,俗称赛博活佛,除此之外,还有vercelnetlifyedgeonerendersurgeback4appfly.io等等,不过主流只有前几个,后面的要么不好用要么要绑卡,不很推荐,不过可以鼓捣体验体验,下面分别稍微介绍几个

cloudflare,提供免费的pages服务,不限制流量和访问量,甚至可以部署workers,早年还能不帮卡提供数据库和R2储存,这两个现在需要绑卡了,不过依旧是免费提供的(限使用量),这在任何一家都是绝无仅有的条件,唯一的不足就是自带域名无法使用(其他也有这个问题),中国大陆访问速度稍微有点慢,但是还能接受,要是会优选ip能极大改善(不建议,据说容易风控,但雪没遇到过,不定论,请自行斟酌)

Verclenetlify,这两个放在一起说,因为二者相差无几,都是限量访问,一个月200G访问流量,部署也有次数限制,但是个人而言,完全够用,具体次数记不清了,但是肯定足够一天部署两三次,并且大部分用户也都用不了这么多,访问速度这一块,默认域名在国内也是被ban的,速度比cloudflare稍快一些,稳定性稍差(只是相比之下而言),雪的站点就在这两个上面,由于访问速度相差无几,因此不同站点具体部署地方不同,混着使用的,同时vercel支持部署一些很不错的项目,例如notionnext,只是一个将notion作为数据源的动态博客项目,依靠vercel拉取notion数据做到实时更新,但是实际体验并没有很好,首先是主题不够丰富,至少没有雪比较喜欢的,其次就是配置比较麻烦,各种配置文件有点混乱,虽然也能够看得懂吧,但是小白不友好,同时他的稳定性存疑,比较是根据notion的文章分享id为基础,会根据notion政策改变而改变,自行斟酌,这里附上相关文档链接

再说说render和back4app,这两个准确说是容器托管平台,并非专门为page服务而生,用来托管docker等服务项目,免费套餐也并非为pages设计,而是根据服务器资源占用设计,具体不太记得,但是似乎恰好够一个pages服务运行一个月(每个月),不过,还是不建议在这上面部署,雪使用这些体验不是很佳,具体也说不清原因,自行斟酌。还有一个叫fly.io这也是一个和上面二者一样的容器托管平台,不过挺多人挺喜欢用的,体验似乎还行,但是需要绑卡,雪没有信用卡,故没有体验过,不做评价

Surge,此前雪也不知道这个东西,也是无意间搜索到的,不过看他官网写的比较诱人,上手体验了一下,整体还可以,访问速度一般,可以自定义域名,但是全命令行操作,有一定基础,不太适合小白,并且,只支持上传构建好的静态产物,不能实时更新,不太适合作为长期托管网站的项目,偶尔分享一些自建的网页可以使用这个

新手小白了解一下就行,刚入手选择cloudflare就行,学会了在去折腾其他的

实操

下面是从0-1实操,小白可以跟着雪的步骤一步步操作,搭建一个属于自己的网站,本次距离的博客类型选择为静态博客,架构类型选择的是hugo,主题即本站的开源主题aiovtue,源码会储存上传在github内,使用cloudflare托管,域名使用免费域名,这些上面都有介绍过,下面开始啦

域名申请

本次示例采用免域名,雪选择的是这个点我跳转DNSHE注册地址 进入注册页面后就是下图这样,输入你的用户名(要英文),邮箱就用之前注册的qq邮箱,如何设置好密码这些提交注册一下就行,可能会需要验证邮箱,就是给你的邮箱发一个邮件,需要点击一个链接确认就行,比较简单,不赘述

注册完成后登陆你的账号,前往站点主页,然后点击这个免费域名的按钮 接着就可以看到注册域名的按钮,这里有一个额度,填写邀请码可以增加额度,不过正常来说一个其实就够用了,不过谁会拒绝更多呢,有需要可以使用雪的邀请码哦:

邀请码:DO763F23AB

点击注册新域名,然后选一个自己喜欢的后缀,当然是越短越好啦,如何填一个自己喜欢的前缀,例如雪的话就一定会写aiovtue,那么你的专属字符是什么呢 然后点击确认注册,到这里就结束啦,这个域名就属于你咯,下面进行下一步操作,但是先不要关闭这个页面,后面还会用到,下面将这个域名添加到cloudflare,添加完成之后,以后就可以在cloudflare上面管理这个域名啦

添加域名

添加域名上面也说过,首先需要 打开 Cloudflare 网页,点击左侧边栏的域名-概览,在这个页面的右上角点击添加域名 然后会出现这个界面,点击链接域名即可,点击之后再接下来的页面输入你的域名,即你要添加的域名,例如yybb.us

需要注意前面不需要加 www 或者 http://,直接填根域名就行,别填错了否则绑定不上去。

接下来是套餐选择,如果你有钱可以考虑Pro或者其他套餐,但是其实免费的free套餐就够用了,小白就直接选择free选项就行

检查 DNS 记录,这里有一个点要注意,CF托管域名的时候会自动扫描你域名现有的 DNS 记录,大家新注册的或者一些免费域名,基本是这里就是空的,直接点击继续就行,就算扫到了也没关系,后面也可以删除的,点继续就行

获取NS记录 (最主要的一部),是最核心的步骤。cloudflare会给出两个ns地址,比如图中的 bob.ns.cloudflare.com 和 cass.ns.cloudflare.com,不同账号或者添加不同域名的时候给的地址会不一样,实际要以你电脑上显示的为准,先将这俩地址复制下来,并且不要关闭网页,后面还会用到

什么是NS,在哪里修改NS,首先NS就是给域名添加一个指向记录,添加位置通常在购买域名的地方,或者是在获取免费域名的地方,写的很明显,就叫修改NS,那么在哪里添加修改呢 哼哼,记得之前让你们不要关闭的网页吗,派上用场啦,点击这个地方 在弹出来的弹窗中输入刚才复制的两个地址(比如示例的 bob.ns.cloudflare.com 和 cass.ns.cloudflare.com),在这个地方,一行一个,写上去点击保存就行 这边保存完之后,回到cloudflare刚才让你们不要关闭的页面,此时可以点继续按钮了,一般这个操作是会需要几分钟甚至十几分钟的时间同步的,cloudflare那边加载好了也会给你发邮件提醒,当然你着急可可以点击页面上有一个立即检查名称服务器的按钮,这个就是触发检查的,点个一两次就行,一般不会很久的,最后添成功的界面就是这样的 后续访问就在侧边栏的DNS的记录这里进行添加解析记录就行,点击添加记录就可以添加各种解析记录,例如A,CNAME,NS,等等~

Fork仓库

域名有了,现在开始部署博客,部署前需要有一个github账号,什么,你又没有?回去看上边的注册教程,有了一个github账号后,点击访问本站开源主题仓库,点我跳转本站开源仓库,下面的步骤记得在电脑端操作哦,打开网页后,点击fork按钮复制一个仓库到自己的账号下面,需要先登陆github,你点fork的时候会提示你登陆的 annwefgmage.png 点击之后的页面就是让你改一个名字,当然不改也行,都得是英文的,如何确认没异常点击下一步确定就行 fork完成之后,这个仓库就在你自己的账户下面了,具体查看路径是,登陆github网站之后,在这个地方,侧边栏可以看到这个按钮,点击即可 ankjhmage.png fork仓库之后,就可以前往托管平台部署自己的网站了,下面跟着雪一起部署吧

部署网站

前往cloudflare,点我跳转cloudflare官网,进入之后点击左侧边栏的计算-Workers和pages,然后点击右上角的创建应用程序按钮 annopoage.png

然后点击下面这个小小的这个开始,我们需要创建的是pages,所以要点下面这个 点完之后,下一个页面点击导入储存库,这一步就是cloudflare需要从你的github获取仓库里的代码信息,他会直接使用github仓库里的文件搭建网站,所以说这两个是必备的东西

点击这个按钮之后会进入下一个界面,在这里需要先登陆添加你的github账号,添加之后在下面的仓库选择页面就可以选择刚才fork的仓库了,例如这里的hugo-theme-aiovtue

然后会需要输入一些东西,这里的项目名称,可以随意,但是要英文,分支选择main,框架预设选择无或者叫其他,本站架构是hugo,这里不直接选择hugo是因为cloudflare的hugo版本过低,所以选择无,下方的构建命令填npm run build,下面的输出目录填public,对照图片填就行,写完了点击部署即可

然后等待cloudflare部署一下,大概十几秒左右,很快的,部署完就是这个样子的啦,直接fork部署一般是不会报错的哦,后面自定义修改之后可能就会有报错啦,到时候在根据报错查询问题修改就行,这个后面再说,点击继续处理项目,就可以到项目页面啦

点击继续处理后会进入这个界面,这里显示的是你的部署记录,后续每次更新可能都会触发一次部署,可以在这里看又没有报错这些,圈起来这个就是你的访问域名,这是cloudflare自带的免费的,但是国内被墙,访问不了,嗯对,所以需要设置自定义域名 在这个页面上边一点,有一个自定义域的按钮,点击之后是这样的,点击设置自定义域就可以添加之前加到cloudflare的免费域名啦 在接下来的页面输入你的免费域名,可以再加一个前缀,当然不加也行,看你自己需求,例如可以是aiovtue.yybb.usblog.aiovtue.yybb.us,都可以的,填写之后点击下一步就行 域名和网站都放在cloudflare的其中一个好处就是,添加域名的时候不需要自己添加解析,直接点击这里的激活域就行,就会自动帮你添加,添加好后就能在自定义域这一栏看到了,会需要一点时间生效,大概也就几分钟吧,很快的,然后访问你的域名就能看到刚才部署的网站啦 就长这个样子啦,到这里这个网站就算成了,但是还不能完全算你自己的,如你所见,上面的一些信息啊,文章啊,图片什么的,都是雪放的默认信息,需要自己修改成自己的,也就是装修一下才算正式完工哦

个性化

现在这个网站依旧运行在互联网上面了,发送你的域名给别人就可以访问你的网站了,但是内容上面还是主题默认的内容,这个时候就需要将仓库的文件下载到电脑本地,进行个性化的修改了,这里推荐使用github官方的电脑软件,方便后续的管理和更新,这里附上下载链接

点我跳转github下载地址

记得下载电脑版哦,下载后安装一下,如果你说这个不会的话,还是看另外的教程吧,这个不太基础,安装过程这里就省略啦,安装完之后登陆一下自己的github,然后点击左上角的file,然后点击clone repository,就是克隆账户上的仓库文件到本地的意思,然后选择一个储存的位置,最好不要放桌面,后期修改就是在这个地方修改文件,放一个自己找得到的位置,由于会需要频繁访问,建议不要放太深,选择要克隆的仓库后确认即可

克隆完成之后,在你刚刚选择的文件夹就能看到仓库的文件了,这也是你的网站的文件,如果你用的是雪的示例仓库的文件,那么因该长这样 这里有几个最重要的文件,是本仓库的自定义需要频繁修改的,其他网站开源模版就得看对应的说明文档啦,首先是hugo.toml这个文件,这就是控制站点绝大部分样式的配置文件,后续也会一直喊他配置文件,直到是这个就行,然后就是文件夹content,这个文件夹里面放的是网站的各个页面,文章等的数据,修改装修页面,或者发布文章,甚至是发布动态都是修改这个文件夹里面的内容,里面是这样的 这里有几个文件夹,其中posts文件夹存放的1是你的文章,电进去就能看到雪预存的几个示例文章,后续新建文章的话也只需要新建一个后缀为.md的文件即可,或者直接复制一个文章然后修改,具体后面将,这里的about.md文件就是网站的关于页面的内容,修改内容直接打开文件修改就行,此外其他的文件夹或者文件基本都是对应的网站的一个页面,平时需要修改的也只有顶部头图或者标题这些,打开是长这样的 这部分一般称呼为属性,其中cover就是顶部头图部分,这里可以填写图床链接,也可以用本地文件相对路径,那么问题来了,什么是图床链接,简单点说就是一个链接,但是打开就是一个图片,诸如https://demo.com/demo.png,话说,应该都知道图片的后缀是png,jpeg这些吧,这里放一个能访问的图床链接,大家不能理解的可以放浏览器里访问看看https://pic1.imgdb.cn/i/034IvVFULopI9mVr83vrYJ.png 还是不懂的可以具体搜一下对应内容,页面美化大抵也就改改图片和标题这些,除此之外就是配置文件的修改,这部分可操作性比较大,整体文件大概有如下内容:

text
# 配置索引:
#   [params]           站点参数总入口
#   params.post        文章正文字号
#   params.links       友链页
#   params.moments     动态页
#   params.bangumi     追番页(Bilibili)
#   params.loader      全站加载动画
#   params.author      作者信息
#   params.hero        首页 Hero
#   params.footer      页脚
#   params.home        首页布局
#   params.notice      公告栏
#   params.social      社交图标
#   params.charts      归档/标签图表
#   params.sponsor     赞助
#   params.license     版权声明
#   params.comment     评论 provider
#   params.waline      Waline(备用)
#   params.twikoo      Twikoo(当前)
#   params.envelope    留言页信封
#   params.navbar      顶栏
#   params.search      全文搜索
#   params.menu.main   导航菜单
#   params.music       音乐播放器
#   params.live2d      Live2D 看板娘
#   params.mouse        团团猫动态鼠标指针
#   params.effects      全站背景特效(樱花/雨/雪等)
#   params.pjax        无刷新跳转
# =============================================================================

# 站点正式访问地址(影响 sitemap、RSS、分享链接等绝对 URL,部署前务必与真实域名一致)
baseURL = 'https://daily.yybb.us/'
locale = 'zh-cn'
defaultContentLanguage = 'zh'
title = 'AIOVTUE-雪'          # 站点名称(浏览器标题、页脚版权等)
theme = 'aiovtue'           # 主题目录:themes/aiovtue/
hasCJKLanguage = true      # 启用中文分词(搜索、摘要等)
enableRobotsTXT = true     # 生成 robots.txt(模板在 themes/aiovtue/layouts/robots.txt)

# --- 站点地图(sitemap.xml)---
[sitemap]
  changefreq = 'weekly'    # 更新频率提示
  priority = 0.5
  filename = 'sitemap.xml'

# --- 分页(首页文章列表)---
[pagination]
  pagerSize = 10           # 每页文章数

# --- 分类与标签 URL 路径 ---
[taxonomies]
  category = 'categories'  # /categories/xxx/
  tag = 'tags'             # /tags/xxx/

# --- 输出格式(首页与文章栏目额外生成 RSS)---
[outputs]
  home = ['HTML', 'RSS']
  section = ['HTML', 'RSS']

# --- Markdown 渲染 ---
[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true        # 允许正文内嵌 HTML
    [markup.goldmark.extensions]
      [markup.goldmark.extensions.passthrough]
        enable = true      # 保留 LaTeX 分隔符,由 passthrough render hook + KaTeX 构建时渲染
        # 块级公式 $$ 结束后若紧跟 --- 分隔线,中间必须空一行,否则 Goldmark 会误解析为标题
        [markup.goldmark.extensions.passthrough.delimiters]
          block = [['\[', '\]'], ['$$', '$$']]
          inline = [['\(', '\)'], ['$', '$']]
  [markup.highlight]
    style = "github"       # 代码高亮主题
    noClasses = false
    lineNos = false
    tabWidth = 4
  [markup.tableOfContents]
    startLevel = 2         # 目录从 h2 开始
    endLevel = 4           # 目录至 h4,不显示 h5/h6
    ordered = false

# --- 资源类型:将 .excalidraw 识别为 JSON page bundle 资源 ---
[mediaTypes]
  [mediaTypes."application/json"]
    suffixes = ["json", "excalidraw"]

# =============================================================================
# 站点参数(主题通过 .Site.Params 读取)
# =============================================================================
[params]
  subtitle = '雪'                              # 副标题(首页标题后缀)
  description = '雨是神的烟花'                  # 站点默认描述(SEO、分享卡片)
  primaryColor = '#DF9193'                     # 主题主色
  favicon = '/hero/avatar.png'
  defaultCover = '/hero/tt3.png'               # 文章默认头图(无 cover 时使用)
  math = false                                 # 默认关闭;单篇 front matter 写 math: true 启用构建时 KaTeX 渲染
  postIndent = true                            # 文章/关于页正文首行缩进 2em(单篇可写 indent: false 关闭)

  # --- 文章/关于页正文 ---
  [params.post]
    fontSize = "1.1rem"                          # 正文字号(rem,如 0.95rem / 1.1rem)

  # --- 友链页 ---
  [params.links]
    layout = 'preview'                        # preview:卡片截图 | simple:长条头像+悬停预览
    rssEnable = true                         # 友链页「朋友动态」RSS 展示(关闭时不拉取 RSS)
    footerEnable = false                      # 全站页脚友链列表展示

  # --- 动态页(每条动态:content/moments/*.md,front matter 仅需 date)---
  [params.moments]
    layout = "memos"                          # memos:头像时间线 | cards:居中卡片
    cardMaxWidth = "720px"                    # cards 模式下列表最大宽度

  # --- 追番页(Bilibili 追番列表,构建时拉取 data/bangumi.json)---
  [params.bangumi]
    enable = true                             # 是否启用追番页与构建时数据拉取
    vmid = '334423445'                        # Bilibili 用户 UID(追番列表需空间公开)
    quote = '生命不息,追番不止!'              # 页面引言

  # --- Excalidraw 画板文章(content/excalidraw/<slug>/index.md + *.excalidraw)---
  # 独立栏目,首页/归档/搜索与 posts 合并展示;单页为交互式只读查看器

  # --- 全站加载动画(首页进入时的樱花加载页)---
  [params.loader]
    enable = true
    minShow = 0            # 最短显示时间(毫秒)
    maxDuration = 6000     # 最长等待时间(毫秒)

  # --- 侧栏 / 关于页作者信息 ---
  [params.author]
    name = '作者名称'
    avatar = '/hero/avatar.png'
    statusEmoji = '🌸'     # 头像角标
    statusMessage = '发呆ing...'

  # --- 首页 Hero 大图 / 视频轮播 ---
  # 媒体文件放在 static/hero/,此处写 URL 路径(以 / 开头)
  
  
  
  # grid 全站背景网格(仅 params.hero.style = 'grid' 时生效)
  # size:单元格边长(px);lineOpacity / lineOpacityDark:线条透明度 0~1,越大越深
  [params.hero.grid]
    size = 20
    lineOpacity = 0.1
    lineOpacityDark = 0.1

  [params.hero]
    title = 'AIOVTUE'
    # motto:关闭一言时显示的格言;字符串=固定一句,数组=每次随机一条(打字机效果同一言)
    motto = [
      '雨是神的烟花',
      '山河远阔,人间烟火',
      '愿你眼中有光,心中有爱',
      '慢慢来,也比较快',
      '风停了,云还在走',
    ]
    randomUrls = true      # 随机切换背景
    enableHitokoto = true  # 一言 API 随机格言
    typewriter = true      # 打字机效果
    typewriterSpeed = 80
    style = 'dot'          # 背景样式:dot / grid 等
    fixedImg = true
    playerUrl = '/hero/player.mp4'
    urls = [
      '/hero/tt3.png',
      '/hero/tt1.png',
      '/hero/tt2.png',
      '/hero/sp1.mp4',
      '/hero/hero-1.jpg', 
      '/hero/hero-2.png', 
      '/hero/hero-1.mp4',
      '/hero/hero-2.mp4',
      
    ]

  # --- 页脚 ---
  [params.footer]
    since = 2024           # 版权起始年
    runtimeSince = '2024-01-01'   # 站点运行倒计时起点(YYYY-MM-DD)
    icp = '<a href="https://icp.gov.moe/?keyword=20260258" target="_blank" rel="noopener">萌ICP备20260258号</a>'

# --- 首页公告栏(右侧域名列表)---
  # --- 首页文章列表布局 ---
  # cards:默认卡片列表(含公告栏与随机文章轮播)
  # list:紧凑列表(电脑端单列时左栏站点信息/公告/标签 + 右栏文章;双列时无侧栏;不显示顶部公告栏)
  # timeline:居中时间线,文章左右交替;不显示公告栏与随机文章
  # layout:关闭随机时使用的固定布局;layouts 未设置时的后备
  # layouts:首页布局候选池(cards / list / timeline)(不建议使用)
  # layoutRandom:是否启用随机(仅电脑端;移动端固定使用 layout) (不建议使用)
  # layouts 含 2 项及以上:电脑端在布局变体间随机
  # layouts 仅含 list 时:电脑端在 list 单列/双列间随机
  # layoutRandom = false 时:固定使用 layout 与 desktopListColumns
  # mobileCardsLayout:cards / list 模式下手机端文章列表样式(仅 max-width: 768px 生效)
  # stack — 竖向卡片(cards 模式默认;list 模式下可显式设为 stack 以覆盖默认 list)
  # list  — 列表样式:隐藏公告栏与随机文章
  # single — 单列(默认)
  # double — 双列
  
  
  [params.home]
    layout = 'list'   # (cards,list,timeline)建议不要使用时间线模式,即timeline,不成熟样式
    desktopListColumns = 'single' # (single,double)list模式下单双列样式切换在此配置
    desktopListItemStyle = 'cards' # layout=list时,single模式下选择文章列表为list/cards样式
    mobileCardsLayout = 'list'     #移动端样式设置(list、stack)注意桌面端cards和list模式下移动端布局略有区别,具体自行切换查看和体验
    mobileCardsBatchSize = 10  # 每页文章数,这个和上一个配置都是桌面移动端通用的,只是名字没改而已
    # timelineBatchSize = 10   # 时间线模式:首屏条数及每次滚动加载条数
    
    # 下列配置在list模式下生效,不建议更改
    archiveHeatmapColumns = 13  # 右侧归档热力图:每行列数
    archiveHeatmapRows = 4      # 右侧归档热力图:行数(格子总数 = 列数 × 行数)
    randomSidebarCount = 7      # 右侧随机文章显示篇数,不建议过多
    
    # 下方配置不建议动,过大会影响网页性能
    featuredCount = 4           # list 模式推荐区同时可见卡片数
    featuredPoolCount = 12      # list 模式推荐区候选池(排序后取前 N 篇 SSR,供切换按钮轮换)
    mobileNoticeTicker = true   # 移动端单行滚动公告
    featuredDesktop = true      # 电脑端推荐文章区
    featuredMobile = true       # 移动端推荐文章区
    
  [params.notice]
    title = '公告栏'
    rotateInterval = 5000  # 左侧随机文章轮播间隔(毫秒)
    [[params.notice.sections]]
      label = '--- 主域名 ---'
      lines = ['daily.yybb.us', 'day.yybb.us']
    [[params.notice.sections]]
      label = '--- 这是公告 ---'
      lines = ['公告在配置文件中修改哦']

  # --- 侧栏 / Hero 社交图标(icon 为 Iconify 图标名)---
  [[params.social]]
    name = 'RSS'
    link = '/index.xml'  # Hugo 默认 RSS 路径
    icon = 'ri:rss-line'
    color = 'orange'
  [[params.social]]
    name = 'GitHub'
    link = 'https://github.com/AIOVTUE'
    icon = 'ri:github-line'
    color = '#6e5494'
  [[params.social]]
    name = '微信公众号'
    link = '/hero/wxgzh.png'
    icon = 'ri:wechat-2-line'
    color = '#1AAD19'
  [[params.social]]
    name = 'E-Mail'
    link = 'mailto:x@yybb.us'
    icon = 'ri:mail-line'
    color = '#8E71C1'
  [[params.social]]
    name = 'Travelling'
    link = 'https://www.travellings.cn/go.html'
    icon = 'ri:train-line'
    color = '#8cb1b3'

  # --- 归档 / 标签页 ECharts 图表 ---
  [params.charts]
    archivesStartMonth = '2024-03'   # 归档图起始月份
    tagsChartLength = 10             # 标签图显示 Top N

  # --- 文章页底部赞助按钮 ---
  [params.sponsor]
    enable = true
    title = '我很可爱,请给我钱!'
    description = '我很可爱哦,可以给我点钱钱嘛~'
    [[params.sponsor.methods]]
      name = '支付宝'
      url = '/img/zfb.png'
      color = '#00A3EE'
    [[params.sponsor.methods]]
      name = '微信支付'
      url = '/img/weix.png'
      color = '#2DC100'

  # --- 文章版权声明(CC 协议)---
  [params.license]
    enable = true
    type = 'by-nc-sa'      # CC 类型:by / by-nc / by-nc-sa / zero 等
    language = 'zh'
    
  # --- 动态手写签名(signature-inline)---
  # postCopyrightEnable:文章底部版权声明处的签名动画
  # footerEnable:全站页脚 copyright 区「by xxx」处的签名动画(关闭后显示 author.name 文字)
  # 不影响正文 Markdown 中 [签名](signature:) 的签名效果
  [params.signature]
    postCopyrightEnable = false
    footerEnable = false

  # --- 文章页脚导航 ---
  [params.postFooter]
    navigationMerge = true # 合并上一篇/下一篇导航样式

  # --- 评论系统(文章 / 友链 / 留言页共用)---
  # provider 可选:waline | twikoo
  # 单篇文章可在 front matter 写 comment: false 关闭评论区
  [params.comment]
    provider = 'twikoo'

  # --- Waline 评论(https://waline.js.org/)---
  # 仅当 params.comment.provider = waline 时生效;当前使用 twikoo,此处留作切换备用
  [params.waline]
    serverURL = 'https://your-waline-url'                                # 切换到 waline 时填写服务端地址(末尾不要加 /)
    placeholder = '分享你的想法...'

  # --- Twikoo 评论(仅当 params.comment.provider = twikoo 时生效)---
  # 留空 envId 时评论区显示配置提示,不影响站点其它功能
  # visitorEnable:文章访问量统计(需 provider=twikoo 且已配置 envId)
  # COMMENT_PLACEHOLDER 请在 Twikoo 管理后台「配置」中设置
  [params.twikoo]
    envId = 'https://your-twikoo-url'
    visitorEnable = true   # 开启文章访问数量统计,基于twikoo

  # --- 留言页信封动画图片(文件在 static/envelope/)---
  [params.envelope]
    before = '/envelope/before.png'
    after = '/envelope/after.png'
    cover = '/envelope/cover.png'
    line = '/envelope/line.png'
    wrapHeight = 447
    openHeight = 1050
    openOffset = -200
    danmakuOpenBottomTrim = 140   # 信封展开时弹幕区域底部向上缩短(像素)

  # --- 顶栏标题 ---
  [params.navbar]
    titleParts = ['AIOVTUE-', '雪']   # 顶栏主标题分段(可产生动画效果)
    subTitle = '雨是神的烟花'
    offset = 0

    # 移动端下滑隐藏顶栏(默认首页不生效,设 includeHome = true 则全站含首页生效)
    [params.navbar.mobileCollapse]
      enable = true
      includeHome = false    # 是否包括主页
      scrollThreshold = 5   # 滚动超过该距离后才允许隐藏(px)
      scrollDelta = 10        # 单次滑动超过该值触发隐藏/恢复(px)
      revealMode = 'scrollUp' # 隐藏后如何恢复:top = 回到顶部才显示 | scrollUp = 上划即显示

    # 电脑端下滑隐藏顶栏(min-width: 769px;默认关闭)
    [params.navbar.desktopCollapse]
      enable = true
      includeHome = false   # 是否包括主页
      scrollThreshold = 5
      scrollDelta = 5
      revealMode = 'scrollUp'

    # 顶栏随页面滚出视口(与自动隐藏互斥:对应端开启 collapse 时无效)
    [params.navbar.scrollWithPage]
      enable = false       # true = 内页顶栏随页面滚出视口;false = 全站 fixed 顶栏
      includeHome = false # false = 首页保持 fixed + Hero 全屏;true = 首页也随页滚动(透明顶栏叠层)

  # --- 全文搜索(Fuse.js)---
  [params.search]
    enable = true
    threshold = 0.35       # 匹配灵敏度(越小越严格)

  # --- 顶栏 / 侧栏导航菜单 ---
  # weight 越小越靠前;带 items 的项会展开子菜单
  [[params.menu.main]]
    name = '首页'
    url = '/'
    icon = 'ant-design:home-filled'
    weight = 1
  [[params.menu.main]]
    name = '文章'
    url = '/categories/'
    icon = 'ant-design:read-filled'
    navGroup = 'posts'
    weight = 2
    [[params.menu.main.items]]
      name = '分类'
      url = '/categories/'
      icon = 'ant-design:appstore-filled'
    [[params.menu.main.items]]
      name = '归档'
      url = '/archives/'
      icon = 'ant-design:container-filled'
    [[params.menu.main.items]]
      name = '标签'
      url = '/tags/'
      icon = 'ant-design:tags-filled'
  [[params.menu.main]]
    name = '个人'
    url = '/moments/'
    icon = 'ant-design:user-outlined'
    navGroup = 'personal'
    weight = 3
    [[params.menu.main.items]]
      name = '相册'
      url = '/gallery/'
      icon = 'ant-design:picture-filled'
    [[params.menu.main.items]]
      name = '动态'
      url = '/moments/'
      icon = 'ant-design:compass-filled'
    [[params.menu.main.items]]
      name = '追番'
      url = '/bangumi/'
      icon = 'mdi:television-play'
  [[params.menu.main]]
    name = '留言'
    url = '/comment/'
    icon = 'ant-design:message-filled'
    weight = 4
  [[params.menu.main]]
    name = '友链'
    url = '/links/'
    icon = 'ant-design:global-outlined'
    weight = 5
  [[params.menu.main]]
    name = '关于'
    url = '/about/'
    icon = 'ant-design:idcard-filled'
    weight = 6

# --- 音乐播放器(APlayer + Meting.js)---
  # enable:是否显示播放器;单页可在 front matter 写 musicPlayer: false 关闭
  [params.music]
    enable = true
    position = 'right'        # left | right,按钮默认停靠左下或右下
    
    # apis:按顺序尝试,前一个不可用时自动切换下一个,默认不需要动
    apis = [
      'https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r',
      'https://api.injahow.cn/meting/?server=:server&type=:type&id=:id',
      'https://meting.qjqq.cn/?server=:server&type=:type&id=:id',
    ]
    server = 'netease'
    type = 'playlist'                             # playlist | song | album | artist
    id = '2580064383'                             # 网易云歌单/歌曲 ID

  # --- Live2D 看板娘(左下角 Live2D 角色)---
  # enable:是否启用;单页可在 front matter 写 live2d: false 关闭
  [params.live2d]
    enable = true
    minWidth = 768                                # 低于此宽度不加载
    drag = false
    tools = ['hitokoto', 'asteroids', 'switch-model', 'switch-texture', 'photo', 'info', 'quit']

    # 看板娘运行时(脚本 / 样式 / 提示语,一般保持默认即可)
    widget = 'https://live2d.kafuchino.top/'
    waifuTips = 'jsdelivr/sequential/waifu-tips.js'
    waifuCss = 'css/left.css'
    waifuTipsJson = 'waifu-tips.json'

    # 模型库 cdnPath(静态模型目录,含 model_list.json)— 与 apiPath 二选一
    cdnPath = 'https://live2d.kafuchino.top/'     # nova1751 扩展库:少女前线等(21 组模型)
    # 备用模型库(取消注释一行替换上方 cdnPath 即可切换模型种类):
    # cdnPath = 'https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/'   # fghrsh 经典库:Shizuku / 海王星 / Pio 等(7 组)
    # cdnPath = 'https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/'      # 同上 · jsDelivr 国内节点
    # cdnPath = 'https://fastly.jsdelivr.net/gh/nova1751/live2d-api/' # nova1751 仓库镜像(模型集与 kafuchino 相同)
    #
    # 模型库 apiPath(fghrsh 动态 PHP 接口;启用时需注释掉上方 cdnPath):
    # apiPath = 'https://live2d.fghrsh.net/api/'                      # fghrsh 官方动态 API(接口式换模型/皮肤)

  # --- 团团猫动态鼠标指针 ---
  # enable:是否启用;单页可在 front matter 写 mouse: false 关闭
  [params.mouse]
    enable = true
    path = '/mouse/tuantuanma/'                  # 预压缩 WebP + manifest.json(见 static/mouse/tuantuanma/)
    scale = 0.25                                  # manifest 内记录的缩放;重新压缩时改 compress-mouse 脚本参数

  # --- 全站背景特效(yzhanWeather · MIT,本地静态资源)---
  # enable:是否启用;单页可在 front matter 写 effects: false 关闭
  # type:sakura | rain | snow | firefly | butterfly | random(每次打开随机一种)
  # mobile:触摸设备或宽度 ≤768px 是否启用(默认 false)
  # randomize:打散雨/樱花/雪/蝴蝶轨迹;萤火虫不受此项影响,始终仅向上飘
  [params.effects]
    enable = true
    type = 'firefly'
    randomTypes = ['sakura', 'rain', 'snow', 'firefly', 'butterfly']
    randomize = true                                # 打散位置/速度/轨迹,避免过于规律
    mobile = false                                  # 移动端是否启用(默认关闭)
    maxDuration = 10                                # 动画基准周期(秒),越大越慢
    zIndex = 5                                      # 层级,需低于弹窗/导航
    script = '/vendor/yzhanweather/yzhanweather.min.js'

  # --- 站内无刷新跳转(PJAX)---
  [params.pjax]
    enable = true
    fadeDuration = 200                            # 内容区淡入淡出时长(毫秒)
    mountDelay = 120                              # 页内跳转:CSS/JS 就绪后额外等待(毫秒),减少布局突变

在文件内部也会有详细的说明,讲述对应的内容是做什么的,可以选择哪些配置,或者看不懂的直接就是用默认配置就行,需要注意的是,修改这些内容的是要注意语法,比如中英文,换行,对齐这些,否则可能会报错,然后根据自己的喜好进行自定义就好啦

本地预览

那么,修改好之后,怎么预览效果呢,总不能直接部署到云端来看吧,那未免也太麻烦了,其实是可以在电脑本地预览的,但是需要电脑本地有对应的环境,就是需要安装对应的软件啦,首先是nodejs,这个简单,下载安装包安装一下就行

点我跳转nodejs下载地址

这个安装很简单,下载之后一直点下一步就行,要是不会可以看这个教程,雪在互联网找的:点我跳转安装教程 安装完成之后,打开你的cmd,或者叫powershell,记得右键用管理员身份运行哦,一般长这样,在第一个上面右键选择管理员运行打开就行,打开后界面时下面这样的 打开之后输入如下命令进行pnpm的安装,你也可以理解为一个软件吧,后面要用这个,注意,这一步可能会需要用到魔法网络环境,这个自己解决哦~ ,运行命令:npm install --global pnpm,意思就是在电脑上安装pnpm这个东西,输入之后回车就行,雪这里是安装过所有可能跟你们的不一样

安装完成之后重启一下powershell,然后复制一下仓库文件夹的路径,例如D:\user\desktop\hugo-theme-aiovtue,然后在终端,也就是powershell里面输入这行命令cd D:\user\desktop\hugo-theme-aiovtue,就是在路径前面加一个cd,注意替换为自己的路径哦,意思就是切换终端目录到网站目录,切过去后运行pnpm dev,这个命令会启动网站的预览,就像这样 这里的地址http://localhost:1313就是你本地预览的地址,把这个丢在浏览器就能打开本地网页了,注意这个网页别人是看不到的,只能在自己的电脑上看到,如果运行命令遇到报错,类似下面的报错,是因为pnpm 新版本的依赖构建安全策略拦截了 sharp 的安装脚本,运行一下这个命令pnpm approve-builds,然后选择sharp后回车就行,然后重新运行pnpm dev应该就正常了,要是还遇到奇奇怪怪的报错,可以把报错丢给ai,问问是为什么,正常来说是没什么问题的

text
pnpm dev 
[WARN] The "pnpm" field in package.json is no longer read by pnpm. The following keys were ignored: "pnpm.onlyBuiltDependencies". See https://pnpm.io/settings for the new home of each setting. [WARN] The "pnpm" field in package.json is no longer read by pnpm. The following keys were ignored: "pnpm.onlyBuiltDependencies". See https://pnpm.io/settings for the new home of each setting. ✓ Lockfile passes supply-chain policies (34 entries in 954ms) Lockfile is up to date, resolution step is skipped Already up to date [ERR_PNPM_IGNORED_BUILDS] Ignored build scripts: sharp@0.34.5 Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts. [ERROR] Command failed with exit code 1: "C:\nvm4w\nodejs\node.exe" "C:\Users\25780\AppData\Roaming\npm\node_modules\pnpm\bin\pnpm.mjs" install pnpm: Command failed with exit code 1: "C:\nvm4w\nodejs\node.exe" "C:\Users\25780\AppData\Roaming\npm\node_modules\pnpm\bin\pnpm.mjs" install at getFinalError (file:///C:/Users/25780/AppData/Roaming/npm/node_modules/pnpm/dist/pnpm.mjs:89986:14) at makeError (file:///C:/Users/25780/AppData/Roaming/npm/node_modules/pnpm/dist/pnpm.mjs:92293:21) at getSyncResult (file:///C:/Users/25780/AppData/Roaming/npm/node_modules/pnpm/dist/pnpm.mjs:94137:10) at spawnSubprocessSync (file:///C:/Users/25780/AppData/Roaming/npm/node_modules/pnpm/dist/pnpm.mjs:94097:14) at execaCoreSync (file:///C:/Users/25780/AppData/Roaming/npm/node_modules/pnpm/dist/pnpm.mjs:94027:23) at callBoundExeca (file:///C:/Users/25780/AppData/Roaming/npm/node_modules/pnpm/dist/pnpm.mjs:96555:23) at boundExeca (file:///C:/Users/25780/AppData/Roaming/npm/node_modules/pnpm/dist/pnpm.mjs:96532:49) at sync2 (file:///C:/Users/25780/AppData/Roaming/npm/node_modules/pnpm/dist/pnpm.mjs:96691:10) at runPnpmCli (file:///C:/Users/25780/AppData/Roaming/npm/node_modules/pnpm/dist/pnpm.mjs:276904:5) at runDepsStatusCheck (file:///C:/Users/25780/AppData/Roaming/npm/node_modules/pnpm/dist/pnpm.mjs:278122:7)
提交修改

最后一步,提交自己的修改,可以是第一次修改样式的大装修,也可以是后续新增文章的小更新,上传和重部署步骤都是一样的,还记得之前下载的github软件吗,当你修改过后,再次打开github仓库,就会发现他会列出你所有的修改,例如这样

左侧列表就会限制你修改的部分,点击可以在右侧看到具体改了那里,左下角这里,提交修改的时候需要输入一下,随便写什么,就和备注一样,雪一般就11,写完之后点击左下角的commit就行,点击之后,上边这里的按钮会变成提交,然后点击提交就会将本地的修改上传到你的github仓库里面啦,不过这一步大概率会卡一下,建议使用魔法环境,不然可能一直传不上去,失败了记得重试哦,上传完成之后,还记得网站部署在哪里吗,是的,网站在cloudflare,当时是直接连接github部署的,好处就是,当你点击同步之后,cloudflare那边也会收到同步,自动帮你部署新版本,就不需要在重新部署了,是不是很方便,好啦,到这里你依旧能够部署一个独属于自己的网站啦,后续可以留意一下一些开源的网站项目,和本次示例步骤差不多,fork克隆到自己的github,然后部署到cloudflare,然后下载到本地修改,然后更新,当然你也可以先放在本地修改,本地预览没有问题之后在部署到cloudflare,看你自己喜欢怎么弄咯~

Markdown语法

初了上面这些,当你在书写文章的时候,还会遇到一个问题,就是怎么排版,这不像你的word,直接点点点,这里有一个专门的语法,叫markdown语法,熟悉之后其实很简单,非常方便,也有很多专门书写markdown文章的编辑器,例如obsidian,这也是雪一直使用的编辑器,这里附上下载地址

点我跳转obsidian下载地址

下面会简单介绍一下用的最多的语法,本部分使用AI生成

一、Markdown 是什么?

Markdown 是一种非常简单的文字排版语言 你不需要像 Word 一样点击各种按钮,只需要使用一些简单的符号,就可以让文字变成:

  • 标题
  • 粗体
  • 斜体
  • 删除线
  • 图片
  • 链接
  • 表格
  • 代码
  • 引用
  • 列表

例如:

markdown
# 这是一个标题

这是一段普通文字

**这是粗体**

*这是斜体*

显示出来就是:

这是一个标题

这是一段普通文字 这是粗体 这是斜体

二、标题

Markdown 使用 # 来表示标题,# 越多,标题等级越低

markdown
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

显示效果:

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

一般写文章的时候,使用:

markdown
# 文章标题
## 第一章
### 第一节
### 第二节
## 第二章

就已经足够了

三、普通文字

直接输入文字即可

markdown
这是一段普通文字。
这是第二段文字。

显示: 这是一段普通文字。 这是第二段文字。 如果想换一段,需要空一行

四、换行

Markdown 中直接按一次 Enter,有些编辑器不会真正换行 例如:

markdown
第一行
第二行

有些 Markdown 编辑器可能会把它显示成:

第一行 第二行

如果希望明确换行,可以在第一行最后加两个空格:

markdown
第一行  
第二行

也可以使用 <br>

markdown
第一行<br>
第二行
五、粗体

在文字两边加两个 *

markdown
**这是粗体**

显示: 这是粗体 也可以使用两个 _

markdown
__这是粗体__
六、斜体

在文字两边加一个 *

markdown
*这是斜体*

显示: 这是斜体 也可以:

markdown
_这是斜体_
七、粗体 + 斜体

三个 *

markdown
***这是粗体斜体***

显示: 这是粗体斜体

八、删除线

使用两个 ~

markdown
~~这句话不要了~~

显示: 这句话不要了 例如:

markdown
原价:~~99 元~~
现在只要 59 元!
九、链接

链接的基本格式:

markdown
[显示的文字](网址)

例如:

markdown
[访问 GitHub](https://github.com)

显示: 访问 GitHub

再举一个例子
markdown
这是我的[个人博客](https://example.com)。

显示: 这是我的个人博客

十、图片

图片的格式和链接非常像,只需要在前面加一个 !

markdown
![图片描述](图片地址)

例如:

markdown
![一张图片](https://example.com/image.jpg)

其中:

  • !:告诉 Markdown 这是图片
  • 图片描述:图片无法显示时显示的文字
  • 图片地址:图片的 URL
本地图片

如果图片和 Markdown 文件在同一个文件夹:

text
文章.md
图片.jpg

可以写:

markdown
![我的图片](图片.jpg)

如果图片放在 images 文件夹:

text
文章.md
images/
  └── photo.jpg

写:

markdown
![我的图片](images/photo.jpg)
十一、引用

使用 >

markdown
> 这是一段引用。

显示:

这是一段引用。

也可以引用多行:

markdown
> 这是第一行。
> 这是第二行。
> 这是第三行。

显示:

这是第一行。
这是第二行。
这是第三行。

引用非常适合:

  • 引用别人说的话
  • 写提示
  • 写文章摘要
  • 添加注意事项

例如:

markdown
> 注意:删除文件之前请先备份。
十二、无序列表

使用 -*+ 都可以。 最常用的是 -

markdown
- 苹果
- 香蕉
- 西瓜
- 草莓

显示:

  • 苹果
  • 香蕉
  • 西瓜
  • 草莓
十三、有序列表

使用数字:

markdown
1. 第一步
2. 第二步
3. 第三步

显示:

  1. 第一步
  2. 第二步
  3. 第三步
不需要自己写正确的数字

实际上全部写 1. 也可以:

markdown
1. 第一步
2. 第二步
3. 第三步

Markdown 编辑器通常会自动显示为:

  1. 第一步
  2. 第二步
  3. 第三步
十四、嵌套列表

列表里面还可以继续套列表。

markdown
- 水果
  - 苹果
  - 香蕉
  - 西瓜

- 饮料
  - 可乐
  - 咖啡
  - 茶

显示:

  • 水果
    • 苹果
    • 香蕉
    • 西瓜
  • 饮料
    • 可乐
    • 咖啡

注意:子列表前面通常需要缩进两个或四个空格

十五、任务列表 / 待办事项

使用:

markdown
- [ ] 没有完成
- [x] 已经完成

显示:

  • 没有完成
  • 已经完成

例如:

markdown
## 今日任务

- [x] 写 Markdown 教程
- [x] 发布文章
- [ ] 整理代码
- [ ] 更新博客
十六、代码

如果只需要在一句话中写一小段代码,可以使用一个反引号:

markdown
使用 `git pull` 更新代码

显示: 使用 git pull 更新代码 这里的:

text
`

叫做反引号,一般在键盘左上角,数字 1 的左边

十七、代码块

如果需要放一大段代码,可以使用三个反引号:

markdown
```javascript
console.log("Hello World");
```

显示:

javascript
console.log("Hello World");
十八、指定代码语言

三个反引号后面可以写代码语言 例如 JavaScript:

markdown
```javascript
const name = "雪";

console.log(name);
```

Python:

markdown
```python
name = "雪"

print(name)
```

HTML:

markdown
```html
<h1>Hello World</h1>
```

CSS:

markdown
```css
body {
  margin: 0;
}
```

常见语言:

text
javascript
typescript
python
java
c
cpp
html
css
json
bash
powershell
sql
十九、分割线

使用三个 -

markdown
---

显示:


也可以:

二十、表格

Markdown 可以非常简单地制作表格 基本格式:

markdown
| 姓名 | 年龄 | 城市 |
| --- | --- | --- |
| 小明 | 18 | 北京 |
| 小红 | 20 | 上海 |
| 小刚 | 19 | 广州 |

显示:

姓名年龄城市
小明18北京
小红20上海
小刚19广州

表格对齐

左对齐:

markdown
| 姓名 |
| :--- |
| 小明 |

居中:

markdown
| 姓名 |
| :---: |
| 小明 |

右对齐:

markdown
| 姓名 |
| ---: |
| 小明 |
二十一、转义特殊符号

Markdown 中有一些符号具有特殊作用 例如:

markdown
# 标题

会变成标题 如果你就是想显示 # 标题,可以在前面加反斜杠:

markdown
\# 标题

显示: # 标题

text
常见需要转义的符号:

```text
\*
\#
\-
\_
\`

简单理解:

在特殊符号前加 \,就可以让它失去 Markdown 的特殊功能。

二十二、HTML

Markdown 里面也可以使用部分 HTML 例如:

html
<b>这是粗体</b>

显示: 这是粗体 换行:

html
第一行<br>
第二行

不过对于 Markdown 小白来说,大多数情况下不需要使用 HTML 好啦,这些就够日常使用啦,其实也根本用不了这么多,但是可以了解一下,万一哪天想用一下呢!

结语

那么本期的内容就到此结束啦,本次文章有点长,主要是为了照顾新人小白,写的时候总想介绍的详细一点,避免再去其他的地方搜索,但是实际写下来可能还是无法完全覆盖所有内容,只能尽可能的全面一点啦,后续有别的内容,有时间也会补充一下的,雪想的是,将这篇文章做的尽可能完美,你说会不会有一天成为每个小白都会看的一个教程呢,但估计还得完善很久很久,比较要讲的真的太多太多了~