关于使用 VALAXY + Github + Cloudflare Pages 搭建博客的个人经验分享

为什么选择 Valaxy

valaxy是一个由云游君开发的静态博客框架。

我选择使用它来搭建自己的个人博客,valaxy简单易用而且支持热重载。

我最喜欢它的点是大多数情况下更改网站配置或是编写文章只要按下 ctrl + s 保存就可以立刻在预览中看到效果。

流程

「本地安装调试valaxy和写博客」>「推送到Github仓库」>「Cloudflare Pages从Github仓库获取到文件并部署」

需求

一个Github账号

一个Cloudflare账号

一个域名

本地电脑安装gitnode.js(Node.js版本需为20.19.0之后的版本,本次我使用Node.js 23)

系统环境

本地电脑:Fedora 43 系统

安装 Node.js

Node.js (版本需高于 20.19.0),前往NodeSource获取适用于当前使用的发行版的安装方法,本次使用 Fedora 43 安装 node.js 23 。 Windows系统参见node.js官网获取

#需要curl,如果未安装则先使用包管理器安装curl
sudo dnf install curl

#下载设置脚本
curl -fsSL https://rpm.nodesource.com/setup_23.x -o nodesource_setup.sh

#以 root 权限运行脚本
sudo bash nodesource_setup.sh

#验证安装情况
node -v

Corepack是一个node.js官方推出的包管理器管理器,开启它可以让我使用pnpm。

#激活 Corepack
sudo corepack enable

配置 Valaxy

在本地创建项目,跟随命令行提示完成即可

pnpm create valaxy

创建好项目后,进入刚才创建的文件夹中安装依赖并启动预览

cd valaxy #进入刚才创建好的文件夹中,本次我创建的文件夹是 valaxy
pnpm -i #安装依赖
pnpm dev #启动预览

启动预览后,查看本地 localhost:4859即可查看预览

主要需要修改的有3个地方:

site.config.ts 这是站点信息配置,在不同主题中也是通用的

valaxy.config.ts 这是主题配置

pages文件夹 这是主要存放文章的文件夹

site.config.ts 这里贴一个我自己使用的配置文件,你可以将它复制粘贴然后修改一下内容即可使用。更多详细配置可参见站点配置

typescript
import { defineSiteConfig } from 'valaxy'

export default defineSiteConfig({
  url: '博客网址', 
  lang: 'zh-CN', //默认语言 
  languages:['zh-CN'], //支持的语言
  title: '标题', 
  subtitle:"副标题", 
  description: '描述',
  favicon:'', //网站图标的路径
  /**
   * 把图片文件放入 public 文件夹
   * 假设图片的路径是 public/picture.png
   * 直接填写 picture.png 即可 
  */
  //赞助信息
  sponsor:{
    enable: false,
    title:"",
    description:"",
  },
  //作者信息
  author: {
    name: '', 
    avatar:'', //头像文件路径,图片应放入 public 文件夹
    status:{
      emoji:"🐱", //头像旁的小心情图标
      message:"鼠标悬浮显示的文字状态" 
    },
    intro: '这里是个人简介' 
  },
  search: {
    enable: false, //搜索功能是否开启,开启需要额外配置
  }
})

valaxy.config.ts 主题配置我使用的是默认的 yun 主题,可以访问官方文档来了解如何使用其他主题。以下是我所使用的配置文件,更多详细配置参见valaxy-theme-yun主题配置

typescript
import type { UserThemeConfig } from 'valaxy-theme-yun'
import { defineValaxyConfig } from 'valaxy'

// add icons what you will need
const safelist = [
  'i-ri-home-line',
  'i-ri-emotion-happy-line',
]

/**
 * User Config
 */
export default defineValaxyConfig<UserThemeConfig>({
  // site config see site.config.ts

  theme: 'yun',

  themeConfig: {
    type: "nimbo",  //主题类型, nimbo or strato 
    colors: {    
      primary: '#0078E7' //主题色
    },
    
    //欢迎动画
    banner: {
      enable: true, 
      title: ["你好","世界"], //标题,默认每个字分割,你也可以通过数组的方式来自定义分割,如 ['Hello', 'World']
      cloud: {
        enable : false //是否启用动态云朵特效
      },
      duration: 500, //动画持续时间(毫秒)
    },
    
    /**
     * 背景图配置
     * 若需开启,请取消下方块注释
     */
    /*
    bg_image: {
      enable: false,            // 是否开启背景图
      url: '',                  // 亮色模式下的背景图片地址
      dark: '',                 // 深色模式下的背景图片地址
      opacity: 0.8,             // 图片不透明度 (0-1)
    },
    */
    
    //说点什么模块
    say:{
      enable: false,
      api: "",
      hitokoto: {
        enable: false,
        api: "",
      }
    },
    
    //自定义页面导航
    pages: [
      {
        name: '关于我',
        url: '/about/',
        icon: 'i-ri-emotion-happy-line',
        color: '#0078E7',
      },
    ],
    
    //页脚
    footer:{
      cloud: {
        enable: false //是否启用动态云朵特效
      },
      since: 2026, //建站年份
      powered: true, //是否显示 Powered by valaxy & valaxy-theme-${name}, default is yun
      icon:{
        enable : false
      } 
    },

    //点击时的烟花特效
    fireworks:{
      enable: true,
      colors: ['#66A7DD', '#3E83E1', '#214EC2']
    }
    },
      
  unocss: { safelist },
})

pages文件夹 我们的页面和文章就放在这里,posts文件夹存放我们的文章。 其他文件夹中的index可以修改但不建议删除,如果暂时不想配置的话可以修改文件只保留头文件

---
layout: xxx (about、archives、categories等等...)
---

文章使用markdown写即可,但与写笔记不同,需要写头文件

---
title: 标题
date: 2025-12-31
categories:
  - 分类
tags:
  - 标签1
  - 标签2
---
这里是正文内容

使用 Github 私有仓库和 Cloudflare Pages 部署博客

  1. 在 Github 上创建一个私有仓库
  2. 设置本地 git 仓库
#进入本地的 valaxy 目录

#初始化本地仓库
git init  

#将所有文件添加到暂存区(valaxy已配置了.gitignore排除不需要的文件。直接执行就好)
git add . 

#提交到本地仓库
git commit -m "initial commit"

#如果默认分支名不为main,强制将当前分支重命名为 main
git branch -M main

#添加Github仓库的完整URL,将 <YOUR_GITHUB_REPO_URL> 替换为Github仓库的完整URL
git remote add origin <YOUR_GITHUB_REPO_URL>

#推送
git push -u origin main
  1. 使用 Cloudflare Pages 进入 Cloudflare 账户主页 > 点击右上角的 ‘+’ 号 > 选择 页面(Pages) > 选择 ‘导入现有Git存储库’ > 添加账户并选择存储库 >

构建设置:

框架预设:无

构建命令:pnpm build

构建输出目录:dist

高级设置:

环境变量>添加变量

变量名称:NODE_VERSION

值:23

保存并部署

现在已经部署完成了,最后一步: 在Cloudflare网站侧边栏找到 「Workers 和 Pages」 > 点击进入刚才创建好的 Pages 项目 > 找到「自定义域」 > 设置自定义域为自己的域名(如果域名是在其他平台购买的,记得将 DNS 服务器指向 Cloudflare) > 完成了,稍等片刻,网站就与域名关联好了

至此,一个基于 Valaxy 的个人博客就搭建完成了

Hello World