Butterfly主题博客之域名申请及解析
阿里云域名申请+Vercel解析一、Vercel1. 简介Vercel 是一个提供网站部署和前端开发服务的云平台，它支持静态网站和动态网站的应用部署、预览和上线。Vercel 特别以与 JavaScript 框架 Next.js 的无缝集成而闻名，尽管它也支持从其他框架和技术部署。它提供了快速部署、自动化部署、无服务器功能、自定义域名、HTTPS 支持、分支部署、团队协作等功能，确保应用程序具有高性能和可靠性。 2. 部署Vercel2.1 注册账号打开Vercel官网登录页面，点击右上角的 Sign Up 进行注册 个人用户就选择第一项“Hobby”的选项，然后输入一个用户名 之后跳转到新的页面，点击Continue with GitHub 在连接GitHub的页面中，如果这个浏览器之后登陆过GitHub，直接点击 Authorize Vercel 授权即可；如果没有登录过，则需要先登录自己的GitHub账号 2.2 添加新项目 点击 Install 按钮进入仓库选择界面 在选择仓库界面选择你GitHub中博客所在的仓库，点击Install按钮导入。 输入GitHu...
Butterfly主题博客之添加相册和音乐页
一、插件的安装与配置1.安装hexo-tag-aplayer插件执行命令： 1npm install --save hexo-tag-aplayer 2.配置插件找到项目文件夹根目录下的 _config.yml文件，添加如下代码： 123aplayer: meting: true asset_inject: false 之后打开 _config.butterfly.yml文件，进行修改，这是为了引入刚才下载的插件。 1234# Inject the css and script (aplayer/meting)aplayerInject: enable: true per_page: true 二、音乐页面1.创建页面如果还没有创建音乐页面，那就用以下命令创建： 1hexo new page music 运行之后就会在source文件夹下生成一个music文件夹 打开music文件夹下的index.md文件，添加如下代码： 1{% meting "17375390739" "netease" "playlist...
Butterfly主题博客之页脚美化
Butterfly主题之页脚美化一、配置运行时间和动态版权图标1.添加js文件info 提示块标签 首先确保在搭建博客的时候已经将theme->butterfly文件夹下的_config.yml文件复制到项目根目录下，并重命名为 _config.butterfly.yml，如下图所示： 在此基础上，在source目录下创建scripts文件夹，然后在其中新建一个xxx.js，内容如下： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566//版权图标动态显示document.addEventListener('DOMContentLoaded', function() { const currentYear = new Date().getFullYear(); const copyrightElement = document.quer...
Butterfly主题博客之制作分类和标签页
博客添加分类和标签页一、添加“分类”页1.生成“分类”页并添加type属性使用任意编辑器打开项目文件夹，打开终端或者在项目文件夹中鼠标右键，点击“Open Git Bash here” 执行命令： 1hexo new page categories 会在/source/categories目录下面生成一个index.md文件，打开之后默认内容如下： 1234---title: categoriesdate: 2025-10-28 15:37:20--- 添加 type: “categories” 到内容中，这样是为了在网页中点击“分类”可以跳转到这个页面中，添加后是这样的： 12345---title: categoriesdate: 2025-10-28 15:37:20type: "categories"--- 2.给文章添加“categories”属性新建文章或者在之前写好的文章中添加categories属性 1234567title: 搭建个人图床服务date: 2025-10-28 20:25:41tags: - 阿里云 - Pic...
搭建个人图床服务
阿里云OSS服务+PicGo+Typora搭建图库一、配置阿里云OSS服务1.首先注册登录阿里云平台阿里云-计算，为了无法计算的价值 依次点击产品->存储->对象存储OSS，进入以下页面 现在可以免费试用 2.创建Bucket,还是进入OSS对象存储，如果找不到就搜索，进入管理控制台。名称自定义，后面要用，地域选择离自己近的，读写权限改为公共读，其他保持默认，点击确定。 3.打开读写权限 记住自己的Bucket列表名和区域名 我这里是my-blogimages和oss-cn-qingdao 然后点击文件列表，新建一个目录。 4.创建RAM用户 创建子用户：在阿里云中找到 RAM访问控制-身份管理-用户-创建用户，登录名称任意，勾选允许 OpenAPI 调用访问，创建完成后会得到一组 AccessKey ID 和 AccessKey Secret，需要保管好，后续会用到。 添加权限 主要是记住：AccessKey ID和AccessKey Secret 二、PicGo下载与配置PicGo 是一款开源的图床管理工具，旨在简化图片上传过程，支持多种图床...
Butterfly主题博客之搭建教程
Hexo+Github搭建博客教程一、环境准备1.Node.js安装Node.js是Hexo的运行环境，必须先安装。 官网下载Node.js — Run JavaScript Everywhere 默认选项安装，一路点击“确认” win+R输入cmd，打开命令提示符验证安装： 12#检查 Node.js 版本node -v 返回版本信息则代表安装成功！ 然后进行npm换源，运行： 1npm config set registry https://registry.npmmirror.com 无报错则安装完成！ 2.Git安装 下载Git:Git - Install 选择[Git for Windows/x64 Setup] 安装时选择默认选项，一路选择回车 验证安装： 1git --version 出现版本号则说明安装成功！ 3.安装Hexo 在Windows搜索栏中搜索“Git Bash”，打开。 输入以下指令： 1npm install -g hexo-cli 安装之后，运行下面指令： 1hexo -v 验证是否安装成功，当出现版本号则说明安装成功！ ...
我的第一篇博客
第一篇博客跟着视频教程一步步终于搭建好了属于自己的博客，期间也遇到过许多问题，不过也都一一上网查找解决了。搭建博客的初衷是想在里面记录一下自己的生活和学到的一些技术知识，方便以后查找复习。