人生在世，看得透，又看得远者prevail everywhere.: 搭建静态网站程序vitepress

Tuesday 22 October 2024

搭建静态网站程序vitepress

Vite & Vue powered static site generator.

vitepress.dev

VitePress is a Vue-powered static site generator and a spiritual successor to VuePress, built on top of Vite.

Documentation

To check out docs, visit vitepress.dev.

from https://github.com/vuejs/vitepress

(https://vitepress.dev/guide/getting-started)

示例：

$ npm add -D vitepress （安装vitepress)

$ npx vitepress init
Need to install the following packages:
vitepress@1.4.1
Ok to proceed? (y) y

T Welcome to VitePress!
|
o Where should VitePress initialize the config?
| ./vitepress-site
|
o Site title:
| vitepress blog of brite
|
o Site description:
| A VitePress Site
|
o Theme:
| Default Theme
|
o Use TypeScript for config and theme files?
| Yes
|
o Add VitePress npm scripts to package.json?
| Yes
|
— Done! Now run npm run docs:dev and start writing.

$ ls ./vitepress-site
api-examples.md index.md markdown-examples.md

$ npm run docs:dev

> docs:dev
> vitepress dev vitepress-site

vitepress v1.4.1

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help

按ctrl+c，终止运行npm run docs:dev命令。

运行npx vitepress dev vitepress-site也可启动这个development server.

npx vitepress build vitepress-site

（$ npm run docs:build

> docs:build
> vitepress build vitepress-site

vitepress v1.4.1

✓ building client + server bundles...
✓ rendering pages...
build complete in 19.04s. ）

然后在浏览器里访问http://localhost:5173/，即可看到静态网站的效果。

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

$ npm create async-theme@latest at-vp-site
Need to install the following packages:
create-async-theme@0.0.4
Ok to proceed? (y) y

> npx
> create-async-theme at-vp-site

Creating vitepress-theme-async project...

🎉 🎉 created successfully!

📚 📚 docs: https://vitepress-theme-async.imalun.com

project in C:\Users\12799\at-vp-site

Done. Now run:

① cd at-vp-site
② npm install
③ npm run dev

$ cd at-vp-site

$ npm install

$ npm run build （此命令会生成静态网站的根目录：~/at-vp-site/.vitepress/dist/）

新建源帖：

$ cd posts

~/at-vp-site/posts $ ls

hello-world.md

~/at-vp-site/posts $ nano happy-festival.md

~/at-vp-site/posts $ cat happy-festival.md

显示：

---

title: 快乐的节日

date: 2024-10-27 23:19:00

sticky: 1

tags: music

---

此处空一行

此处写正文或html codes.

$ cd ..

$ npm run build

演示网站：

1. https://peaceful-pudding-c9b85f.netlify.app/

2. another VitePress demo. (发表了11篇帖子，就分页了）

项目地址：https://github.com/vuejs/vitepress

https://github.com/MaLuns/vitepress-theme-async

默认情况下都是按每页10篇帖子，日期倒叙进行分页
-----------------------------------------------------------------

$ git clone https://github.com/MaLuns/blog MaLuns-blog

$ cd MaLuns-blog

$ npm install

$ npm audit fix --force

$ npm run dev
显示：

> vitepress-blog@1.0.0 dev
> vitepress dev ./

vitepress v1.3.4

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help

$ npm run build

然后在浏览器里访问http://localhost:5173/，显示的网站内容跟https://www.imalun.com/一模一样。
----------------------

git clone https://github.com/Alittfre/vitepress-theme-bluearchive vitepress-theme-bluearchive-by-Alittfre

cd vitepress-theme-bluearchive-by-Alittfre

pnpm install

pnpm build （此命令会生成静态网站的根目录：./.vitepress/dist/）

 新建源帖：

 cd ~/vitepress-theme-bluearchive-by-Alittfre/posts

nano happy-festival.md

cat happy-festival.md

显示：

---
title: 快乐的节日
date: 2024-10-29 22:30:00
tags: [life, music]
---

此处写正文或html codes.

cd ..

pnpm build

演示网站：https://stupendous-praline-26b73d.netlify.app/

项目地址：https://github.com/Alittfre/vitepress-theme-bluearchive

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

项目地址：https://github.com/zhangdi168/VitePressSimple

http://vpsimple.xiaod.co/en/ （VitePress Configuration Tool）

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

$ git clone https://github.com/airene/vitepress-blog-pure vitepress-blog-pure-by-airene

$ cd vitepress-blog-pure-by-airene

$ pnpm install

$ pnpm build

$ find . -name index.html

./.vitepress/dist/index.html

新建源帖：

$ cd ~/vitepress-blog-pure-by-airene/posts

$ nano happy-festival.md

$ cat happy-festival.md

$ cd ..

$ pnpm build

演示网站：https://ti.bi/

https://relaxed-bubblegum-5f923c.netlify.app/

项目地址：https://github.com/airene/vitepress-blog-pure （支持分页）

https://github.com/airene/vitepress-blog-pure/issues/28

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

git clone https://github.com/clark-cui/vitepress-blog-zaun vitepress-blog-zaun-by-clark-cui

cd vitepress-blog-zaun-by-clark-cui

$ pnpm install

$ pnpm build

$ find . -name index.html

./.vitepress/dist/index.html

新建源帖：

$ cd posts

$ nano happy-festival.md

$ cat happy-festival.md

显示：

---
title: 快乐的节日
description: 这是一首歌
date: 2024-10-30 18:42:00
tags:
- music
---

此处写正文或html codes.

cd ..

pnpm build

演示网站：

https://visionary-sunflower-dc7ae3.netlify.app/

https://tangerine-puppy-a512eb.netlify.app/

项目地址：https://github.com/clark-cui/vitepress-blog-zaun （支持分页）

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

git clone https://github.com/imsyy/vitepress-theme-curve vitepress-theme-curve-by-imsyy

cd vitepress-theme-curve-by-imsyy

$ pnpm install

$ pnpm build

$ find . -name index.html
./.vitepress/dist/index.html

新建源帖：

cd posts

nano happy-festival.md

cat happy-festival.md

---
title: 快乐的节日
tags: [music]
date: 2024-10-30 20:12:00
description: 这是一篇文章.
---

此处写正文或html codes.

cd ..

pnpm build

演示网站：

https://blog.imsyy.top/

https://aesthetic-axolotl-9247a4.netlify.app/

项目地址：https://github.com/imsyy/vitepress-theme-curve （支持分页）

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

git clone https://github.com/vuejs/blog blog-by-vuejs

cd blog-by-vuejs

pnpm install

pnpm build

$ find . -name index.html
./.vitepress/dist/index.html

$ cd .vitepress/dist/

$ python3 -m http.server 1234

新建源帖：

$ cd ../..

$ cd posts

$ nano happy-festival.md

$ cat happy-festival.md

显示：

---
title: '快乐的节日'
date: 2024-10-30 16:56:00
---

此处写正文或html codes.

cd ..

pnpm build

演示网站：

https://blog.vuejs.org/

https://joyful-dusk-e56d3f.netlify.app/

项目地址：https://github.com/vuejs/blog

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

https://juejin.cn/post/6896382276389732359

$ git clone https://github.com/Moking1997/vitepress-blog vitepress-blog-by-Moking1997

$ cd vitepress-blog-by-Moking1997

$ yarn (此处不要用pnpm install）

$ yarn build (此处不要用pnpm build）

$ find . -name index.html
./.vitepress/dist/index.html

新建源帖：

$ cd ~/vitepress-blog-by-Moking1997/docs

$ nano happy-festival.md

$ cat happy-festival.md

显示：

---
date: 2024-10-30 18:13:00
title: 快乐的节日
tags:
- life
- music
describe: 这是一首歌
---

此处写正文或html codes.

$ cd ..

$ yarn build

演示网站：https://dainty-quokka-fb9ddf.netlify.app/

项目地址： https://github.com/Moking1997/vitepress-blog

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

git clone https://github.com/ATQQ/sugar-blog sugar-blog-by-atqq
cd sugar-blog-by-atqq
pnpm install
pnpm buildlib
pnpm build （此命令会生成/更新静态网站的根目录）

显示：

...
> sugar-wiki-monorepo@2.0.0 build C:\Users\12799\sugar-blog-by-atqq
> pnpm --filter blogpress build

> blogpress@2.0.62 build C:\Users\12799\sugar-blog-by-atqq\packages\blogpress
> vitepress build

vitepress v1.4.1

\ building client + server bundles...
(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ building client + server bundles...
✓ rendering pages...
✓ generating sitemap...
🎉 RSS generated feed.rss
rss filepath: C:\Users\12799\sugar-blog-by-atqq\packages\blogpress\.vitepress\dist\feed.rss
rss url: https://sugarat.top/feed.rss
include 100 posts
✓ generating RSS: 29.207s

🎉 RSS generated weekly.rss
rss filepath: C:\Users\12799\sugar-blog-by-atqq\packages\blogpress\.vitepress\dist\weekly.rss
rss url: https://sugarat.top/weekly.rss
include 90 posts
✓ generating RSS: 16.968s

=== pagefind: https://pagefind.app/ ===
npx pagefind --site "C:/Users/12799/sugar-blog-by-atqq/packages/blogpress/.vitepress/dist" --exclude-selectors "div.aside, a.header-anchor"

Running Pagefind v1.1.1 (Extended)
Running from: "C:\\Users\\12799\\sugar-blog-by-atqq\\packages\\blogpress"
Source: ".vitepress/dist"
Output: ".vitepress/dist\\pagefind"

[Walking source directory]
Found 522 files matching **/*.{html}

[Parsing files]
Found a data-pagefind-body element on the site.
↳ Ignoring pages without this tag.

[Reading languages]
Discovered 1 language: zh-cn

[Building search indexes]
Total:
Indexed 1 language
Indexed 519 pages
Indexed 15087 words
Indexed 0 filters
Indexed 0 sorts

Finished in 11.783 seconds
✓ generating pagefind Indexing...
build complete in 302.21s.

可见：静态网站的根目录为C:\Users\12799\sugar-blog-by-atqq\packages\blogpress\.vitepress\dist\

新建源帖：

cd ~/sugar-blog-by-atqq/packages/blogpress/technology/learn

（博客的源帖的位置：

https://github.com/ATQQ/sugar-blog/tree/master/packages/blogpress/technology）

nano happy-festival.md

cat happy-festival.md

显示：

---
title: 快乐的节日
date: 2024-10-30 00:51:00
tags:
- life
- music
---

此处写正文或html codes.

cd ~/sugar-blog-by-atqq/

pnpm build

演示网站:

https://sugarat.top/

https://dynamic-swan-daca2c.netlify.app/

项目地址：https://github.com/ATQQ/sugar-blog（支持分页）

（https://sugar-at.gitbook.io/blog-article）

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

cd ~
$ pnpm create @sugarat/theme st-blog
Creating @sugarat/theme project...

🎉 🎉 created successfully!

project in C:\Users\12799\st-blog

Done. Now run:

① cd st-blog
② pnpm install
③ pnpm run dev
④ pnpm run build
⑤ pnpm run serve

$ cd st-blog
pnpm install
pnpm build
$ cd docs/.vitepress/dist

新建源帖：
cd ~/st-blog/docs/sop
nano happy-festival.md
cat happy-festival.md
显示：
---
sticky: 999
description: 快乐的节日
tag:
- music
top: 1
sidebar: false
---

此处写正文或html codes.

cd ~/st-blog/
pnpm build

演示网站：

https://theme.sugarat.top/

https://heroic-gumption-c407f7.netlify.app/

项目地址：

https://github.com/ATQQ/sugar-blog/tree/master/packages/theme

（https://theme.sugarat.top/sop/quickStart.html）

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

VitePress 是一个基于 Vue.js 的静态站点生成器和文档工具。它专注于快速、轻量级和简单易用的文档编写和展示，是 Vue.js 官方团队提供的一种文档解决方案。

VitePress 的主要特点和功能包括：

基于 Vue.js 和 Vite: VitePress 基于 Vue.js 和 Vite 构建，利用 Vue.js 的强大功能和生态系统，提供了一个高效的文档编写和展示环境。
快速的热重载: VitePress 借助于 Vite 的热重载功能，能够在开发过程中快速预览和调试文档的变化，提高开发效率。
Vue 单文件组件支持: VitePress 支持使用 Vue 单文件组件编写文档，使得文档编写更加模块化和可复用。
Markdown 和 Vue 混合编写: VitePress 允许在文档中混合使用 Markdown 和 Vue 代码块，使文档编写更加灵活和强大。
自动生成导航和侧边栏: VitePress 可以根据目录结构自动生成导航和侧边栏，使得文档的导航和浏览更加直观和友好。
自定义主题: VitePress 允许开发者根据自己的需求定制和扩展文档主题，使文档风格和样式符合项目的设计和品牌要求。
部署简单: VitePress 生成的文档是静态文件，可以轻松地部署到各种静态文件托管服务、云存储或 CDN 上。

VitePress 是一个轻量级且功能强大的静态站点生成器和文档工具，适用于编写和展示各种类型的文档，如技术文档、组件文档、API 文档等。它的快速、灵活和易用性使得文档编写和管理变得更加简单和高效。

你可以查看它的官网和GitHub了解更多.

人生在世，看得透，又看得远者prevail everywhere.

Total Pageviews

Tuesday 22 October 2024

搭建静态网站程序vitepress

Documentation

No comments:

Post a Comment