Deck 是一个基于 Markdown 的静态网站生成器,它允许你使用简单的语法和模板来创建美观且功能丰富的个人或团队网站。以下是快速上手 Deck 搭建个性化网页的教程。
第一步:安装 Node.js 和 npm
Deck 是一个 Node.js 应用,因此首先需要安装 Node.js 和 npm(Node.js 包管理器)。你可以从 Node.js 官网 下载并安装。
安装完成后,打开命令行工具,输入以下命令检查 Node.js 和 npm 是否已正确安装:
node -v
npm -v
确保版本号正确显示。
第二步:创建新项目
在命令行中,切换到你想创建网站目录的位置,然后运行以下命令来创建一个新的 Deck 项目:
npx degit jamiebuilds/deck
这个命令会使用 GitHub 上的模板创建一个新的 Deck 项目。
第三步:配置项目
进入项目目录:
cd deck
然后,安装项目依赖:
npm install
接下来,运行以下命令来启动本地服务器:
npm run dev
现在,你可以通过浏览器访问 http://localhost:8000 来预览网站。
第四步:编辑 Markdown 文件
Deck 使用 Markdown 文件来生成网页内容。在项目根目录下,你可以看到一些预定义的 Markdown 文件,例如 index.md 和 about.md。
编辑这些文件来添加你的内容。例如,编辑 index.md 文件来更改首页内容:
---
title: "我的个性化网站"
description: "这是一个使用 Deck 搭建的个性化网站。"
---
# 欢迎来到我的网站
这里是首页的内容。
第五步:自定义样式
Deck 允许你通过 CSS 文件来自定义网站样式。在项目根目录下,你可以看到 styles 文件夹,其中包含了 main.css 文件。
编辑 main.css 文件来添加你的自定义样式。例如:
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
color: #333;
}
保存文件后,刷新浏览器预览效果。
第六步:添加功能
Deck 支持多种插件和功能,例如博客、画廊、搜索等。你可以通过 npm 安装这些插件:
npm install --save @deckjs/blog @deckjs/search
在 index.md 文件中,你可以使用相应的插件标签来启用功能:
---
title: "我的个性化网站"
description: "这是一个使用 Deck 搭建的个性化网站。"
---
# 欢迎来到我的网站
这里是首页的内容。
[博客](/blog) | [搜索](/search)
第七步:部署网站
当你完成网站构建并满意效果后,可以使用以下命令将网站部署到 GitHub Pages:
npm run deploy
按照提示操作,将网站部署到 GitHub Pages。
总结
通过以上步骤,你就可以快速上手使用 Deck 搭建个性化的网页了。Deck 提供了丰富的功能和灵活性,让你可以轻松创建美观且功能丰富的个人或团队网站。祝你搭建愉快!