1. Tailwind CSS#

定位：原子化 CSS 框架推荐度：★★★★★（全能天花板）

• 优点：
  • 极度灵活，想怎么写样式就怎么写
  • 体积小、性能好，适合 Hexo 主题魔改
  • 现代、主流，几乎所有新主题都用它
• 适合：改 Hexo、做自定义网页、做博客主题

2. Bootstrap 5#

定位：老牌全能 CSS+JS 组件框架推荐度：★★★★☆（最稳、最省心）

• 优点：
  • 组件超多：导航、卡片、表单、弹窗、轮播… 开箱即用
  • 兼容性极强，新手零门槛
• 适合：快速做官网、后台页面、普通网页

1. Vue 3 + Vite#

推荐度：★★★★★（均衡之王）

• 上手易、生态强、文档全
• 适合：个人站、工具站、中小后台、博客系统

2. React + Next.js#

推荐度：★★★★★（大厂标准、全能）

• 支持 SSR/SEO 极强
• 适合：复杂网站、电商、大型项目

3. Astro#

推荐度：★★★★★（静态站最强新贵）

• 零JS加载，支持多框架
• 适合：想升级博客 / 做高性能静态站

1. Astro（首推）#

也是本网站的框架

推荐度：★★★★★

• 现代新一代静态框架

• 支持 Vue/React 组件，性能极强

• 做博客、作品集、文档站全能

• 支持多框架

2. Hexo#

推荐度：★★★★★

• 基于 Node.js，上手最简单

• 主题极多（Butterfly、Fluid、Next 都是顶流）

• 一键部署 GitHub Pages / Gitee Pages

• 文章用 Markdown，纯文本好管理

  适合

  ：只想快速搭好、长期稳定用的个人博客

3. Hugo#

推荐度：★★★★☆

• Go 编写，生成速度极快（千篇文章秒生成）

• 比 Hexo 更轻、更稳

• 缺点：配置语法比 Hexo 稍复杂

  适合

  ：文章很多、追求极致速度的人

4. VitePress#

推荐度：★★★★

• Vue 官方出品，极轻极快

• 偏「文档 + 博客」，界面极简清爽

  适合

  ：技术笔记、文档型博客

1. WordPress#

• 最成熟，插件 / 主题海量
• 不用写代码，后台可视化
• 缺点：重、需要服务器、易被攻击

2. Typecho#

• 超轻量 PHP 博客，简洁快

3. Halo#

• 现代化 Java 博客，界面好看，带后台

前置准备（安装 3 个必备工具）#

• git
• Node.js（LTS 稳定版）
• 注册 GitHub 账号

一直点确定就行，全部按它默认勾的

接下来我们测试下是否都下载成功

管理员运行cmd，依次输入

1
node -v
2
npm -v
3
git -v

创建GitHub仓库#

点击右上角 + → New repository

仓库名：你的GitHub用户名.github.io（必须严格一致）

描述：可选，如 “我的博客”

勾选 Add a README file

点击 Create repository

生成SSH Keys

进入任意文件夹，右键空白处然后点Git bash here,输入

1
ssh-keygen -t rsa -C "邮件地址"

然后敲4次Enter⌨️

然后进入C:\Users\用户名，在里面进入.ssh文件

用记事本打开里面的id_rsa.pub,全选复制里面的代码

然后打开github

进入用户设置，找到SSH keys

新建SSH keys，名称随意，在下面粘贴代码，

然后创建

测试是否成功

在git bash中输入

1
ssh -T git@github.com

回车，然后再输入yes

以上步骤务必在这里做完，两个博客通用

接下来就是正式搭建了

Astro博客#

由于Astro主题是自带Astro框架的，如果你是要一个立刻就能用的博客，不想折腾，推荐可以先看我的这篇文章选择主题主题推荐，不需要安装核心，但要安装依赖

下载你喜欢的主题压缩包，解压到一个存放博客的文件夹，直接执行下面的依赖

如果有一定前端基础，可以安装框架自己写

• 安装 Astro 命令行

  在你想安装博客的文件夹右击，会出现git bash，用bash打开

  1
  npm create astro@latest  //Astro核心
  2
  npm install  //依赖
  3
  npm dev  //本地执行

本地执行完会出现一个地址，例如https://local/一串数字

右击打开

就可以看到你的网站在本地运行了

接下来是推送远程仓库

在你放博客文件的地方右击

git bash

1
git add .  //添加所有文件
2
git commit -m "你要提交的内容描述，随便填"
3
git push -u origin "main"  //关联仓库
4
git push  //推送

接下来稍等一会就可以打开了

网址为：用户名.github.io

hexo博客#

这个博客网上教程较多，可以看这个，除了执行命令有一点点不一样，其他流程都是一样的