ViteHTML作品集博客启动器

ohmysite-html-template — Vite 作品集模板

作者 vladbesson

基于 Vite 与 Tailwind CSS 的纯 HTML 个人网站起步模板，含作品集、博客等 8 个页面。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

3 个预览视图
桌面端首页1 / 3
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-11查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

使用 Vite 作为构建工具与开发服务器，支持热更新

02

样式基于 Tailwind CSS，脚本为原生 JavaScript（ES6+）

03

内置 8 个页面：首页、作品集列表与详情、博客列表与文章、通用页、全宽页、404

04

作品集网格为响应式布局，可从 1 列扩展到 4 列

05

博客与通用页面提供带侧边栏的版式，另有不带侧边栏的全宽页面

06

2026 年重写时移除了 Gulp、SASS、jQuery、Slick 等旧依赖

模板详细介绍

ohmysite-html-template 是一个用 Vite、Tailwind CSS 和原生 JavaScript 搭建的 HTML 起步模板，面向想搭建个人网站、作品集或博客的开发者。仓库最初创建于 2016 年，当时基于 Gulp、SASS、jQuery 和 partials 系统；2026 年整体重写，移除了这些旧依赖，改用 Vite 作为构建工具与开发服务器，样式改用 Tailwind CSS，脚本为原生 JavaScript（ES6+）。

模板提供 8 个页面：首页（含 hero 轮播、作品集轮播、关于区块与近期文章）、作品集列表（响应式项目网格，1 到 4 列）、单个作品页、博客列表（带侧边栏）、单篇文章（带侧边栏）、通用页面（带侧边栏）、无侧边栏的全宽页面以及 404 错误页。新增页面时需在 src/ 下创建 HTML 文件，并在 vite.config.js 的 rollupOptions.input 中登记入口，页头与页脚可从现有页面复制。

代码采用 MIT 许可，可免费使用、修改、商用与分发，分发时需保留版权与许可声明。演示中出现的图片、字体、图标等第三方素材需单独核对其许可；域名、托管等外部服务可能另行收费。

ViteHTML作品集博客启动器

适合你的项目吗？

适用场景

  • 搭建个人作品集网站，展示项目列表与单个项目详情
  • 搭建带侧边栏的个人博客，包含文章列表与文章详情页
  • 作为学习 Vite 与 Tailwind CSS 多页面 HTML 结构的起步项目
  • 在已有页头页脚基础上扩展新的静态页面

适合人群

  • 希望用纯 HTML 加构建工具搭建个人网站的开发者
  • 需要作品集与博客两类页面模板的个人用户
  • 想参考 Vite 多页面入口配置方式的初学者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    安装依赖：npm install

  2. 2

    启动开发服务器（含 HMR）：npm run dev

  3. 3

    生产构建输出到 dist/：npm run build；本地预览构建结果：npm run preview

  4. 4

    新增页面需在 src/ 创建 .html 文件，并在 vite.config.js 的 rollupOptions.input 中添加入口

  5. 5

    演示图片、字体、图标等第三方素材需按各自许可单独核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文
https://github.com/vladbesson/ohmysite-html-template/blob/main/LICENSEhttps://github.com/vladbesson/ohmysite-html-template/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-11。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 85 / 100
技术栈
Vite · HTML
网站类型
作品集 · 博客 · 启动器
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-09-05
截图检查日期
2026-10-11

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Vite。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: [email protected] · 2026-10-13

查看当时使用的来源资料

SHA-256: 8dfe1abf2cbecdc7f11647d1a631717e70ea232c30ef887f7b685bececb347c1

2026-10-11T14:53:28.777Z

来源文件 / 仓库
# OhMySite — HTML Starter Kit

This project was created back in 2016 as a simple example and starter template for beginner developers to build their personal websites. It included Gulp, SASS, jQuery, and a partials system — a standard setup of that era.

In 2026, the project received a major update: the entire stack was replaced with modern tools — **Vite**, **Tailwind CSS v4**, and **vanilla JavaScript**. All legacy dependencies (Gulp, SASS, jQuery, Slick) were removed, eliminating security vulnerabilities and reducing complexity.

![Preview](preview.jpg)

## Tech Stack

- [Vite 6](https://vite.dev/) — build tool & dev server
- [Tailwind CSS 4](https://tailwindcss.com/) — utility-first CSS framework
- Vanilla JavaScript (ES6+)

## Quick Start

```bash
npm install       # Install dependencies
npm run dev       # Start dev server with HMR
npm run build     # Production build → dist/
npm run preview   # Preview production build
```

## Pages

| Page | File | Description |
|------|------|-------------|
| Home | `index.html` | Hero slider, portfolio carousel, about section, recent posts |
| Portfolio | `portfolio.html` | Responsive project grid (1→4 columns) |
| Project | `portfolio-item.html` | Single portfolio item |
| Blog | `blog.html` | Article list with sidebar |
| Post | `post.html` | Single blog post with sidebar |
| Page | `page.html` | Generic page with sidebar |
| Full Width | `full-width-page.html` | Page without sidebar |
| 404 | `404.html` | Error page |

## Adding a New Page

1. Create a new `.html` file in `src/`
2. Add the entry to `vite.config.js` → `rollupOptions.input`
3. Copy the header and footer from any existing page

## License

MIT
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

cove

cove

The Cove Stack: 🏝️ minimal TanStack Start template with Vite+, Better Auth, Drizzle ORM, shadcn/ui

Vite · SaaS

vite-react-boilerplate

vite-react-boilerplate

A production ready, scalable starter template for Vite + React

Vite · 启动器

vital

vital

Starter template for Vite with React (TypeScript). Supports Tailwind. Vitest and @react/testing-library config…

Vite · 启动器

react-vite-admin

react-vite-admin

This Starter utilizes React, Recoil, React Query, React Hooks, Typescript, Axios And Vite. 全新技术栈的后台管理系统

Vite · 后台

typescript-react_best_practices-vite_template

typescript-react_best_practices-vite_template

<⚡⚛️> Start your React project with Vite following code best practices (TypeScript, Linting, testing, CI/CD…)

Vite · 启动器

cloudflare-starter-kit

cloudflare-starter-kit

Template (boilerplate) repository for scaffolding Cloudflare Workers projects

Vite · 启动器