Skip to content

Commit

Permalink
fix: remark-gfm版本不兼容降级
Browse files Browse the repository at this point in the history
  • Loading branch information
c0dedance committed Oct 24, 2023
1 parent e36bf08 commit 0532cd9
Show file tree
Hide file tree
Showing 4 changed files with 207 additions and 136 deletions.
110 changes: 110 additions & 0 deletions e2e/playground/basic/docs/guide/start.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
# 快速开始

## 为什么选择 Island.js?

🏝️ Island.js 是一个基于 Vite、React 和 MDX 的静态站点生成器。它的特点是**简单****强大****高性能**,旨在帮助你以最少的配置专注于编写和部署静态站点。它主要具有以下功能:

- **开发体验好**: 基于 Vite 进行构建,启动和热更新速度极快。
- **语法灵活**: 内置 MDX 支持,也就是说你可以在 Markdown 中使用 React 组件。
- **高性能**: 基于[孤岛架构](https://jasonformat.com/islands-architecture/), 实现了 Partial Hydration,意味着更少的客户端 JavaScript 和更少的运行时开销。
- **功能强大**: 默认主题内置了`夜间模式`[`Home 主页`](/zh/guide/home-page)[`API 预览页`](/zh/guide/api-page)[`全文搜索`](/zh/guide/search)[`国际化`](/zh/guide/i18n)等等能力。

接下来,我们将从零开始搭建一个基于 Island.js 的文档站点。

:::tip
目前我们也提供了独立的教程文档,从零到一完成项目初始化、开发、打包并部署,拥有更好的阅读与交互体验,你可以点击[【这里】](https://island-tutorial.sanyuan0704.top/zh)进入。
:::

## 1. 初始化项目

Island.js 有如下两种安装方式,你只需要选择一种即可。我们推荐使用 `create-island` 脚手架,因为它可以帮助你快速简单地安装 Island.js 并搭建网站框架。

### 使用 `create-island` 脚手架

使用 `create-island` 脚手架工具可以帮助你快速简单地安装 island 并搭建网站框架。你可以创建一个仓库并运行这个命令,它会创建一个包含模板文件的新目录。

```bash
# npm
npx @islandjs/create-island@latest island-app
# yarn
yarn create @islandjs/island island-app
# pnpm
pnpm create @islandjs/island island-app
```

回答脚手架询问的问题,然后等待安装完成。它会自动安装依赖并启动开发服务。

假设你将新网站命名为 `island-app`,那么你将会在当前目录下创建一个名为 `island-app` 的新目录。你可以通过如下命令进入该目录:

```bash
cd island-app
```

### 手动安装

当然,你也可以手动初始化项目。首先,你可以通过以下命令创建一个新目录:

```bash
mkdir island-app && cd island-app
```

执行 `npm init -y` 来初始化一个项目。你可以使用 npm、yarn 或 pnpm 安装 Island.js:

```bash
# npm
npm install islandjs
# yarn
yarn add islandjs
# pnpm
pnpm add islandjs
```

然后通过如下命令创建文件:

```bash
mkdir docs && echo '# Hello World' > docs/index.md
```

`package.json` 中加上如下的脚本:

```json
{
"scripts": {
"dev": "island dev docs",
"build": "island build docs",
"preview": "island start docs"
}
}
```

## 2. 启动 Dev Server

通过如下命令启动本地开发服务:

```bash
yarn dev
```

这样 Island.js 将在 http://localhost:5173 启动开发服务。

如果你使用了 `create-island` 脚手架创建项目,那么你就能看到一个带有导航栏以及内容的页面(像这个文档一样)。如果你选择了手动创建项目,那么你将会看到页面上打印的 `Hello World`。这表示你已经成功地启动了 Island.js 的开发服务。

## 3. 生产环境构建

通过如下命令构建生产环境的产物:

```bash
yarn build
```

默认情况下,Island.js 将会把产物打包到 `.island/dist` 目录。

## 4. 本地预览产物

通过如下命令启动本地预览服务:

```bash
yarn preview
```

这样 Island.js 将在 http://localhost:5173 启动预览服务。
5 changes: 0 additions & 5 deletions e2e/playground/basic/docs/guide/start.tsx

This file was deleted.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
"rehype-slug": "^6.0.0",
"rehype-stringify": "^9.0.3",
"remark-frontmatter": "^5.0.0",
"remark-gfm": "^4.0.0",
"remark-gfm": "^3.0.1",
"remark-mdx": "^2.1.5",
"remark-mdx-frontmatter": "^3.0.0",
"remark-parse": "^10.0.1",
Expand Down
Loading

0 comments on commit 0532cd9

Please sign in to comment.