Getting Started
Overview
总览
Valaxy = V + Galaxy 旨在成为下一代静态博客框架,提供更好的热更新与用户加载体验、更强大更便捷的自定义开发可能性。
你可以在 为什么选 Valaxy 中了解更多关于项目的设计初衷。
Valaxy = V + Galaxy aims for the next generation static blog framework, providing better hot reloading and user loading experience, with easier and powerful customization support.
You can learn more about the original intensions for this project in Why Valaxy.
Create a Valaxy Project
创建 Valaxy 项目
Example: yun.valaxy.site
示例: yun.valaxy.site
Try it Online
在线试用
你可以通过 StackBlitz 在线试用 Valaxy(默认使用主题 valaxy-theme-yun)。
这是一个极简项目,您仅需以下几个文件,就可以快速搭建好你的博客!
pages
文件夹:存放页面/文章valaxy.config.ts
Valaxy 配置文件package.json
记录依赖
You can use StackBlitz to try Valaxy online (the default theme used is valaxy-theme-yun).
This is an extremely simple project. You only need the following files to rapidly build your own blog!
pages
folder: storing the pages/postsvalaxy.config.ts
: Valaxy’s configuration filepackage.json
: dependencies
Locally
在本地创建
兼容兼容
由于 Vite 要求 Node.js 的版本为 14.18+, 16+,Valaxy 同样需要你将 Node.js 升级至 14.18 版本之后。
如果您想要在本地创建,只需要执行以下命令:
Compatibility NoteCompatibility Note
Vite requires Node.js version 14.18+, 16+. Valaxy also requires you to upgrade Node.js after version 14.18+.
由于
npm init
会缓存您此前下载的版本,我更推荐您使用pnpm
来创建模版。 安装 pnpm:npm i -g pnpm
Since
npm init
caches your previously downloaded version, I would recommend usingpnpm
to create templates. Install pnpm:npm i -g pnpm
pnpm create valaxy
npm init valaxy
You will be greeted with a few simple questions.
🌌 Valaxy v0.20.4 ? Select a type: › - Use arrow-keys. Return to submit. ❯ Blog - For Most Users 【Press Enter】 Theme - For Theme Developers Addon - For Addon Developers ? Project name: › valaxy-blog 【Press Enter】 📁 /root/repos/valaxy-blog Scaffolding project in valaxy-blog ... Done. ? Install and start it now? › (Y/n) Press Y ? Choose the agent › - Use arrow-keys. Return to submit. npm yarn ❯ pnpm 【Press Enter】
跟随命令行提示完成创建!
默认使用主题 valaxy-theme-yun,当然您也可以安装使用任意其他主题。 本文档同样是一个 Valaxy 主题 valaxy-theme-press,它的灵感来自 VitePress。
Follow the prompt in the commandline to complete the process!
The default theme used is valaxy-theme-yun, but you can also install any other themes. This documentation is also a Valaxy theme: valaxy-theme-press. It is inspired by VitePress.
Usage
使用
进入你创建好后的文件夹目录后,执行以下命令。 譬如:
cd valaxy-blog
。
安装依赖:
Enter the folder for the Valaxy project you just created, and execute the following commands. For example:
cd valaxy-blog
.
Install the dependencies:
# install
pnpm i
# install
npm i
启动预览:
Start a preview:
# start
pnpm dev
# start
npm run dev
博客创建完毕,查看本地 http://localhost:4859/
,玩的开心!
See http://localhost:4859/
, have fun!
- See Config and Custom Extensions for the general configuration for Valaxy blogs.
- For configuring Valaxy themes, please see the documentation for the corresponding themes. (Docs for Valaxy Theme Yun is still work in progress)
Config
配置
Modify valaxy.config.ts
to custom your blog.
Documentation is being improved!
修改 valaxy.config.ts
来自定义你的博客吧。
文档正在不断完善中!
Deployment
部署
部署可参见 部署|指南。
See Deployment for deployment guide.
Upgrading
升级
cd your-blog
# upgrade valaxy
pnpm add valaxy@latest
# upgrade theme
pnpm add valaxy-theme-yun@latest
cd your-blog
# upgrade valaxy
npm i valaxy@latest
# upgrade theme
npm i valaxy-theme-yun@latest
pnpm
你可以使用 pnpm 的交互升级命令。
You can use the interactive upgrade command provided by
pnpm
.
# interactive upgrade
pnpm up --latest -i
Migration
迁移
If you are from another blog framework, you can refer to Migration.
如果你来自其他博客框架,可参考 迁移。
Directory Structure
目录结构
In most cases, you only need to work in the pages
folder.
在大部分情况下,你只需要在 pages
文件夹下进行工作,编写文章。
Main folders
主要的文件夹
pages
: your all pagesposts
: write your posts here, will be counted as posts
styles
: override theme styles,index.scss
/vars.csss
/index.css
will be loaded automaticallycomponents
: custom your vue components (will be loaded automatically)layouts
: custom layouts (use it bylayout: xxx
in md)locales
: custom i18n
pages
: 你的所有页面posts
: 写在pages/posts
文件夹下的内容,将被当作博客文章
styles
: 覆盖主题样式,文件夹下的这些 scss 文件将会被自动加载index.scss
/index.css
css-vars.scss
/css-vars.css
components
: 自定义你的组件(将会被自动注册)layouts
: 自定义布局 (譬如可以通过layout: xxx
来使用layouts/xxx.vue
布局)locales
: 自定义国际化关键词
Others
其他
Themes
主题
If you want to develop a theme and released, you can refer to valaxy-theme-starter.
如果您希望自己开发一个主题并发布,您可以参考 valaxy-theme-starter。
更多内容请参见 如何编写一个 Valaxy 主题。
Community
社区
If you have questions or need help, you can go to the Discord and Discussions to ask for help.
如果你有疑问或者需要帮助,可以到 Discord 和 GitHub Discussions 社区来寻求帮助。
Q.E.D.