IT博客汇 | 重构博客,底层换成Astro时候遇到的问题

重构博客,底层换成Astro时候遇到的问题

AsyncX发表于 2023-11-09 11:11:00

前些天用Cloudflare加速了Hexo,瞄了一眼博客<foot>下面的busuanzi计数. 每次页面刷新都会被读取并进行一次访客录入着实烦人,于是打算趁着有兴趣把博客重构了.

安装Astro

前提

Node.js - v18.14.1 或更高版本。
包管理我使用了Yarn

# 使用yarn创建astro项目(如果你打算搭建博客,请跳过此步骤)
yarn create astro

你可以在计算机上的任何位置运行 create astro，因此在开始之前无需为你的项目创建一个新的空目录。如果你的新项目还没有空目录，该向导会帮你自动创建一个。

配制

由于我打算使用iCloud进行同步,所以我创建了文件夹,在文件架内的根目录进行了构建. 如果你打算用来搭建博客,请使用下面的指令直接复制博客模板,你可以在Astro官网找到你想要的模板

# 基于某个 GitHub 仓库的 main 分支创建一个新项目
yarn create astro --template <github-username>/<github-repo>

部署Astro

Github Pages

需要注意的是,不同于hexo需要进行以下指令

hexo clean #清空生成文件
hexo g #生成静态页面
hexo s #进行预览
hexo d #进行推送

Astro会实时的根据你的修改进行刷新,因此部署方式会和hexo不同,你可以参照官网的部署方式进行部署.本文使用Github Pages进行部署,因此会提及部署中出现的问题. 根据官网所述,创建好库后使用Actions进行推送,这意味着你需要为库本身开启Github Pages,如果之前你在你的name.github.io库中撰写博客,你需要停用掉io库的pages.

额外配制

添加Google Analytics

安装Partytown

大部分的主题中都没有安装谷歌分析的包,你可以通过官网所提供的partytown进行进一步安装. 打开astro.config.js,添加

import { defineConfig } from "astro/config";
import partytown from "@astrojs/partytown";

export default defineConfig({
  integrations: [
    partytown({
      // 为partytown添加下面的内容即可
      config: {
        forward: ["dataLayer.push"],
      },
    }),
  ],
});

添加到head

将 Google Analytics 跟踪代码嵌入到布局文件中。

<!DOCTYPE html>
<html lang="zh">
    <head prefix="og: https://ogp.me/ns#">
        <!-- Google tag (gtag.js) -->
        <script type="text/partytown" src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
        <script type="text/partytown">
            window.dataLayer = window.dataLayer || [];
            function gtag() {
                dataLayer.push(arguments);
            }
            gtag('js', new Date());
            gtag('config', 'GA_MEASUREMENT_ID');
        </script>
    </head>
    <body>
        <slot />
    </body>
</html>

记得修改成你的分析代码.

添加giscus作为评论

我本来想要使用原先的utterances作为评论系统,不幸的是不知道什么原因导致的不能成功加载,就更换了giscus.你可以点击链接进行进一步配制.傻瓜配置.