2804 字
14 分钟Add commentMore actions
从零开始的博客生活

前言#

这个博客模板是用 Astro + Fuwari 构建的。对于本指南中未提及的内容,您可以在 Astro 文档 中找到答案。

你需要准备的东西#

  • 一个会动的脑子,支持并行运算至少两个单位以上的事件。遇到问题先思考,想不通就搜索,搜索不到就去和AI调情,不要上来就问问问
  • Git:版本控制器,这里用于对Github进行操作,可参见Git使用指南
  • Node.js — Run JavaScript Everywhere:Fuwari基于Node.js,你需要安装这个来搭建博客
  • Visual Studio Code - 代码编辑:因为Fuwari的每一篇文章/页面都是MarkDown,所以需要一个好用的编辑器
  • 一个Github账号:用于创建一个代码仓库存放Fuwari文件
  • 你得会用MarkDown语法来编写文章,如果你不会可以参见:Markdown 基本语法 | Markdown 官方教程

部署#

  1. Fork仓库: https://github.com/saicaca/fuwari

fuwari 推荐【使用此模板】创建相关仓库

  1. 然后将仓库克隆到本地:git clone <你的仓库URL>(推荐使用SSH,可以不用魔法来推送更改)也可以在vscode中使用git拉取仓库直接管理

  2. 首先,全局安装pnpm:npm install -g pnpm(如果npm国内拉取过慢,请尝试cnpm:npmmirror 镜像站

  3. 然后在项目根目录安装依赖:pnpm installpnpm add sharp

命令行动
pnpm install和pnpm add sharp安装依赖项
pnpm dev启动本地开发服务器localhost:4321
pnpm build构建您的生产站点./dist/
pnpm preview在部署之前在本地预览您的构建
pnpm new-post 创建新帖子
pnpm astro …运行 CLI 命令astro add,例如astro check
pnpm astro —help获取使用 Astro CLI 的帮助
  1. 至此,你即可通过pnpm dev在本地部署Fuwari,地址栏输入localhost:4321即可直接访问该博客
TIP

你也可以使用创建一个新的空仓库然后手动上传文件,并且可以将仓库可见性设为:Private

改写Fuwari的基本信息并且清理多余文件#

刚创建的Fuwari可能带有一些示例的博主名,ICON,URL,介绍和示例文章,为了让用户知道这是你的博客,我们需要一一改写

  1. 在根目录下的 src 文件夹中,你可以找到 config.ts 来开始改写
    • title:你的博客主标题
    • subtitle:你的博客副标题。可选,在首页会显示为“主标题 - 副标题”
    • lang:博客显示语言。注释已经列出了一些常用的值,如:en, zh_CN, zh_TW, ja, ko
    • themeColor:hue值则是你的博客主题色,可以在你的博客右上角的画板图标确定喜欢的颜色再填写 主题色
    • banner:src:即banner图片,支持http/https URL
    • favicon:src:即网站图标,支持http/https URL
    • links:即友情链接,这些链接在导航栏上
    • avatar:即你的头像
    • name:即你的名字
    • bio:即个性签名,会显示在头像和名字下面
    • NavBarConfig 为导航栏设置的超链接。ProfileConfig 为你的用户的超链接,分别如图
    • icon:你需要前往 icones.js 去搜索你想要的图标,比如QQ,则填写 fa6-brands:qq ,如图。Fuwari默认支持这几种类型:fa6-brands, fa6-regular, fa6-solid, material-symbols。可以在项目根目录终端输入 pnpm add -D @iconify-json/fa6-brands即可安装相关依赖,然后在 astro.config.mjs 中搜索关键字进行配置 icon
    • 提供一份添加了注释的config.ts
import type {
LicenseConfig,
NavBarConfig,
ProfileConfig,
SiteConfig,
} from "./types/config";
import { LinkPreset } from "./types/config";
export const siteConfig: SiteConfig = {
title: "你的标题",
subtitle: "你的副标题",
lang: "en", // 'en', 'zh_CN', 'zh_TW', 'ja', 'ko', 'es', 'th'
themeColor: {
hue: 250, // 主题色的默认色调,范围从0到360。例如:红色:0,青色:200,青蓝色:250,粉色:345
fixed: false, // 隐藏访客的主题色选择器
},
banner: {
enable: false,
src: "assets/images/demo-banner.png", // 相对于 /src 目录。如果以 '/' 开头,则相对于 /public 目录
position: "center", // 对应于 object-position,仅支持 'top'、'center'、'bottom'。默认为 'center'
credit: {
enable: false, // 显示横幅图片的署名文字
text: "", // 要显示的署名文字
url: "", // (可选) 链接到原始艺术作品或艺术家页面
},
},
toc: {
enable: true, // 在文章右侧显示目录
depth: 2, // 显示的最大标题深度,从1到3
},
favicon: [
// 留空此数组以使用默认的图标
// {
// src: '/favicon/icon.png', // 图标路径,相对于 /public 目录
// theme: 'light', // (可选) 仅当您有浅色和深色模式的图标时设置,值为 'light' 或 'dark'
// sizes: '32x32', // (可选) 图标大小,仅当您有不同大小的图标时设置
// }
],
};
export const navBarConfig: NavBarConfig = {
links: [
LinkPreset.Home,
LinkPreset.Archive,
LinkPreset.About,
{
name: "GitHub",
url: "https://github.com/saicaca/fuwari", // 内部链接不应包含基础路径,因为它会自动添加
external: true, // 显示外部链接图标并在新标签页中打开
},
],
};
export const profileConfig: ProfileConfig = {
avatar: "assets/images/demo-avatar.png", // 相对于 /src 目录。如果以 '/' 开头,则相对于 /public 目录
name: "Lorem Ipsum", //主页名字
bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
links: [
{
name: "Twitter",
icon: "fa6-brands:twitter", // 访问 https://icones.js.org/ 获取图标代码
// 如果未包含相应图标集,则需要安装它
// `pnpm add @iconify-json/<icon-set-name>`
url: "https://twitter.com",
},
{
name: "Steam",
icon: "fa6-brands:steam",
url: "https://store.steampowered.com",
},
{
name: "GitHub",
icon: "fa6-brands:github",
url: "https://github.com/saicaca/fuwari",
},
],
};
export const licenseConfig: LicenseConfig = {
enable: true,
name: "CC BY-NC-SA 4.0",
url: "https://creativecommons.org/licenses/by-nc-sa/4.0/",
};
  1. 清理多余文件。在根目录下的 src/content/posts 文件夹中会有一些示例文章,这些文章介绍了一些MarkDown语法和技巧,可以让你更快上手astro和fuwari,我们可以将其保存到别处
  2. 可以酣畅淋漓的码字了

让我们开始写作!#

首先,在项目根目录终端执行:pnpm new-post <这里填写你的文章标题>

然后,在根目录下的 src/content/posts 文件夹中会多出一个xxx.md文件

我们使用VSCode打开这个文件,你可以看到一些基本信息,我们只需要关注几个重要的信息

文章的前置元数据#

---
title: 我的第一个博客文章
published: 2023-09-09
description: 这是我的新 Astro 博客的第一篇文章。
image: ./cover.jpg
tags: [Foo, Bar]
category: 前端
draft: false
lang: en
pinned: true
comments: true
series: ""
---
属性描述
title文章的标题。
published文章发布的日期。
description文章的简短描述。显示在索引页面上。
image文章的封面图片路径。
1. 以 http://https:// 开头:使用网络图片
2. 以 / 开头:用于 public 目录中的图片
3. 无前缀:相对于 Markdown 文件
tags文章的标签。
category文章的分类。
draft如果这篇文章仍然是草稿,则不会显示
lang文章的语言与博客语言不同时需要填写
pinned文章是否置顶于博客首页
comments文章是否开启评论功能
series文章被分配到的系列名
NOTE

以上内容为后续添加内容 请点击相关页面查看如何修改

放置文章文件的位置#

您的文章文件应放置在 src/content/posts/ 目录中。您还可以创建子目录来更好地组织您的文章和资源。

src/content/posts/
├── post-1.md
└── post-2/
├── cover.png
└── index.md

站点URL修改#

我们还需要更改根目录下的 astro.config.mjs 。在第34行更改 stie: 为你的站点URL,如: site: "https://p1ume.vercel.app"

// https://astro.build/config
export default defineConfig({
site: "https://p1ume.vercel.app/", //修改的站点地址
base: "/",
trailingSlash: "always",
integrations: [
tailwind({
nesting: true,
}),

图片置入#

欸?有的人就会问了,MarkDown固然好,但是我要如何处理图片的置入呢?,很简单直接往VSCode的IDE中粘贴图片即可在该文章目录处复制一份图片,参考放置文章文件的位置,要做好文件管理嗷

NOTE

记得在vscode中安装Markdown all in one astro Biome 插件嗷

TIP

本地图片塞太多会显得项目愈发臃肿,有能力最好搭建一个线上图床进行调用

本地预览(preview)#

  1. 当你觉得文章已经写得差不多时,想要看看效果?请到项目根目录执行:pnpm dev,稍等片刻,你就可以通过localhost:4321本地预览你的博客啦
  2. 好!接下来我们需要使用Git将我们所做的更改发布到Github
    • 首先,你需要让Git知道你是谁:git config --global user.name "你的Github用户名"git config --global user.email "你的Github邮箱@example.com"
    • 然后,更改远程仓库为ssh*(如果是通过ssh克隆的不用改):git remote set-url origin git@github.com:xxx/xxx
    • 随后,让我们提交所有文件:git add .
    • 之后,让我们发布一个本地提交:git commit -m "项目初始化"
    • 最后,让我们将本地更改提交到远程仓库:git push 。此时,你的Github仓库应该已经有了新的提交

构筑(Build)#

在终端执行pnpm build即可开始构建目录dist,随后将dist目录下的内容丢到服务器/Vercel/CloudFlare等地后绑定域名即可通过域名/IP访问你的博客辣

格式化(Format)#

在终端执行 npx biome check --fix 即可格式化除md文档外的astro相关文件,这对于主动对fuwari进行修改的用户相当重要,biome 2.0 对代码的格式要求更加严格

.md 文档的格式化使用 vscodemarkdown 拓展 即可在保存时自动处理相关格式

升级到最新版本#

为什么要更新?#

补丁更改是最小干扰的更改。它们不会改变你使用 Astro 的方式,当你更新时也不需要对你的代码进行任何更改。

当 Astro 发布一个“补丁”版本时,最后的数字会增加。(例如,astro@4.3.14 -> astro@4.3.15)

可能出于以下原因发布补丁:

不改变 Astro 功能的内部变更: 重构 性能提升 增加或改变测试覆盖率 与声明的文档和预期行为保持一致 日志和错误消息的改进。 发布失败后的重新发布。 补丁更改还包括大多数 bug 修复,即使在用户利用现有的非预期或不希望的行为的情况下也是如此。

同时升级 Astro 及其官方集成,仅需在终端执行pnpm dlx @astrojs/upgrade

写作#

向你的网站添加内容#

Astro 中的 Markdown

TIP

Astro 包含了 GitHub 风格的 Markdown,它结合了为内容设计熟悉的书写格式、 Astro 组件语法以及架构的灵活性。

自定义你的fuwari#

添加到各个组件的api#

一言API#

插入到合适的地方(astro组件)即可

<p>:D 获取中...</p>
<script src="http
s://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>

或者

<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>

随机图#

<img src="https://t.mwm.moe/pc">
# 备份 https://t.mwm.moe/pc | https://imgapi.xl0408.top/index.php

建站天数信息#

在对应的页脚中插入以下代码即可实现。

<span id="runtime_span" style="text-align: center;"></span>
<script type="text/javascript">
function show_runtime() {
window.setTimeout("show_runtime()", 1000);
X = new Date("20XX/XX/XX 12:00:00");
Y = new Date();
T = (Y.getTime() - X.getTime());
M = 24 * 60 * 60 * 1000;
a = T / M;
A = Math.floor(a);
b = (a - A) * 24;
B = Math.floor(b);
c = (b - B) * 60;
C = Math.floor((b - B) * 60);
D = Math.floor((c - C) * 60);
runtime_span.innerHTML = "⏱️本站已运行 " + A + "天" + B + "小时" + C + "分" + D + "秒"
}
show_runtime();
</script>
从零开始的博客生活
https://p1ume.vercel.app/posts/fuwari/
作者
p1ume
发布于
2023-02-22
许可协议
CC BY-NC-SA 4.0