前些天用Cloudflare加速了Hexo,瞄了一眼博客<foot>下面的busuanzi计数.
每次页面刷新都会被读取并进行一次访客录入着实烦人,于是打算趁着有兴趣把博客重构了.
Yarn# 使用yarn创建astro项目(如果你打算搭建博客,请跳过此步骤)
yarn create astro你可以在计算机上的任何位置运行 create astro，因此在开始之前无需为你的项目创建一个新的空目录。 如果你的新项目还没有空目录，该向导会帮你自动创建一个。
由于我打算使用iCloud进行同步,所以我创建了文件夹,在文件架内的根目录进行了构建. 如果你打算用来搭建博客,请使用下面的指令直接复制博客模板,你可以在Astro官网找到你想要的模板
# 基于某个 GitHub 仓库的 main 分支创建一个新项目
yarn create astro --template <github-username>/<github-repo>需要注意的是,不同于hexo需要进行以下指令
hexo clean #清空生成文件
hexo g #生成静态页面
hexo s #进行预览
hexo d #进行推送Astro会实时的根据你的修改进行刷新,因此部署方式会和hexo不同,你可以参照官网的部署方式进行部署.本文使用Github Pages进行部署,因此会提及部署中出现的问题.
根据官网所述,创建好库后使用Actions进行推送,这意味着你需要为库本身开启Github Pages,如果之前你在你的name.github.io库中撰写博客,你需要停用掉io库的pages.
大部分的主题中都没有安装谷歌分析的包,你可以通过官网所提供的partytown进行进一步安装.
打开astro.config.js,添加
import { defineConfig } from "astro/config";
import partytown from "@astrojs/partytown";
export default defineConfig({
integrations: [
partytown({
// 为partytown添加下面的内容即可
config: {
forward: ["dataLayer.push"],
},
}),
],
});
将 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>记得修改成你的分析代码.
我本来想要使用原先的utterances作为评论系统,不幸的是不知道什么原因导致的不能成功加载,就更换了giscus.你可以点击链接进行进一步配制.傻瓜配置.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。