萌新的博客搭建日志

2.2k
技术向
博客valaxy

一个没什么基础的小白建成博客的流水账记录。
基本完工快一个星期才想起来写篇日志，文章将随着我博客的完善而更新。
一些基础步骤官方文档里都有些，这里就不赘述了，主要是提一些文档里没有的东西或者自己遇到的问题。
总结出来的经验用一句话总结就是：遇到什么事先仔细看文档，实在找不到可以尝试去issue里翻翻。

除了官方文档之外的其他参考教程：使用Valaxy搭建自己的博客-Mete0r

ToDo List ​

  • 友链页面
  • 网页收藏页面
  • 部分页面取消显示上一篇/下一篇文章、目录
  • 整体颜色修改（或许？）
  • 网站萌萌计数器
  • 评论系统（还在考虑要不要做）
  • 评论系统美化
  • live2d看板娘（或许？）

2025-06-17 ​

开始是看到了NotionNext项目，感觉省心又简单，尝试后发现主题自定义程度不高遂放弃，然后就在Github搜索可爱博客主题发现了hexo-theme-yun。是的我一开始找到的是Hexo框架的yun主题，根据文档部署完毕后发现没有demo网站的标题消失显示info的效果（因为demo网站已经是Valaxy框架了），折腾一晚上无果。

2025-06-18 ​

反复看了几遍文档才发现推荐使用Valaxy框架的提示，转去创建Valaxy博客，完成了最基础的部署工作。（Getting Start）

2025-06-19 ​

完成了site.config.ts和valaxy.config.ts的配置（Config），主要是卡在顶栏的自定义上很久。

顶栏自定义 ​

尝试自定义顶栏，但是文档中没有找到对应内容。折腾大半天后翻到了issue#550，先前顶栏是和下图红框部分一起由valaxy.config.ts中的pages属性控制的，但几周前作者启用了nav属性替代pages来描述顶部的导航信息，文档没有一起更新。 需要自定义顶栏，在valaxy.config.ts中如下配置即可：

ts
nav: [  
      {  
        text: '归档',  
        link: '/archives/',  
        icon: 'i-ri-archive-line',  
      },  
      {  
        text: '分类',  
        link: '/categories/',  
        icon: 'i-ri-folder-2-line',  
      },  
      {  
        text: '标签',  
        link: '/tags/',  
        icon: 'i-ri-price-tag-3-line',  
      },  
      {  
        text: '网页收藏',  
        link: '/links/',  
        icon: 'i-ri-links-fill',  
      }  
    ],

2025-06-20 ​

整理了一天以前在各平台发表的文章和图片。实现了GitHub Pages托管。（GitHub Pages）

文章整理和编辑 ​

选择使用obsidian进行文章管理和编辑，直接将pages或posts文件夹当作一个obsidian vault导入即可。需要注意的是，obsidian本地插入图片的语法与md标准语法不同，最好不要直接拖拽插入，建议手动输入。
当然也可以直接用vscode或其他软件进行编辑。
markdown语法可以参照这个网站：Markdown教程

文件命名规则 ​

博客文章链接一般为https://博客域名/posts/xxxxxxx，xxxxxxx这部分的内容就由文件名称决定。
我一开始选择从0000开始计数，后改成文章创建时间，如这篇日志是在25年6月26日开始写的，我就将其命名为20250626.md。

图片整理 ​

反复进行了三次的图片整理。
开始使用的本地储存图片，但发现此方案非常占用空间，最终还是决定采用用PicGo上传GitHub个人图床的形式。

ts
.
├── posts
│   ├── post1.md
│   ├── post2.md
│   └── img
│       ├── post1
│       │   ├── 1.jpg
│       │   └── 2.png
│       └── post2

PicGo+GitHub储存图片 ​

  • 新建GitHub仓库作为图床，在PicGo的releases中下载最新版本。
  • 在PicGo-图床设置-GitHub中选择相册进行配置
    • token获取：GitHub点击自己头像- Settings-Developer Settings-Personal access tokens-Tokens (classic)-Generate new token-Generate new token (classic)
    • 自定义域名可以填https://cdn.jsdelivr.net/gh/Github用户名/图床仓库名@分支名

GitHub Pages托管 ​

  • 在GitHub创建以GitHub用户名.github.io为仓库名的仓库
  • 在仓库Settings-Actions-General-Workflow permissions中勾选Read and write permissions
  • 将整个博客项目（即包含site.config.ts以及valaxy.config.ts的那个目录）上传至仓库
  • 博客项目已经自带了workflow相关配置，等待GitHub Pages部署完毕，在仓库Settings-Pages中选择gh-pages分支即可

2025-06-22 ​

遇到了GitHub Pages无法正常部署的问题，后发现是文章里包含无效文件链接导致。

2025-06-26 ​

更改post命名规则为文章创建时间。移除了主页的SiteLink和侧边栏的SocialLink+SiteLink。（自定义覆盖组件）

基础的主题更改 ​

执行pnpm dev在本地启用预览后，在页面底部点击vue图标打开devtool

点击devtool顶部中间的按钮，选中想要更改的组件，再点击右上角按钮，打开vue源文件查看代码。

想要修改样式的话，在博客项目下的components文件夹里创建同名vue文件，输入更改后的代码，即可覆盖原样式。

如我想删除主页的SiteLink，就在components文件夹下创建YunPrologueSquare.vue，并删除了原文件的SiteLink部分。

ts
<div
  class="mt-4 flex-center w-72 md:w-150 m-auto gap-2"
  flex="~ wrap"
>
  <YunSiteLinkItem
    :page="{
      name: '博客文章',
      icon: 'i-ri-article-line',
      url: '/posts/',
    }"
  />
  <slot />
  <YunSiteLinkItem
    v-for="item, i in themeConfig.pages"
    :key="i" :page="item"
  />
</div>

需要注意的是，有些模块导入语句的文件路径需要更改。
如YunPrologueSquare.vue的开头，原文件是这样的：

ts
import { ref } from 'vue'
import { useThemeConfig } from '../../composables'

我在components文件夹创建同名vue文件覆盖原样式时，需要改成：

ts
import { ref } from 'vue'
import { useThemeConfig } from 'valaxy-theme-yun/composables/config.ts'

2025-06-27 ​

实现了文章内插入音乐播放器，开始忘记给文章头部添加aplayer属性，想了好一会为什么不显示。（音乐播放器）
删除了部分页面（包括个人简介、网站简介、分类等页面）底部的文章前后跳转和目录组件。
实现了评论功能。
页脚加入了萌备和计数器。
完成友链页面。

部分页面组件删除 ​

如图所示，每篇post底部都有文章前后跳转组件，yun主题在默认情况下，个人、网站简介及分类等页面也都会显示。 删除方法文档没有写，但在部分index.md的头部属性里已经包含了。
如删除文章前后跳转组件，需要在md文件头部添加：

ts
nav: false

同理，删除目录组件（右侧边栏还在）：

ts
toc: false

删除右侧边栏：

ts
aside: false

删除评论组件（如果存在）：

ts
comment: false

使用waline评论系统 ​

waline官方文档——快速上手
valaxy官方文档——第三方评论：waline
这两篇文档已经讲的很清楚了，下面提两个遇到的报错

Failed to fetch ​

vercel的deployment完成后visit显示的地址和后续在vercel项目中打开的地址不一样，注意serverURL需要填写后者

The request timed out on the server. Typically this indicates the request is too expensive. ​

具体原因尚不清除，第一次测试评论弹出的报错，第二次尝试就没问题了。

萌萌计数器（快速使用版） ​

Moe-Counter项目
直接进入demo网站，下拉找到Tool部分，设置完参数点击Generate，即可生成自己的萌萌计数器链接，该链接每被刷新一次就会记一次数。将计数器链接插入页脚即可，插入方式。

计数器也可以自己部署，不过我没有研究过，需要另外搜索教程。

友链 ​

打开博客项目-pages-links-index.md，修改头部属性links: /links.json
在博客项目-public内创建links.json文件，然后按照以下格式填写友链即可：

ts
[
{
	"url": "博客URL",  
    "avatar": "头像URL",  
    "name": "博客名称",  
    "blog": "博客名称",  
    "desc": "博客描述",  
    "color": "按钮颜色"
},
{
}
]
一些个人代肝心得的分享