Fuwari博客系统部署阿里云完全指南#

1. Fuwari博客简介#

Fuwari是一款基于Astro和Tailwind CSS构建的现代化静态博客模板，具有以下特点：

🌟 现代化技术栈：使用Astro框架和Tailwind CSS构建，性能优异
🎨 美观界面：流畅的动画效果和页面过渡
🌓 明暗模式：支持自动和手动切换
🎯 响应式设计：完美适配各种设备屏幕
🔍 内置搜索：快速查找博客内容
🎨 高度自定义：支持自定义主题颜色和横幅

2. 阿里云服务器准备#

在部署Fuwari博客之前，需要准备一台阿里云服务器：

2.1 购买阿里云ECS服务器#

登录阿里云控制台，进入ECS实例购买页面
选择合适的配置：
- 地域：选择离你最近的地域
- 实例规格：建议选择至少1核2G内存的实例（如ecs.t5-lc2m1.nano）
- 镜像：选择Ubuntu 22.04 LTS或CentOS 7.9
- 存储：至少40GB SSD云盘
- 网络：选择专有网络VPC，配置公网IP
设置登录密码或SSH密钥
完成购买并等待实例创建

2.2 服务器环境配置#

连接到你的阿里云服务器，执行以下命令更新系统并安装必要的软件：

# Ubuntu系统
apt update && apt upgrade -y
apt install -y git curl

# CentOS系统
yum update -y
yum install -y git curl

# 安装Docker
curl -fsSL https://get.docker.com | sh

# 安装Docker Compose
curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
chmod +x /usr/local/bin/docker-compose

# 启动Docker并设置开机自启
systemctl start docker
systemctl enable docker

2.3 安装Node.js和pnpm#

Fuwari博客需要Node.js环境，推荐安装LTS版本：

# 安装Node.js 20 LTS
curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
apt install -y nodejs

# 安装pnpm包管理器
npm install -g pnpm

3. 本地环境搭建与项目配置#

3.1 克隆Fuwari项目#

# 克隆项目
git clone https://github.com/saicaca/fuwari.git
cd fuwari

# 安装依赖
pnpm install
pnpm add sharp

3.2 基本配置#

编辑src/config.ts文件自定义你的博客：

export const siteConfig: SiteConfig = {
  siteUrl: "https://your-domain.com",  // 你的域名
  siteName: "My Blog",                 // 博客名称
  siteDescription: "我的个人博客",       // 博客描述
  // ...其他配置
}

3.3 配置部署设置#

编辑astro.config.mjs文件，确保站点配置正确：

import { defineConfig } from 'astro/config'

export default defineConfig({
  site: 'https://your-domain.com',  // 你的域名
  // ...其他配置
})

4. 部署到阿里云服务器#

4.1 构建项目#

在本地项目目录执行构建命令：

pnpm build

构建完成后，会生成dist目录，包含所有静态文件。

4.2 准备Docker部署文件#

mkdir -p /opt/fuwari

上传构建后的静态文件到服务器：

scp -r dist/* root@your-server-ip:/opt/fuwari/dist/

在服务器上创建Nginx配置文件：

nano /opt/fuwari/nginx.conf

配置内容：

server {
    listen 80;
    server_name your-domain.com;
    root /usr/share/nginx/html;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # 静态文件缓存配置
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
    }
}

创建docker-compose.yml文件：

nano /opt/fuwari/docker-compose.yml

配置内容：

version: '3.8'

services:
  nginx:
    image: nginx:alpine
    container_name: fuwari-nginx
    restart: always
    ports:
      - "80:80"
    volumes:
      - ./dist:/usr/share/nginx/html
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
    networks:
      - fuwari-network

networks:
  fuwari-network:
    driver: bridge

4.3 启动Docker容器#

在/opt/fuwari目录下执行：

docker-compose up -d

查看容器状态：

docker-compose ps

你应该能看到类似以下输出：

Name               Command          State         Ports       
--------------------------------------------------------------
fuwari-nginx   /docker-entrypoint.sh   Up      0.0.0.0:80->80/tcp

5. 域名绑定与HTTPS配置#

5.1 域名解析#

登录阿里云域名控制台
添加A记录，将域名指向你的服务器公网IP
添加WWW记录（可选）

5.2 配置HTTPS证书#

我们将使用Certbot为Docker部署的Nginx配置HTTPS证书。有两种方案可选：

方案一：使用Dockerized Certbot（推荐）#

在/opt/fuwari目录下创建更新后的docker-compose.yml文件：

version: '3.8'

services:
  nginx:
    image: nginx:alpine
    container_name: fuwari-nginx
    restart: always
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./dist:/usr/share/nginx/html
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
      - ./certbot/www:/var/www/certbot
      - ./certbot/conf:/etc/nginx/ssl
    networks:
      - fuwari-network
    depends_on:
      - certbot

  certbot:
    image: certbot/certbot
    container_name: fuwari-certbot
    restart: unless-stopped
    volumes:
      - ./certbot/www:/var/www/certbot
      - ./certbot/conf:/etc/letsencrypt
    entrypoint: "sh -c 'trap exit TERM; while :; do certbot renew; sleep 12h & wait $${!}; done;'"
    networks:
      - fuwari-network

networks:
  fuwari-network:
    driver: bridge

更新Nginx配置文件nginx.conf以支持HTTPS：

server {
    listen 80;
    server_name your-domain.com www.your-domain.com;
    
    # 重定向HTTP到HTTPS
    location / {
        return 301 https://$host$request_uri;
    }
    
    # Certbot验证路径
    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }
}

server {
    listen 443 ssl;
    server_name your-domain.com www.your-domain.com;
    root /usr/share/nginx/html;
    index index.html;
    
    # SSL证书配置
    ssl_certificate /etc/nginx/ssl/live/your-domain.com/fullchain.pem;
    ssl_certificate_key /etc/nginx/ssl/live/your-domain.com/privkey.pem;
    include /etc/nginx/ssl/options-ssl-nginx.conf;
    ssl_dhparam /etc/nginx/ssl/ssl-dhparams.pem;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # 静态文件缓存配置
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
    }
}

先申请证书，再启动服务：

# 创建必要目录
mkdir -p ./certbot/www ./certbot/conf

# 申请证书
docker-compose run --rm certbot certonly --webroot -w /var/www/certbot -d your-domain.com -d www.your-domain.com

# 启动所有服务
docker-compose up -d

方案二：使用系统Certbot#

如果你更习惯使用系统安装的Certbot，可以使用以下命令：

# 安装Certbot
apt install -y certbot python3-certbot-nginx

# 申请证书（需要先停止Docker容器）
docker-compose down
certbot certonly --standalone -d your-domain.com -d www.your-domain.com

# 复制证书到Docker目录
mkdir -p /opt/fuwari/certbot/conf/live/your-domain.com
cp -r /etc/letsencrypt/live/your-domain.com/* /opt/fuwari/certbot/conf/live/your-domain.com/
cp -r /etc/letsencrypt/options-ssl-nginx.conf /opt/fuwari/certbot/ssl/
cp -r /etc/letsencrypt/ssl-dhparams.pem /opt/fuwari/certbot/ssl/

# 启动Docker容器
docker-compose up -d

证书会自动每12小时尝试更新一次，确保HTTPS持续有效。

6. 自动化部署（可选）#

为了简化部署流程，可以使用GitHub Actions实现自动化部署：

6.1 创建部署密钥#

ssh-keygen -t rsa -b 4096 -C "your-email@example.com"

将公钥添加到服务器的~/.ssh/authorized_keys文件中，私钥添加到GitHub仓库的Secrets中。

6.2 创建GitHub Actions工作流#

在项目根目录创建.github/workflows/deploy.yml文件：

name: Deploy to Aliyun

on:
  push: 
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '20'
    - name: Install dependencies
      run: |
        npm install -g pnpm
        pnpm install
        pnpm add sharp
    - name: Build
      run: pnpm build
    - name: Deploy to server
      uses: easingthemes/ssh-deploy@v2.2.11
      env:
        SSH_PRIVATE_KEY: ${{ secrets.ALIYUN_SSH_KEY }}
        ARGS: "-avz --delete"
        SOURCE: "dist/"
        REMOTE_HOST: "your-server-ip"
        REMOTE_USER: "root"
        TARGET: "/opt/fuwari/dist/"
    - name: Restart Docker containers
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.ALIYUN_HOST }}
        username: ${{ secrets.ALIYUN_USER }}
        key: ${{ secrets.ALIYUN_SSH_KEY }}
        script: |
          cd /opt/fuwari
          docker-compose up -d --no-deps --build

6.3 GitHub Secrets配置#

在GitHub仓库的Settings > Secrets and variables > Actions中添加以下Secrets：

ALIYUN_SSH_KEY: 你的服务器SSH私钥
ALIYUN_HOST: 你的服务器IP地址
ALIYUN_USER: 服务器用户名（通常是root）

这样，每次你向main分支推送代码时，GitHub Actions都会自动构建项目并部署到阿里云服务器，然后重启Docker容器。

7. 常见问题与解决方案#

7.1 访问博客显示404错误#

检查Docker容器是否正在运行：docker-compose ps
检查Nginx配置中的root路径是否正确（应指向/usr/share/nginx/html）
确保try_files $uri $uri/ /index.html;配置存在
重启Docker容器：docker-compose restart

7.2 样式显示异常#

检查构建过程是否有错误
确保所有静态文件都已正确上传到服务器的/opt/fuwari/dist/目录
查看Docker容器日志：docker-compose logs nginx
清除浏览器缓存

7.3 博客搜索功能不工作#

确保src/config.ts中启用了搜索功能
重新构建项目并上传到服务器
重启Docker容器：docker-compose restart

7.4 Docker相关问题#

容器无法启动：查看容器日志 docker-compose logs
端口被占用：检查端口占用情况 netstat -tuln | grep 80 或 netstat -tuln | grep 443
证书更新失败：检查Certbot容器日志 docker-compose logs certbot
权限问题：确保Docker用户有权限访问相关文件和目录

8. 结语#

通过以上步骤，你已经成功将Fuwari静态博客部署到阿里云服务器上了！现在你可以：

使用pnpm new-post <filename>命令创建新文章
自定义博客主题和样式
配置更多高级功能

Fuwari博客是一个轻量级但功能强大的静态博客解决方案，结合阿里云的稳定服务器，可以为你提供一个高效、安全的个人博客平台。

祝你使用愉快！ 🎉