不写代码建博客！在浏览器完成博客搭建，有超详细文档，小白轻松搞定

文档地址：Daymd.
仓库地址：inannan423/Daymd: 个人站点生成器，可以在浏览器完成全部操作！从搭建到部署都可以在浏览器中完成，不需要本地环境。附详细文档。 (github.com)
在线编码预览（stack blitz）：DaymdExample - StackBlitz

介绍

Daymd 是一个基于 Next.js 、 Contenelayer 、 Tailwind CSS 、 DaisyUI 的静态网站生成器。它高度抽象，把几乎所有能够自定义的地方都抽象成了一个个 API 接口，同时它又高度自由，它本身就是一个单纯的 Next.js 应用，你可以通过 React.js 语法创建属于自己的页面和组件，并在 NPM 市场寻找自己想要的插件进行安装。

特点

• 零基础上手。只需要填写 API 接口的参数，就可以搭建出优质美观的网站。
• 专注于内容。进行简单的设置后，您就可以专注于 Markdown 文件的编写，打造以文档为中心的网站。
• 高度自定义。为你提供 28 种美观的主题，同样也是填写参数即可使用，让你的网站与众不同。此外， Daymd 不封装源代码，而是将所有源代码都提供给您，您可以在这基础上修改源代码达到你想要的效果。
• 在浏览器完成部署。您不需要任何的本地环境，只需要在浏览器中完成所有的步骤。

前提准备

一台 电脑、 平板电脑 甚至手机 | 是的，你只需要有一台能够访问互联网的设备。

• Q：需要有 Node.js 等运行环境吗？

不需要。

• Q：需要有 HTML 、 CSS 、 JavaScript 知识的基础吗？

不需要。

• Q：需要有其他编程知识的基础吗？

不需要。

• Q：需要学习过上面罗列的框架和工具如 Next.js 吗？

不需要。

成果展示

多种主页模式

文档博客及自动生成侧边栏

导航页面

29种主题

修改接口即可完成自定义

daymd.config.js 是全局配置文件，它能帮你自定义网站中的一些功能和样式。诸多设置只在这一文件中完成。

步骤

仓库克隆

你将使用我的源码进行网站架构。这需要你克隆我的源代码。打开 Daymd Github 仓库 ,点击右上角按钮 Fork ，将我的仓库克隆到你的仓库。

与此同时，请您顺手点一个 Star ！拜托了！🙏🙏🙏🙏🙏🙏

这时，你就可以在你的 GitHub 仓库中拥有一个 Daymd 副本。

stackblitz 在线编辑

Stackblitz 是一个在线的代码编辑器，主要聚焦于创建 Web 应用项目。它的最大优点是在浏览器中就可以完成一个完整 Web 应用的构建。它让 Node.js 可以在浏览器中运行，这也就帮助我们免去了 Node.js 安装和部署、NPM 安装部署工作。如果你未接触过此类 Web 开发流程，那就跟着这一章节，在浏览器中借助在线 IDE Stackblitz 开始一个 Daymd 项目（也就是一个 Next.js 项目）。

• 项目导入

打开 Stackblitz 官网 按照提示，点击创建一个 Next.js 的工程：

接着，进入工程界面，点击 Connect repository:

点击 import an existing repository ，导入一个已存在的仓库：

接着，到你刚刚 Fork 好的仓库（注意是你自己的仓库，名称应该是 yourgithubid/Daymd ） 而不是 inannan423/Daymd 。复制浏览器地址栏的链接：

粘贴到 Stackblitz 导入界面。

点击按钮 import repository 导入。导入完成后显示如下：

• 项目运行

这时，需要你重新刷新浏览器。等待重新安装完成。如果依旧如此，请尝试多次刷新。成功之后右边会展示新的预览。

点击右上角，open in new tab。

就可以开始在线编写个人网站啦！

• 代码编辑器设置

设置代码编辑区字体大小，在设置中的 User Setting 中，找到 "editor.fontSize": 20, 字段(可以使用 ctrl+F 搜索快速找到)，建议值 20 ：

项目结构

daymd
├── content
│   ├── docs
│   │    ├── index.md
│   │    ├── 000-doc1
│   │    │   ├── index.md
│   │    │   ├── 000-doc11.md
│   │    │   └── 001-doc12.md
│   │    └── 002-doc2
│   │        ├── index.md
│   │        ├── 000-doc11.md
│   │        └── 001-doc12.md
│   └── posts
│        ├── index.md
│        ├── 000-post1
│        │   └── index.md
│        └── 002-post2
│            └── index.md
├── src
│   ├── configs
│   │   └── ...
│   ├── contentlayer
│   │   └── ...
│   └── themes
│       └── ...
│
├── navData
│   ├── friend.ts
│   └── website.ts
│
├── components
│   └── ...
│
├── .contentlayer
│   └── ...
│
├── .next
│   └── ...
│
├── pages
│   │
│   ├── _app.tsx
│   │
│   ├── index.tsx
│   │
│   ├── docs
│   │    └── [[...slug]].tsx
│   ├── posts
│   │    └── [[...slug]].tsx
│   └── website
│        └── index.tsx   
│
├── public
│    ├── images
│    └── locals
│ 
├── styles
├── typings
├── utils
├── contenelayer.config.js
├── next-env.d.ts
├── next.config.js
├── package.json
├── package-lock.json
├── README.md
├── postcss.config.js
├── tailwind.config.js
├── tsconfig.json
└── daymd.config.js

在这个长长的架构树中，有很多都是你不需要关注的，你需要关注的文件只有 daymd.config.js 文件、content 文件夹以及 navData 文件夹。这三个文件（夹）中都不需要编写任何代码。你说的对，我可以把不需要的文件全部封装起来，但是我比较懒😝，以后的版本再说吧。

• daymd.config.js ：站点配置文件。这里面封装了全栈所有可以设置的 API ，你可以在这里决定网站的每一个细节。
• content：内容文件夹，用于存放文档和博客。
• navData：导航数据文件夹，用于存放导航中可以渲染的链接数据。

简单设置

• 主页

打开项目全局设置文件 daymd.config.js ：

这里有个 heroMode 字段，我们尝试将它从默认值 3 更改为 1 :

// 全局API接口
const configs = {
  // ...
  // hero模式,0：不显示；1：背景图模式；2：宇宙模式;3:博客模式;
  heroMode: 3,
  //...
};

修改前的样式：

// 全局API接口
const configs = {
  // ...
  // hero模式,0：不显示；1：背景图模式；2：宇宙模式;3:博客模式;
  heroMode: 1,
  //...
};

按下 ctrl+s 保存文件，可以看到右边的执行窗口开始刷新，等待刷新完成。在刷新过程中，右下角会出现小三角形：

刷新完成后，可以看到样式变成了下面这样：

• 添加新文档

打开 content 文件夹，再打开 docs 文件夹上 🖱右键 ，创建一个新的文件夹：

比如叫 003-newfolder，请注意，文件夹必须以 000-xxxx 的格式命名，否则会报错:

再在 003-newfolder 文件夹上面右键，创建新的文件 index.md 。贴入下面的内容:

---
title: 我的第一篇文档
excerpt: 文档1
date: 2022-08-29
---

## 一级目录 1

### 二级目录 1

<Tips>你好</Tips>

### 二级目录 2

## 一级目录 2

按下 ctrl+s 保存文件，可以看到右边的执行窗口开始刷新，等待刷新完成。刷新完成后 docs 页面将会添加一个新的文件夹和一篇新的文章。

怎么样？通过上面的尝试，是不是觉得你已经可以开始驾驭 Daymd 了！并没有写任何代码！！（Markdown 文档内容不算代码）。

容器

除了基本的 Markdown 语法外，我们还为您提供了几种容器。

API

daymd.config.js 为用户提供了丰富的 API 用于自定义。

参考API文档

API 展示：

代码片段

或者在 stackblitz 实时预览：DaymdExample - StackBlitz

部署

保存和提交

在项目左上角点击 commit 按钮按照提示点击 commit 。现在，你更新的代码就保存到 GitHub 了。

出现最近更新的时间。表明提交成功：

Netlify 部署

Netlify 是一个提供网站部署服务的开源平台，可以让开发者在线部署静态网站。仅仅需要几部简单的操作就可以完成一个网站的部署与发布。

进入 https://netlify.com 网站，点击右上角 Sign Up 进行登录。

注意，必须使用 GitHub 进行登录。

注册完成后，进入控制台界面，选择 Add a new site，创建一个新的项目。

选择 Import an existing project from a Git repository 然后选择 GitHub 导入：

选择目标仓库（你 Fork 的仓库）。

选择部署分支为 main 取决于你存放的分支。

下面的选项是部署指令，不用理会。它已经帮我们选好了。

点击 Deploy Site 即可完成搭建。

点击进入可以看到部署过程。

出现 Site is live 即部署完成。

点击进入站点设置，为项目更改名字。

修改成功。

访问这个链接。

访问得到预期成果，部署完成！

之后，你对你的博客进行修改，增加文章等操作，一旦 GitHub 内容发生变化， Netlify 会自动帮你进行重新部署，待一段时间后即可重新看到。

总结

使用 daymd 使你能够不用写代码就能搭建出个性鲜明的网站。并且不需要本地 Nodejs 环境，就能在浏览器种完成整个搭建过程。这是前端初学者小萌新暑假写的一个小玩具，源代码很乱，希望大佬勿喷！如果能够帮到你请给我一个 Star 吧！

文档地址：Daymd.
仓库地址：inannan423/Daymd: 个人站点生成器，可以在浏览器完成全部操作！从搭建到部署都可以在浏览器中完成，不需要本地环境。附详细文档。 (github.com)
在线编码预览（stack blitz）：DaymdExample - StackBlitz