使用 Grunt 作为构建工具,将 SCSS 编译为 CSS 并部署到 GitHub Pages
basic-bs-gh-website-template — HTML 启动器模板
作者 tspauld98
基于 Grunt 构建的 Bootstrap 静态网站模板,用于部署到 GitHub Pages,依赖 Ruby Sass 与 Node.js 环境。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
全部页面与视图 2
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
基于 Bootstrap 的 Sass 与 JS 示例构建静态页面
grunt run 启动本地服务器,修改 src/public 目录文件时自动重载浏览器
grunt deploy 一键将构建结果发布到 GitHub Pages
要求使用 Ruby 运行时与 Ruby Sass 转译器,而非 Dart Sass
模板详细介绍
这是一个用于 GitHub Pages 的静态网站项目模板。它使用 Grunt 作为构建工具,将 SCSS 通过 Ruby Sass 转译为 CSS,并把构建产物部署到 GitHub Pages。模板内容基于 Bootstrap 的 Sass 与 JS 示例,作者说明它也是其后续若干前端项目模板的基础。
使用流程上,模板要求本地安装 Ruby、Sass(通过 gem install sass 安装的 Ruby Sass 转译器)、Node.js 与 Grunt CLI。执行 npm install 安装依赖后,可用 grunt 构建项目,用 grunt run 构建并启动本地服务器;对 src/public 目录中文件的修改会触发浏览器实时重载。部署时需先把改动提交并推送到自己基于该模板创建的 GitHub 仓库,再执行 grunt deploy,随后可通过 https://[用户名].github.io/[仓库名] 访问。
需要注意的限制:README 明确指出部署步骤仅适用于由该模板创建的个人 GitHub 仓库,直接克隆原仓库或下载 zip 解压后使用的方式无法完成部署。此外,模板要求使用 Ruby Sass 转译器而非 Dart Sass,这会影响环境准备方式。README 的待办清单中,贡献指南一项尚未完成。
适合你的项目吗?
适用场景
- 搭建一个部署在 GitHub Pages 上的 Bootstrap 静态站点
- 需要一个带本地开发服务器与实时重载的前端起步项目
- 以 Grunt 为构建工具、以 SCSS 编写样式的静态网站
适合人群
- 熟悉或愿意配置 Ruby、Node.js 与 Grunt 命令行环境的开发者
- 计划使用 GitHub Pages 免费托管静态页面的个人项目
- 希望以 Bootstrap Sass 示例为起点搭建前端项目的人
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
需预先安装 Ruby、Sass(gem install sass)、Node.js 与 Grunt CLI(npm install -g grunt-cli)
- 2
建议使用 rbenv 管理 Ruby 版本、使用 nvm 管理 Node.js 版本
- 3
在项目根目录执行 npm install 安装依赖,再用 grunt 构建、grunt run 启动本地服务器
- 4
部署前需基于该模板创建自己的 GitHub 仓库并推送改动,然后执行 grunt deploy
- 5
直接克隆原仓库或解压 zip 的方式无法使用 README 中的 GitHub Pages 部署步骤
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 ISC 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许为任何目的免费使用、复制、修改和分发,包括商用。
- 所有副本均需保留原版权声明和许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 构建环境必须使用 Ruby Sass 转译器(通过 gem install sass 安装),不能使用 Dart Sass,否则与模板的 Grunt 构建配置不兼容。
- README 中的 GitHub Pages 部署步骤仅适用于基于该模板创建的个人 GitHub 仓库;直接克隆原仓库或下载 zip 解压后使用,无法按文档完成部署。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 ISC 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
for any purpose with or without fee is hereby granted
许可证原文
You must use the Ruby Sass transpiler which is installed by running `gem install sass`
README 原文
https://github.com/tspauld98/basic-bs-gh-website-template/blob/main/LICENSEhttps://github.com/tspauld98/basic-bs-gh-website-template/blob/main/README.mdThese instructions will NOT work if you have cloned this repository directly or if you have downloaded the source code as a zip file and extracted it to your local development workstation but have not created a Github repository from it.
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料一般 · 65 / 100
- 技术栈
- HTML
- 网站类型
- 启动器
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2024-01-03
- 截图检查日期
- 2026-10-02
已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 HTML。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: e531f4c4ce21b29abbae464e51bde894b76888fa75493298a05bea46a045002e
2026-10-02T08:54:38.923Z
来源文件 / 仓库# Basic Bootstrap Website Project Template for Github Pages This is a basic template for a static website project using Grunt as the build tool and Github Pages for hosting. This template is the basis for several other front-end project templates in development. The contents of this template are based on the [Bootstrap Sass and JS Template](https://github.com/twbs/examples/blob/main/sass-js/README.md). ## Getting Started ### Prerequisites You will need to have the following installed on your machine: * [Ruby](https://www.ruby-lang.org/en/) - This project uses sass to transpile scss into css and the grunt plugin for sass requires the Ruby runtime environment for Sass on the local development workstation that will be used to build your project. You can find OS-specific installation instructions [here](https://www.ruby-lang.org/en/documentation/installation/). Also, it is HIGHLY recommended to use a Ruby version manager such as [rbenv](https://github.com/rbenv/rbenv) to install Ruby. * [Sass](https://sass-lang.com/) - This project uses sass to transpile scss into css. You must use the Ruby Sass transpiler which is installed by running `gem install sass` in a terminal window once you have installed Ruby. * (Optional, but HIGHLY Recommended) [Node Version Manager](https://github.com/nvm-sh/nvm) - This will allow you to easily install and switch between different versions of Node.js and npm. You can find OS-specific installation instructions [here](https://github.com/nvm-sh/nvm#installing-and-updating). * [Node.js](https://nodejs.org/en/) - This is the runtime environment for Grunt on the local development workstation that will be used to build your project. The best way to install Node.js is to use nvm [see these usage instructions](https://github.com/nvm-sh/nvm#usage). If you are not using nvm, you can find OS-specific installation instructions [here](https://nodejs.org/en/download/). `npm` should be installed along with Node.js automatically. If it is not, you can find instructions for installing `npm` [here](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). * [Grunt](https://gruntjs.com/) - This is the build tool that will be used to build your project. You can install Grunt by running the following command in a terminal window: ```bash npm install -g grunt-cli ``` ### Usage 1. If you want to contribute to this template repository, clone this repository to your local development workstation. If you want to build a project based on this template, you can either clone this repository, create your own repository using this template repository or download the source code as a zip file and extract it to your local development workstation. The rest of these instructions assume you have used one of the preceding methods to establish a local copy of this repository on your local development workstation for active development. 2. Open a terminal window and navigate to the root directory of the project. 3. Run the following command to install the project dependencies: ```bash npm install ``` 4. Run the following command to build the project: ```bash grunt ``` 5. Run the following command to build and start the local web server hosting the built project: ```bash grunt run ``` 6. Grunt and the web content in this template project is configured to live reload the target browser whenever a change is made to files in the `src/public` directory. After running the `grunt run` command, simply open your preferred editor to make changes and once you have saved your changes, the browser will automatically reload to display the changes. #### Deploying to Github Pages The following steps assume that you have created a personal Github repository from this project template and that you have cloned that repository to your local development workstation. These instructions will NOT work if you have cloned this repository directly or if you have downloaded the source code as a zip file and extracted it to your local development workstation but have not created a Github repository from it. 7. After you have finished making changes and you want to publish them to Github Pages, commit all of your changes to your local Git repository and push them to your Github hosted repository. 8. Once your local repository and the Github repository are synchronized, run the following command to deploy the latest version of the project to Github Pages: ```bash grunt deploy ``` 9. You can now view the deployed project at the following URL: https://[your-github-username].github.io/[your-github-repository-name] ## Next Steps 1. [x] ~~Update the README.md with usage instructions for Grunt.~~ 2. [x] ~~Add Bootstrap to the project.~~ 3. [x] ~~Add tasks to deploy to Github Pages.~~ 4. [ ] Add contribution instructions for this repository.
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

startbootstrap-simple-sidebar
An off canvas sidebar navigation Bootstrap HTML template created by Start Bootstrap
HTML · 启动器

adminkit
AdminKit is a free & open-source HTML dashboard & admin template based on Bootstrap 5
HTML · 后台

Landing-Page
Tailwind CSS Starter Template - Landing Page
HTML · 企业官网

light-bootstrap-dashboard
Light Bootstrap Dashboard is an admin dashboard template designed to be beautiful and simple.
HTML · 后台

sing-app
💥Free and open-source admin dashboard template built with Bootstrap 4.5 💥
HTML · 后台

startbootstrap-modern-business
A multipurpose Bootstrap full website template created by Start Bootstrap
HTML · 启动器
