这个项目是「Astro Air Blog」，一个基于 Astro 和 Airtable 的静态博客系统，它使用现代化的技术栈，提供了轻量、快速、易用的博客搭建方式。
Astro Air Blog 使用了以下技术栈：
Astro：静态站点生成器，基于标准 Web 组件模型。
Airtable：表格和数据库管理工具，用于存储和管理博客文章和元数据。
TypeScript：强类型的 JavaScript，提供更好的代码可读性和可维护性。
React：用于构建用户界面的 JavaScript 库，提供组件化开发方式。
Tailwind CSS：快速构建自定义样式的 CSS 框架。
Astro Air Blog 具有以下主要特点：
快速构建：使用 Astro 和 Airtable 可以快速构建可靠、可维护和高性能的静态站点。
现代化设计：提供现代化的设计和布局，支持响应式设计，适配不同尺寸的屏幕和设备。
丰富的博客功能：提供分类、标签、搜索、评论等丰富的博客功能，方便读者查找和分享博客文章。
易于定制和扩展：使用 Tailwind CSS 可以快速构建自定义样式，使用 React 组件可以方便地扩展和定制博客功能。
项目地址：https://github.com/austin2035/astro-air-blog
------------------
👏🏻 Introduction
This is a minimalist, beautiful, responsive blogging program written in Astro.
Preview
https://yufengbiji.com
https://astro.yufengbiji.com
Project Structure
In this Astro project, you'll see the following folders and files:
|-- README.md |-- astro.config.mjs |-- package.json |-- public | |-- favicon.svg | `-- static |-- src | |-- components | | |-- BaseHead.astro // common <head> tags | | |-- Footer.astro | | |-- Header.astro | | `-- Navigation.astro | |-- consts.js | |-- env.d.ts | |-- layouts | | |-- BaseLayout.astro | | |-- MarkdownPost.astro | | |-- MoreTile.astro | | `-- Tile.astro | |-- pages | | |-- about.astro | | |-- archive.astro | | |-- index.astro | | |-- posts | | | |-- some markdown post.md // markdown post | | |-- rss.xml.js // RSS feed | | `-- tags | | `-- [tag].astro // dynamic route of all posts with a given tag | |-- styles | | `-- global.css // global styles | `-- utils.jsAstro looks for
.astroor.mdfiles in thesrc/pages/directory. Each page is exposed as a route based on its file name.There's nothing special about
src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.Any static assets, like images, can be placed in the
public/directory.Commands
All commands are run from the root of the project, from a terminal:
Command Action npm installInstalls dependencies npm run devStarts local dev server at localhost:3000npm run buildBuild your production site to ./dist/npm run previewPreview your build locally, before deploying npm run astro ...Run CLI commands like astro add,astro checknpm run astro --helpGet help using the Astro CLI Want to learn more?
Feel free to check our documentation or jump into our Discord server.
from https://github.com/austin2035/astro-air-blog
(从程序作者的文章https://yufengbiji.com/posts/how-did-I-find-my-ideal-internship可看出
其2019年上大学，估计是2001年出生）
--------------------------------------------------------------------------------------
Astro Air Blog 详细使用指南
作者通过二十张图来一步步教你搭建一个高颜值、免费、速度快的个人博客网站。什么是 Astro ?
Astro JS 是一个用于构建高性能、内容为中心的网站的 web 框架。它可以让你使用你喜欢的 JavaScript web 框架（React，Svelte，Vue 等）来编写 UI 组件，然后在构建时将整个网站渲染为静态 HTML。这样，你就可以得到一个完全静态的网站，不需要加载任何 JavaScript。Astro 还支持多种前端工具，如 Tailwind CSS2，并且可以部署到任何地方，甚至是边缘服务器。Astro 最新版本是 2.0，它引入了一种新的前端架构（称为 Astro Islands），可以优化你的网站，让它加载速度提高 33%，JavaScript 减少 90%。Astro Air Blog 是什么？
它是我基于 Astro 2.0 开发的一个博客模板，你可以直接使用它来搭建你的博客。我没有使用任何 CSS 框架以及 React 等前端框架，而是使用了 Astro 的原生能力，这样可以让你的博客加载速度更快，同时也可以让你的博客更加轻量。本站就是使用这个模板搭建的。下面我准备一步步教你如何使用 Astro Air Blog 搭建你的博客。 可能需要一些下面列举的知识：- Markdown 一种轻量级的标记语言，用于编写文档。
- Git 一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。
- GitHub 一个面向开源及私有软件项目的托管平台，因为只支持 Git 作为唯一的版本库格式进行托管，故名 GitHub。
- HTML 一种用于创建网页的标准标记语言。
- CSS 一种用于描述网页样式的语言。
- JavaScript 一种具有函数优先的轻量级，解释型或即时编译型的编程语言。
其中 Makrdown 是必须的，其他的都是可选的。第一步：使用模板创建你的博客仓库
使用模板创建你的博客仓库点击Create repository from template按钮，然后输入你的仓库名称， 就可以创建你的博客仓库了。
设置仓库信息第二步：克隆你的博客仓库到本地
3点击Code按钮，复制仓库地址。有两种方式，一种是使用 SSH，一种是使用 HTTPS (推荐新手使用)，这里我使用的是 SSH，如果你不知道怎么使用 SSH，可以点击 这里 查看。接着在你的电脑上打开终端，输入下面的命令，将你的博客仓库克隆到本地。git clone 复制的仓库地址克隆完毕后，我们进入仓库所在的根目录。第三步：安装依赖
在终端中输入下面的命令，安装依赖。npm install第四步：启动本地调试服务
在终端中输入下面的命令，启动本地调试服务。npm run dev
本地调试服务的启动如图所示，本地调试服务启动成功，打开浏览器，输入http://localhost:3000，就可以看到你的博客了。并且修改你的博客内容，浏览器会自动刷新。第五步：查看文章所在路径
在你的博客中，你可以看到有很多篇文章，这些篇文章的内容都是我写好的，你可以直接修改它们的内容，也可以删除它们，然后添加你自己的文章。
已经存在的文章第六步：了解项目结构
在你的博客仓库中，你可以看到有很多文件，这些文件都是用来干什么的呢？请查看这张图片。
项目结构第七步：了解文章的结构
打开任意一篇文章，你可以看到有很多元数据，这些元数据都是用来设置什么的呢？请查看这张图片。
文章的结构元数据的前后有三个连续的短横线，中间是元数据的内容。元数据的内容是由键值对组成的，键值对之间用冒号分隔，键值对之间用换行分隔。元数据下面是文章的内容，文章的内容是使用 Markdown 语法编写的。添加文章的时候，你需要添加元数据，然后在元数据下面添加文章的内容即可。然后再主页中就可以看到你添加的文章了。第八步：博客网站的设置
在你的博客仓库中，你可以看到有一个consts.js文件，这个文件是用来设置博客网站的一些固定信息的。请查看图片对应的说明。
博客网站的固定信息第九步：提交你的修改
到目前为止，我们都在本地修改博客的内容，但是这些修改并没有提交到 GitHub 上，所以别人是看不到你的修改的。接下来我们将把我们的修改提交到 GitHub 上。
所有的增加、删除、修改记录都可以在这里看到我这里使用 VS Code 编辑器，你也可以使用其他编辑器，只要你熟悉就行。在 VS Code 中，我们可以看到有很多文件被修改了，这些文件就是我们刚刚修改的文件。接着我们把这些文件提交到 GitHub 上。 点击加号，将所有文件添加到暂存区。然后在输入框中输入提交信息，最后点击提交按钮，将修改提交到本地仓库。
同步更改然后点击同步更改按钮，将修改推送到 GitHub 上。第十步：查看你的 Github 仓库
可以看到，成功提交第十一步：将你的博客部署到 Vercel
通过 vercle 可以将你的博客部署到云端，这样你就可以通过网址访问你的博客了。vercel 还是免费的，并且绑定之后，你的博客每次修改之后（本地 push 到Github 仓库之后），vercel 都会自动帮你部署。
通过 vercel 新建一个项目登录 vercel 后，点击New Project按钮，将你的博客仓库导入到 vercel 中。
选择自己的博客仓库选择你的博客仓库，然后点击Import按钮。
配置项目的信息配置项目的信息，包括项目的名称、项目的描述、项目的环境变量等。在 vercel 中，我们只需要配置一下项目名称即可，其他的都不需要配置。这里的 Framework Preset 应该会自动选择Astro，如果没有自动选择，请选择Astro。注意： 如果你使用的是 Cloudflare 的 Pages 来部署此博客，那么需要指定一下项目的环境变量，否则你的博客无法构建。这个变量如下表格所示：变量名 变量值 NODE_VERSION 16.12.0 如果遇到了问题，可以参考这篇文章：Astro 部署到 Cloudflare Pages最后点击Deploy按钮，将你的博客部署到 vercel 中。
部署成功等待部署成功，然后点击Visit按钮，就可以看到你的博客了。第十二步：绑定域名
这时候，你的博客已经可以通过 vercel 提供的网址访问了。
可以看到有一个默认的网址但是这个网址不是很好记，所以我们需要将它绑定到自己的域名上。这样，我们就可以通过自己的域名来访问自己的博客了。 点击Visit Domains按钮，进入域名设置页面。
添加自己的域名输入你想要绑定的域名，然后点击Add按钮，将域名添加到 vercel 中。
21按照提示，将域名的 DNS 解析指向 vercel 的 DNS 服务器，然后点击Continue按钮。 等到域名的 DNS 解析生效之后，vercle 会自动帮你将域名绑定到你的博客上，并且生成一个 SSL 证书。这时候，你就可以通过你的域名来访问你的博客了。进阶设置之一：设置首页文章展示
首页默认是按照文章的创建时间倒序排列的。 你可以编辑src/pages/index.astro文件，修改首页文章的展示方式。 文章的展示布局有三种，第一种是一行展示一篇文章，第二种是一行展示两篇文章，第三种是一行展示三篇文章。 如下入所示，我们可以设置这三种布局的文章数量。
首页中文章的展示设置这里的allPosts表示所有文章， 而slice(0, 1)表示从第 1 篇文章开始，到 第 2 篇文章结束（但是不包括第 2 篇文章）。这样，我们就设置了第一种布局是展示了最新文章。同样的，我们可以设置第二种布局和第三种布局的文章数量。我这里设置的分别是slice(1, 5)和slice(5, 11)。这样，我们就设置了第二种布局是展示了第 2 篇到第 4 篇文章，第三种布局是展示了第 5 篇到第10 篇文章。更多文章的设置，也是同样的道理。
首页中“更多文章”的设置进阶设置之二：设置目录
在src/pages/archive.astro文件中，我们可以设置目录的展示方式。在第 5 行，const tags = ["经历分享", "数据结构", "源码研究"];设置了三个标签，用以当做目录展示。如果你想展示所有文章，则有两个思路：- 第一种，修改
src/pages/archive.astro文件的第 5 行。
// 修改前 const tags = ["新闻稿", "虚幻引擎", "源码研究"]; // 修改后 const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];- 第二种，所有文章都添加一个共同标签，比如“所有文章”，然后修改
src/pages/archive.astro文件的第 5 行, 在 tags 中新增一个标签“所有文章”。
进阶设置之三：语法高亮
目前，这个模板使用hljs.js进行语法高亮的处理，支持主流编程语言。如果遇到了语法高亮无法展示的情况，例如你需要添加对powershell高亮的支持。可以到hljs.js的官方进行定制，选择你需要的高亮语言。然后下载并替换public/static/js/hljs.js文件。进阶设置之四：修改公共头部和底部
分别编辑src/components目录下的Header.astro和Footer.astro即可。需要有 HTML 的基础。-------------------------------------------------------------------------------------------------------from http://web.archive.org/web/20230321180113/https://yufengbiji.com/posts/astro-air-blog-guidehttps://yufengbiji.com/posts/astro-air-blog-guide-------------------------------A minimal, accessible and SEO-friendly Astro blog theme 。https://astro-paper.pages.dev/AstroPaper is a minimal, responsive, accessible and SEO-friendly Astro blog theme. This theme is designed and crafted based on my personal blog.
This theme follows best practices and provides accessibility out of the box. Light and dark mode are supported by default. Moreover, additional color schemes can also be configured.
This theme is self-documented _ which means articles/posts in this theme can also be considered as documentations. Read the blog posts or check the README Documentation Section for more info.
🔥 Features
- type-safe markdown
- super fast performance
- accessible (Keyboard/VoiceOver)
- responsive (mobile ~ desktops)
- SEO-friendly
- light & dark mode
- fuzzy search
- draft posts & pagination
- sitemap & rss feed
- followed best practices
- highly customizable
- dynamic OG image generation for blog posts #15 (Blog Post)
Note: I've tested screen-reader accessibility of AstroPaper using VoiceOver on Mac and TalkBack on Android. I couldn't test all other screen-readers out there. However, accessibility enhancements in AstroPaper should be working fine on others as well.
✅ Lighthouse Score
🚀 Project Structure
Inside of AstroPaper, you'll see the following folders and files:
/ ├── public/ │ ├── assets/ │ │ └── logo.svg │ │ └── logo.png │ └── favicon.svg │ └── astropaper-og.jpg │ └── robots.txt │ └── toggle-theme.js ├── src/ │ ├── assets/ │ │ └── socialIcons.ts │ ├── components/ │ ├── content/ │ │ | blog/ │ │ | └── some-blog-posts.md │ │ └── _schemas.ts │ │ └── config.ts │ ├── layouts/ │ └── pages/ │ └── styles/ │ └── utils/ │ └── config.ts │ └── types.ts └── package.json
Astro looks for
.astroor.mdfiles in thesrc/pages/directory. Each page is exposed as a route based on its file name.Any static assets, like images, can be placed in the
public/directory.All blog posts are stored in
src/content/blogdirectory.📖 Documentation
Documentation can be read in two formats_ markdown & blog post.
- Configuration - markdown | blog post
- Add Posts - markdown | blog post
- Customize Color Schemes - markdown | blog post
- Predefined Color Schemes - markdown | blog post
For AstroPaper v1, check out this branch and this live URL
💻 Tech Stack
Main Framework - Astro
Type Checking - TypeScript
Component Framework - ReactJS
Styling - TailwindCSS
UI/UX - Figma
Fuzzy Search - FuseJS
Icons - Boxicons | Tablers
Code Formatting - Prettier
Deployment - Cloudflare Pages
Illustration in About Page - https://freesvgillustration.com
Linting - ESLint👨🏻💻 Running Locally
The easiest way to run this project locally is to run the following command in your desired directory.
# npm 6.x npm create astro@latest --template satnaing/astro-paper # npm 7+, extra double-dash is needed: npm create astro@latest -- --template satnaing/astro-paper # yarn yarn create astro --template satnaing/astro-paper
Google Site Verification (optional)
You can easily add your Google Site Verification HTML tag in AstroPaper using environment variable. This step is optional. If you don't add the following env variable, the google-site-verification tag won't appear in the html
<head>section.# in your environment variable file (.env) PUBLIC_GOOGLE_SITE_VERIFICATION=your-google-site-verification-value🧞 Commands
All commands are run from the root of the project, from a terminal:
Command Action npm installInstalls dependencies npm run devStarts local dev server at localhost:3000npm run buildBuild your production site to ./dist/npm run previewPreview your build locally, before deploying npm run format:checkCheck code format with Prettier npm run formatFormat codes with Prettier npm run syncGenerates TypeScript types for all Astro modules. Learn more. npm run czCommit code changes with commitizen npm run lintLint with ESLint ✨ Feedback & Suggestions
If you have any suggestions/feedback, you can contact me via my email. Alternatively, feel free to open an issue if you find bugs or want to request new features.
from https://github.com/satnaing/astro-paper
Dante is a single-author blog and portfolio theme for Astro.js. Featuring a minimal, slick, responsive and content-focused design. For more Astro.js themes please check justgoodui.com.
If you click this☝️ button, it will create a new repo for you that looks exactly like this one, and sets that repo up immediately for deployment on Netlify.
- ✅ Dark and light color mode
- ✅ Hero section with bio
- ✅ Portfolio collection
- ✅ Pagination support
- ✅ Post tags support
- ✅ Subscription form
- ✅ View transitions
- ✅ Tailwind CSS
- ✅ Mobile-first responsive layout
- ✅ SEO-friendly with canonical URLs and OpenGraph data
- ✅ Sitemap support
- ✅ RSS Feed support
- ✅ Markdown & MDX support
- @astrojs/tailwind - https://docs.astro.build/en/guides/integrations-guide/tailwind/
- @astrojs/sitemap - https://docs.astro.build/en/guides/integrations-guide/sitemap/
- @astrojs/mdx - https://docs.astro.build/en/guides/markdown-content/
- @astrojs/rss - https://docs.astro.build/en/guides/rss/
Inside of Dante Astro theme, you'll see the following folders and files:
├── public/
├── src/
│ ├── components/
│ ├── content/
│ ├── data/
│ ├── icons/
│ ├── layouts/
│ ├── pages/
│ ├── styles/
│ └── utils/
├── astro.config.mjs
├── package.json
├── README.md
├── tailwind.config.cjs
└── tsconfig.json
Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.
There's nothing special about src/components/, but that's where we like to put any Astro (.astro) components.
The src/content/ directory contains "collections" of related Markdown and MDX documents. Use getCollection() to retrieve posts from src/content/blog/, and type-check your frontmatter using an optional schema. See Astro's Content Collections docs to learn more.
Any static assets, like images, can be placed in the public/ directory.
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:4321 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run astro ... |
Run CLI commands like astro add, astro check |
npm run astro -- --help |
Get help using the Astro CLI |
Check out our documentation or jump into our Discord server.
- Ovidius is a free single author blog theme.
LICENSE dist/ package.json screenshot.png
README.md node_modules/ public/ src/
astro.config.mjs package-lock.json sandbox.config.json tsconfig.json
_astro/ about/ assets/ blog/ favicon.ico index.html robots.txt
hello-world.md markdown-test.md
---
title: 快乐的节日
publishDate: 23 Oct 2024 9:30:00
description: 这是一首歌
---
项目地址：https://github.com/Charca/astro-blog-template
title: 快乐的节日
author: brite
pubDatetime: 2024-10-24T08:15:19Z
slug: happy-festival
featured: true
draft: false
tags:
- music
- life
ogImage: ""
description: This is a song
---
title: 快乐的节日
excerpt: 这是一首歌
publishDate: 'Oct 24 2024 10:46:00'
tags:
- music
- life
---
title: 快乐的节日
published: 2024-10-30 22:00:00
description: 这是一首歌
tags: [Markdown, life, music]
draft: false
---
No comments:
Post a Comment