【个人博客】Astro 快速搭建个人博客「建议收藏」

【个人博客】Astro 快速搭建个人博客「建议收藏」Astro 介绍 Astro 是一个多合一的 Web 框架,用于构建快速、以 内容为中心的网站。 以内容为中心:Astro 专为内容丰富的网站而设计。 服务器优先:网站在服务器上呈现 HTML 时运行

Astro 介绍

Astro 是一个多合一的 Web 框架,用于构建快速、以 内容为中心的网站。

  • 以内容为中心:Astro 专为内容丰富的网站而设计。
  • 服务器优先:网站在服务器上呈现 HTML 时运行速度更快。
  • 默认快速:在 Astro 中构建慢速网站应该是不可能的。
  • 易于使用:您无需成为专家即可使用 Astro 构建某些东西。
  • 功能齐全,但灵活:超过 100 多种 Astro 集成可供选择。

创建

# npm
npm create astro@latest

# yarn
yarn create astro

# pnpm
pnpm create astro@latest

内置themes

【个人博客】Astro 快速搭建个人博客「建议收藏」

我们选择一个主题 clone,目录结构如下

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
└── package.json

src通常包含

  • 页面
  • 布局
  • Astro 组件
  • 前端组件(React 等)
  • 样式(CSS、Sass)
  • Markdown

案例

【个人博客】Astro 快速搭建个人博客「建议收藏」

src/pages/posts markdown文件目录,项目会自动解析

blog git:(master) ✗ npm run dev

> blog@1.0.0 dev
> astro dev

  🚀  astro  v1.0.0-beta.44 started in 57ms
  
  ┃ Local    http://localhost:3000/Network  use --host to expose
  
  ▶ This is a  beta  prerelease build
    Feedback? https://astro.build/issues
  
上午09:43:45 [astro] reload /src/pages/posts/astro-vercel-blog.md (x30)
上午09:47:20 [astro] update /public/assets/images/.DS_Store (x2)
上午09:58:26 [astro] reload /src/pages/posts/astro-vercel-blog.md (x22)
上午10:02:06 [astro] update /public/assets/.DS_Store (x2)
上午10:05:19 [astro] reload /src/pages/posts/astro-vercel-blog.md (x18)

效果

【个人博客】Astro 快速搭建个人博客「建议收藏」

使用vercel自动化部署

简介

Vercel 是一个用于前端框架和静态站点即时部署的平台。个人免费。

1、注册账号

2、Add GitHub Account

【个人博客】Astro 快速搭建个人博客「建议收藏」

3、import

【个人博客】Astro 快速搭建个人博客「建议收藏」

4、deploy

【个人博客】Astro 快速搭建个人博客「建议收藏」

5、修改域名

dashboard -> blog -> setting -> domains

【个人博客】Astro 快速搭建个人博客「建议收藏」

liuhui.vercel.app/ 即可访问自己的博客啦

结束语

  • 👀 目前专注于前端
  • ⚙️ 在react、react-native开发方面有丰富的经验
  • 🔭 最近在学习安卓,有自己的开源安卓项目,集成react-native热更新功能
  • ❤️ 思考、学习、编码和健身
  • 如果文章对您有帮助,三连支持一下~O(∩_∩)O谢谢!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
转载请注明出处: https://daima100.com/13083.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注