打造专属博文封面神器：一个开源免费的博文封面生成器ThisCoverThisCover 是一款免费美观的封面生成器，基于

打造专属博文封面神器：一个开源免费的博文封面生成器ThisCover

颜值与实力并存，一分钟搞定社交媒体封面图

在日常内容创作中，封面图往往是吸引用户点击的第一道门槛。无论是公众号及博文推文、视频封面还是知识卡片，一张美观的封面图往往能事半功倍。

今天要给大家推荐一个开源项目——ThisCover，让你轻松搞定封面图制作。

项目简介

ThisCover 是一个免费、漂亮的封面生成器，基于 rutikwankhade/CoverView 二次开发。

项目进行了全面架构升级，采用现代化技术栈：

next.js v16
react v19
shadcn/ui
tailwindcss v4
lucide icons

在原版基础上，此项目重点进行了中文汉化 + 本土化功能定制和扩展，更贴合国内用户的使用习惯。

github地址：github.com/weizwz/cove…

在线文档及使用地址：cover.weizwz.com/

核心功能一览

🎨 设计定制能力

功能	数量/特性
免费商用字体	29+
纹理主题	18+
常用画布比例	9+（1:1、16:9、4:3等）
图标支持	iconify 3000+，支持上传自定义图标

🖼️ 背景选项

支持多种背景类型：

纯色背景
渐变色背景
本地上传图片
在线图片链接
Unsplash 图库集成

📸 输出功能

支持 png、jpg、webp 多种格式
输出放大倍数 0.5x - 5x 可调
复制图片到剪贴板
保存配置到本地浏览器
清除按钮，一键重置配置

✨ 特色功能

左文右图主题：支持图片和文本位置互换
手机预览主题：图片可拉伸充满框架
桌面/手机预览：背景图替换为真机效果图
首页展示：功能介绍、常见问题、封面示例
一键使用：示例图直接载入使用

环境配置

项目需要配置环境变量，在根目录创建 .env 文件：

NEXT_PUBLIC_API_ACCESS_KEY = 'xxxxx'
NEXT_PUBLIC_API_ICONIFY_URL = 'https://api.iconify.design'
NEXT_PUBLIC_CLOUDFLARE_ANALYTICS_TOKEN = 'xxxxx'

NEXT_PUBLIC_API_ACCESS_KEY 即 Unsplash API Key，需要到 Unsplash Developers 申请。

如果不需要 Cloudflare Analytics，请在 src/app/layout.tsx 中注释对应的 Script。

项目亮点

完全免费开源：没有付费墙，没有水印限制
隐私友好：图片在本地处理，不上传服务器
即开即用：无需注册，打开就能用

如何部署及使用

在线使用

如果你没有编程或者部署基础，那么在线方式比较适合，直接打开使用即可。

在线文档及使用地址：cover.weizwz.com/

本地启动

因为此项目是纯前端项目，本地需要用node环境，我是用的node版本为v22.12.0

拉取项目

首先从github上拉去或下载项目

git clone https://github.com/weizwz/cover.git
# 或者cli
gh repo clone weizwz/cover

2. 配置.env

拉取完之后在项目下添加.env 文件，内容如下

NEXT_PUBLIC_API_ACCESS_KEY = 'xxxxx'
NEXT_PUBLIC_API_ICONIFY_URL = 'https://api.iconify.design'
# cloudflare analytics，不用请注释 src/app/layout.tsx 中的 Script
NEXT_PUBLIC_CLOUDFLARE_ANALYTICS_TOKEN = 'xxxxx'

NEXT_PUBLIC_API_ACCESS_KEY 即 unsplash api，需要到官网申请 unsplash.com/developers ,文章后边有章节介绍如何申请

启动服务

项目包管理使用的是 pnpm,如果没有的话执行命令安装即可，所有命令如下：

# 安装 pnpm
npm install -g pnpm
# 下载依赖
pnpm install
# 启动项目
pnpm dev
# 打包构建
pnpm build

启动之后我们本地访问启动地址即可。

Docker部署

此项目因为是一个纯前端项目，所以我们可以将打包之后的产物通过nginx镜像部署。我使用AI 对此项目进行了一些Docker和Github Pages 部署的改造。

需要自行打包的家人们可以拉去构建，地址如下：github.com/xiuji008/co…

编辑Dockerfile 文件,内容如下：

# ========== Stage 1: Build ==========
FROM node:20-alpine AS builder

WORKDIR /app

# 复制依赖文件
COPY package.json pnpm-lock.yaml ./

# 安装 pnpm 并安装依赖
RUN npm install -g pnpm && pnpm install

# 复制源码（构建时无需 .env，运行时注入）
COPY . .

# 构建静态导出
RUN pnpm build

# ========== Stage 2: Nginx ==========
FROM nginx:alpine

# 复制构建产物到 Nginx 静态目录
COPY --from=builder /app/out /usr/share/nginx/html

# 复制 Nginx 配置
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 复制运行时注入脚本
COPY docker-entrypoint.sh /docker-entrypoint.sh
RUN chmod +x /docker-entrypoint.sh

EXPOSE 80

ENTRYPOINT ["/docker-entrypoint.sh"]

2. 构建镜像

docker build -t xj/cover:1.0.0 .

3. 创建docker-compose.yml文件

创建docker-compose.yml文件，内容如下：

services:
  cover:
  # 以下是我构建好之后传入阿里云镜像仓库的镜像，若自行构建的话修改镜像即可
    image: registry.cn-hangzhou.aliyuncs.com/xjpublic/cover:1.0.0
    container_name: cover
    ports:
      - "5080:80"
    environment:
      - NEXT_PUBLIC_API_ACCESS_KEY=tnbwPq****_ap******
      - NEXT_PUBLIC_API_ICONIFY_URL=https://api.iconify.design
      - NEXT_PUBLIC_CLOUDFLARE_ANALYTICS_TOKEN=xxxxx
    restart: unless-stopped

4. 启动项目

执行以下命令启动项目即可：

docker-compose up -d

到此docker打包部署就完成了。

Github Pages 部署

Github Pages 构建部署我做了部分修改，需要部署的家人们可以fock之后构建，地址如下：github.com/xiuji008/co…

通过以上地址fock 项目

.github\workflows\deploy.yml 文件

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup pnpm
        uses: pnpm/action-setup@v4
        with:
          version: 9

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: pnpm

      - name: Install dependencies
        run: pnpm install

      - name: Build
        run: pnpm build
        env:
          NEXT_PUBLIC_BASE_PATH: /cover
          NEXT_PUBLIC_API_ACCESS_KEY: ${{ secrets.NEXT_PUBLIC_API_ACCESS_KEY }}
          NEXT_PUBLIC_API_ICONIFY_URL: ${{ secrets.NEXT_PUBLIC_API_ICONIFY_URL }}

      - name: Setup Pages
        uses: actions/configure-pages@v4

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./out

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4