搭建静态网站程序Nextra

Simple, powerful and flexible site generation framework with everything you love from Next.js.

nextra.site

Simple, powerful and flexible site generation framework with everything you love from Next.js.

Documentation

https://nextra.site

Development

Installation

The Nextra repository uses PNPM Workspaces and Turborepo. To install dependencies, run pnpm install in the project root directory.

Build Nextra Core

cd packages/nextra
pnpm build

Watch mode: pnpm dev

Build Nextra Theme

cd packages/nextra-theme-docs
pnpm build

Command	Description
pnpm dev	Watch mode
pnpm dev:layout	Watch mode (layout only)
pnpm dev:tailwind	Watch mode (style only)

Development

You can also debug them together with a website locally. For instance, to start examples/docs locally, run

cd examples/docs
pnpm dev

Any change to example/docs will be re-rendered instantly.

If you update the core or theme packages, a rebuild is required. Or you can use the watch mode for both nextra and the theme in separated terminals.

from https://github.com/shuding/nextra 

-----

Nextra

官网：https://nextra.site/

React 是和 Vue 齐名的前端开发框架。Next.js 是 React 官方首推的脚手架项目，而 Nextra 则是基于 Next.js 的开发的静态网站搭建框架，适合搭建博客和知识库。

-------------------------------------------------

cd ~

git clone  https://github.com/shuding/nextra

cd nextra

pnpm install

pnpm build:all

显示：

...

Tasks:    5 successful, 5 total
...

$ cd examples/blog

~/nextra/examples/blog $ pnpm build

~/nextra/examples/blog $ find . -name index.html

显示:
./.next/server/pages/index.html

(可见~/nextra/examples/blog/.next/server/pages就是静态网站的根目录）
新建源帖：

$ cd ~/nextra/examples/blog/pages/posts

$ nano hf.mdx

$ cat hf.mdx

显示：

---
title: 快乐的节日
date: 2024/11/11 11:18
description: 这是一首歌
tag: music
---

此处写正文或html codes.

$ cd ~/nextra/examples/blog

$ pnpm build

演示网站：https://dapper-torte-df1cdc.netlify.app/

https://dapper-torte-df1cdc.netlify.app/posts

项目地址： https://github.com/shuding/nextra