【开源推广】基于 Astro 做了一款全新的博客主题 - Astro-star

本帖使用社区开源推广,符合推广要求。我申明并遵循社区要求的以下内容: 我的帖子已经打上 开源推广 标签: 是 我的开源项目完整开源,无未开源部分: 是 我的开源项目已链接认可 LINUX DO 社区: 是 我帖子内的项目介绍,AI生成、润色内容部分已截图发出: 是 以上选择我承诺是永久有效的,接受社...
【开源推广】基于 Astro 做了一款全新的博客主题 - Astro-star
【开源推广】基于 Astro 做了一款全新的博客主题 - Astro-star
本帖使用社区开源推广,符合推广要求。我申明并遵循社区要求的以下内容:
  • 我的帖子已经打上 开源推广 标签:
  • 我的开源项目完整开源,无未开源部分:
  • 我的开源项目已链接认可 LINUX DO 社区:
  • 我帖子内的项目介绍,AI生成、润色内容部分已截图发出:
  • 以上选择我承诺是永久有效的,接受社区和佬友监督:

以下为项目介绍正文内容,AI生成、润色内容已使用截图方式发出


前言

作者更换过多次个人网站主题,但总觉得不够符合个人的审美。于是自学 Astro ,在 AI 的帮助下,花了半年的时间逐步搭建新的博客主题 —— Astro-star

如果你是一个热爱技术、喜欢折腾的人,想拥有一个属于自己的个人网站,又认为本主题近似符合你的审美,不妨可以从本项目开始

项目地址:

github.com

GitHub - hanlife02/Astro-star: A new blog theme with Astro !

A new blog theme with Astro !

1.项目介绍

文件结构

/
├── public/                 # 静态资源、头像、站点图标、文章图片
├── scripts/                # 配置迁移、索引同步和构建辅助脚本
├── src/
│   ├── components/         # 可复用组件
│   ├── config/             # 站点、关于、友链和搜索的配置
│   ├── content/            # blog / note / project 内容集合
│   ├── layouts/            # 页面布局
│   ├── pages/              # 路由页面和 API
│   ├── scripts/            # 浏览器端交互脚本
│   ├── style/              # 全局样式、组件样式和设计 Token
│   └── utils/              # Markdown、MDX 和通用工具
├── astro.config.mjs
├── ecosystem.config.cjs
└── package.json

页面预览

大体分为Home,About,Blog,Note,Project,Links六个页面

Home页:

Home

Blog页:

Blog

文章正文页:

Content

2.为何使用

对于作者来说,做这个项目的时候,每个细节都追求做到让自己满意为止。在此也列出几点,自认为能够吸引到更多的人,使用和参与本项目的原因

Git 文章时间戳

文章的创建/修改时间不是手动维护的,而是通过 git log --follow 自动获取每个文件的首末次 commit 时间

部署方式

本地修改完后git pushgithubaction 便会自动完成部署到服务器的工作,非常方便

接入评论和搜索

博客不是完全的静态网站,接入了 Waline 评论系统和 Algolia 搜索系统。

美观的设计和动画

作者没有采取任何框架,而是重新搓 CSS ,让页面变得更加美丽与丝滑

3.部署

如果你看到这里,对这个项目的视觉设计和代码组织都存在一些满意的地方,不妨尝试一下该项目。

作者也提供了文档网站供参考:

hanlife02.github.io

从零开始部署 Astro-star | Astro-star 文档

Astro-star 开源 Astro 个人站点主题文档

4.最后

作者技术力很有限,欢迎佬友多提意见!谢谢你看到这里!

1 个帖子 - 1 位参与者

阅读完整话题

来源: linux.do查看原文