使用 Astro 和 AstroPaper 主题搭建博客

一、本地环境准备

使用的 Windows 操作系统，需要的环境包括 nodejs、pnpm、git 等。

# 检查 Node.js 版本（需要 18.17.1 或更高）
node -v

# 推荐使用 pnpm 作为包管理器
npm install -g pnpm

# 检查 Git
git --version

nodejs 可到 nodejs.org 官网下载 LTS 版本。

下载 git 安装。

如果要做自定义修改，可在 VS Code 中打开，安装 Astro 官方扩展（一般会有提示，点击安装即可）获得语法高亮和智能提示。

二、创建项目

这里使用 AstroPaper 主题模板创建。

pnpm create astro@latest my-blog --template satnaing/astro-paper

cd my-blog
pnpm install
pnpm dev

运行 pnpm dev 命令时，遇到了错误，是关于 experimental 特性的，AstroPaper 主题使用此特性引入谷歌字体，配置在根目录下的 astro.config.ts 文件中：

export default defineConfig({
  experimental: {
    preserveScriptOrder: true,
    fonts: [
      {
        name: "Google Sans Code",
        cssVariable: "--font-google-sans-code",
        provider: fontProviders.google(),
        fallbacks: ["monospace"],
        weights: [300, 400, 500, 600, 700],
        styles: ["normal", "italic"],
      },
    ],
  },
});

参考文档使用自定义字体，fonts 属性已经转正了，大概时我升级了 Astro 的缘故吧。

export default defineConfig({
  fonts: [
    {
      name: "Google Sans Code",
      cssVariable: "--font-google-sans-code",
      provider: fontProviders.google(),
      fallbacks: ["monospace"],
      weights: [300, 400, 500, 600, 700],
      styles: ["normal", "italic"],
    },
  ],
  experimental: {
    // 从这里移出去
  },
});

由于国内访问不到谷歌字体，可以考虑下载下来保存到项目里，然后引用：

export default defineConfig({
  fonts: [
    {
      name: "Google Sans Code",
      cssVariable: "--font-google-sans-code",
      provider: fontProviders.local(),
      options: {
        variants: [
          {
            src: [
              "./src/assets/fonts/GoogleSansCode-VariableFont_wght.a41q3NA0.ttf",
            ],
            weight: "normal",
            style: "normal",
          },
        ],
      },
    },
  ],
});

三、个性化配置

配置设置可参考文档，在 src/config.ts 文件修改，本博客配置示例：

export const SITE = {
  website: "https://www.ruaruan.com", // replace this with your deployed domain
  author: "RuaRuan",
  profile: "https://github.com/hefengbao",
  desc: "有一点想法想要说说",
  title: "RuaRuan",
  ogImage: "ruaruan.png",
  lightAndDarkMode: true,
  postPerIndex: 5,
  postPerPage: 10,
  scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
  showArchives: true,
  showBackButton: true, // show back button in post detail
  editPost: {
    enabled: false,
    text: "编辑",
    url: "https://github.com/hefengbao/RuanRuan/edit/main/",
  },
  dynamicOgImage: true,
  dir: "ltr", // "rtl" | "auto"
  lang: "zh", // html lang code. Set this empty and default will be "en"
  timezone: "Asia/Shanghai", // Default global timezone (IANA format) https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
} as const;

另外就是汉化，可以 src/components、src/layouts、src/pages 目录下的文件中的英文修改为汉语。

四、写作

参考 src/data/blog 目录下的 md 文件，复制一份，写自己的内容。然后可以删除其他的文件。

五、Github Page 部署

参考官方文档部署你的 Astro 站点至 GitHub Pages