从零搭建极简 Astro 个人主页

3天前 7

部署记录📝

从零搭建极简 Astro 个人主页：部署与魔改全记录

这是一个基于 GitHub 开源项目 DORAKIKA/portfolio 搭建的个人主页。

它的特点是极简、响应式、加载速度快。本文记录了在 Linux 服务器上使用 Node.js + PM2 的部署全过程，以及如何修改代码实现“圆形图标”、“点击跳转”和“强制亮色”等个性化效果。

🛠️ 准备工作

服务器：一台 Linux 服务器（Debian/Ubuntu/CentOS 均可，本文以 Debian 为例）。
工具：SSH 连接工具（终端）。
依赖：不需要 Nginx，直接使用 Node.js 运行。

第一步：环境安装

我们需要安装 Node.js 和进程管理工具 PM2。

Bash

# 1. 更新系统
apt update -y && apt upgrade -y

# 2. 安装 Node.js (安装 v20 版本)
curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
apt install -y nodejs

# 3. 安装 Yarn 和 PM2
npm install -g yarn pm2

# 4. 验证安装
node -v
yarn -v

第二步：获取项目代码

Bash

# 1. 克隆项目
git clone https://github.com/DORAKIKA/portfolio.git

# 2. 进入目录
cd portfolio

# 3. 安装依赖
yarn install

第三步：个性化魔改（核心部分）

这是最关键的一步，把默认的演示站变成我们自己的风格。

1. 修改基础信息 (名字、头像、社交链接)

编辑配置文件：

Bash

nano src/config.ts

在这里修改 name (名字), motto (座右铭), social (社交链接)。

技巧：为了方便，图片路径可以直接填外部图床链接（如 https://.../img.jpg）。

2. 强制开启亮色模式 (去除默认暗黑)

默认主题是黑色的，如果喜欢白色清爽风格：

编辑 src/layout/Layout.astro：

Bash

nano src/layout/Layout.astro

找到 <html> 标签，删除 class="dark"：

HTML

<html lang="zh-CN" class="dark">

<html lang="zh-CN">

3. 定制“技能/网站”图标墙 (圆形图标+点击跳转)

为了达到图标圆润且可点击跳转的效果，需要修改组件代码。

编辑 src/components/View/UseTech.astro：

Bash

nano src/components/View/UseTech.astro

建议清空原文件内容，替换为以下模板代码：

HTML

<section id="use-tech">
    <h3>网站</h3>
    <div class="card-container">
        <a href="https://您的博客地址.com" target="_blank">
            <IconLink text="我的博客" icon_bg="transparent">
                <img src="您的图标链接.jpg" 
                     width="22" height="22" 
                     style="border-radius: 50%; object-fit: cover;" />
            </IconLink>
        </a>
        
        </div>
    
    <h3>服务</h3>
    <div class="card-container">
        <IconLink text="Github" href="https://github.com/您的ID" target="_blank">
            <Icon name="Github"/>
        </IconLink>
    </div>
</section>

<style>
.card-container{
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
}
</style>

4. 移除不需要的 "Project" 板块

如果不需要展示项目经历，可以把这一块完全隐藏。

编辑首页文件：

Bash

nano src/pages/index.astro

找到 <Project /> 标签，直接删除该行即可。

第四步：构建与运行

修改完所有代码后，需要编译成静态文件并启动。

Bash

# 1. 构建项目 (生成 dist 目录)
yarn build
# 出现 "Complete!" 表示成功

# 2. 使用 PM2 启动服务 (端口 80)
pm2 serve dist 80 --name "my-blog" --spa

现在，访问服务器 IP 即可看到部署好的主页！

📅 日常维护指南

以后如果想要修改链接或更换头像，流程如下：

修改代码：nano src/config.ts 或其他文件。
保存退出：Ctrl+O -> Enter -> Ctrl+X。
重新构建：
Bash
```
yarn build
```
重启服务：
Bash
```
pm2 restart "my-blog"
```

常用 PM2 命令

查看状态：pm2 list
停止运行：pm2 stop "my-blog"
设置开机自启：
Bash
```
pm2 save
pm2 startup
```

End
记录生活，折腾不止。