一个由Deno和React驱动的静态网站生成器

news2024/11/5 15:55:18

大家好,今天给大家分享一个由 Deno + React 驱动的静态网站生成器Pagic

项目介绍

Pagic 是一个由 Deno + React 驱动的静态网站生成器。它配置简单,支持将 md/tsx 文件渲染成静态页面,而且还有大量的官方或第三方主题和插件可供扩展。

核心特点

配置简单:Pagic遵循约定优于配置的理念,尽可能减少配置项,通过符合直觉的设计降低用户理解成本。

支持多种文件渲染:支持将md(Markdown)和tsx(TypeScript JSX)文件渲染成静态页面。

React组件可编程性:能运行tsx中的Hooks,借助React组件的可编程性,极大地扩展了静态网站的能力。

性能优越:生成的每个页面都带有预渲染好的HTML,具有极致的加载性能和搜索引擎优化(SEO)效果。

灵活的主题与插件:提供官方和第三方主题及插件,用户可轻松生成网站、创建个性化主题或扩展现有主题。

特色功能

静态页面生成:将Markdown和TypeScript JSX文件转换为静态HTML页面。

React组件支持:允许在页面中使用React组件,增加页面的交互性和动态效果。

主题与插件扩展:用户可通过官方或第三方主题和插件扩展网站功能,实现个性化定制。

搜索引擎优化:生成的静态页面有利于搜索引擎抓取和排名,提升网站曝光度。

应用场景

个人博客:利用Pagic快速搭建个人博客,发布文章、分享心得。

企业官网:通过Pagic生成企业官网,展示企业信息、产品服务和联系方式。

文档网站:将Markdown格式的文档转换为静态页面,构建易于阅读和查找的文档网站。

安装使用

安装

安装 Deno

Pagic 是基于 Deno 实现的,所以使用前需要先安装 Deno。

# Shell (Mac, Linux):
curl -fsSL https://deno.land/x/install/install.sh | sh

其他安装方式(PowerShell、Homebrew 等)可以参考 Deno 官网。

中国大陆用户可以使用镜像加速安装。

安装 Pagic

执行以下命令来安装最新版本的 Pagic:

deno install --unstable --allow-read --allow-write --allow-net --allow-env --allow-run --name=pagic https://deno.land/x/pagic/mod.ts

若需要安装指定版本的 Pagic,则可以在安装的 URL 中加入版本号:

deno install --unstable --allow-read --allow-write --allow-net --allow-env --allow-run --name=pagic https://deno.land/x/pagic@v1.6.3/mod.ts

Pagic 只会要求必须用到的权限,如果你希望更进一步限制 Pagic 运行时的权限,可以通过指定读写目录的方式加以限制:

deno install --unstable --allow-read=/home/xcatliu/site --allow-write=/home/xcatliu/site --allow-net --allow-env --allow-run --name=pagic https://deno.land/x/pagic/mod.ts
通过 Docker 安装

执行以下命令可以通过 Docker 安装 Pagic:

alias pagic='docker run -it --rm -v $PWD:/pagic xcatliu/pagic'

需要注意的是,执行以上命令只会在当前 shell 生效,如果希望永久生效,建议将它写入到 ~/.bashrc 或 ~/.bash_profile 或 ~/.zshrc 中。

使用

初始化项目

要使用 pagic 构建静态网站,则该项目至少需要包含一个 pagic.config.ts 配置文件和一个 md/tsx 页面文件:

site/
├── pagic.config.ts
└── README.md

当然,pagic.config.ts 一开始可以只导出一个空对象:

export default {};

README.md 可以是一个简单的 Markdown 文件:

# Hello world

你可以运行以下命令一次性创建出上面的 site 项目:

mkdir site && cd site && echo "export default {};" > pagic.config.ts && echo "# Hello world" > README.md

你也可以运行 pagic init 然后选择 site 在当前目录下生成一个 pagic.config.ts 文件。

打包

接下来,我们就可以在项目中使用 pagic build 命令了。它的基本用法如下:

# 构建静态网站
pagic build [options]
# --watch   监听文件变动以重新构建
# --serve   启动本地服务,预览静态网站
# --port    指定本地服务的端口号

不妨试试在 site 目录下运行以下代码:

pagic build --watch --serve

然后用浏览器打开 http://127.0.0.1:8000/ ,看看是不是显示出 Hello world 了呢?

注意,构建结果在 dist 目录中(这里隐藏了一些次要的文件):

site/
|── dist    # 构建结果目录
|   └── index.html
├── pagic.config.ts
└── README.md

一般的 Markdown 文件会被构建为同名的 HTML 文件,但是 README.md 被构建为了 index.html,这是一种人性化的处理,方便同时在 GitHub 中和静态网站中展示首页的内容。

详细使用教程,请阅读官方文档。

案例

  • Templates: docs
  • TypeScript 入门教程 (GitHub)
  • 流浪小猫的博客 (GitHub)
  • Deno X ranking (GitHub)
  • Deno 钻研之术 (GitHub)
  • Deno 中文手册 (GitHub)
  • JavaScript 20 年 (GitHub)
  • ECMAScript+ 面试宝典 (GitHub)
  • Blitz.js + React 全栈开发手册 (GitHub)
  • 自然醒的博客(GitHub)
  • Viktor’s Docs(GitHub)
  • 0xzhang 的博客(GitHub)
  • Add my site as a demo 😝

项目地址

https://github.com/basecamp/omakub

一个由Deno和React驱动的静态网站生成器 - BTool博客 - 在线工具软件,为开发者提供方便 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2233661.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

1分钟解决Excel打开CSV文件出现乱码问题

一、编码问题 1、不同编码格式 CSV 文件有多种编码格式,如 UTF - 8、UTF - 16、ANSI 等。如果 CSV 文件是 UTF - 8 编码,而 Excel 默认使用的是 ANSI 编码打开,就可能出现乱码。例如,许多从网络应用程序或非 Windows 系统生成的 …

发布天工AI高级搜索功能,昆仑万维做最懂科研学术的AI搜索

今天,昆仑万维天工AI正式发布最新版本的AI高级搜索功能。 一年时光,栉风沐雨。昆仑万维致力于通过领先的AI技术,为全球用户提供创新的智能搜索和信息处理解决方案。无论是金融、科技领域的专业搜索还是文档分析,「天工AI高级搜索…

mac找到主目录下的文件夹

访达-(上方状态栏显示)-然后在

安装fpm,解决*.deb=> *.rpm

要从生成 .deb 包转换为 .rpm 包,可以按照以下步骤修改打包脚本 1. 使用 fpm 工具 fpm 是一个强大的跨平台打包工具,可以将 .deb 包重新打包成 .rpm,也可以直接从源文件打包成 .rpm。 安装 fpm sudo apt-get install ruby-dev sudo gem in…

分布式光伏管理办法

随着分布式光伏项目的不断增加,传统的管理方式已经难以满足高效、精准的管理需求。光伏业务管理系统作为一种集信息化、智能化于一体的管理工具,正在逐步成为分布式光伏项目管理的重要支撑。 光伏业务管理系统通过数字化手段实现对光伏业务全流程的精细化…

数据结构:LRUCache

什么是LRUCache 首先我们来看看什么是cache 缓存(Cache)通常用于两个速度不同的介质之间,以提高数据访问的速度和效率。这里有几个典型的应用场景: 处理器和内存之间: 处理器(CPU)的运算速度远…

智能提醒助理系列-springboot项目彩虹日志+TraceID

本系列文章记录“智能提醒助理”产品建设历程,记录实践经验、巩固知识点、锻炼总结能力。 本篇介绍如何让springboot启动日志“彩打” 提升日志识别度,同时增加TraceID,便于同一请求,全链路的追踪。 一、需求出发点 提升日志识别度…

窨井监测遥测终端RTU IP68防水强信号穿透力

在窨井的潮湿 黑暗和腐蚀性环境中 常规物联网设备往往难以生存 如何突破层层环境挑战 轻松应对极端条件 确保信号 24h不掉线,不延迟 不仅是对技术的突破 更是对恶劣环境的征服 ↓↓↓ 坚守 ——严苛环境下的工业设备 计讯物联工业级设备,专为恶劣环境设计…

150道MySQL高频面试题,学完吊打面试官--如何实现索引机制

前言 本专栏为150道MySQL大厂高频面试题讲解分析,这些面试题都是通过MySQL8.0官方文档和阿里巴巴官方手册还有一些大厂面试官提供的资料。 MySQL应用广泛,在多个开发语言中都处于重要地位,所以最好都要掌握MySQL的精华面试题,这也…

基于Matlab 模拟停车位管理系统【源码 GUI】

系统对进入停车位的车辆进行车牌识别,将识别出来的车牌号显示出来;然后对车主进行人脸识别,框出车主照片的人脸部分作为车主信息的标记,记录在系统库中。车辆在库期间,系统使用者可以随意查看车辆与车主信息的获取过程…

微信小程序 https://pcapi-xiaotuxian-front-devtest.itheima.net 不在以下 request 合法域名

微信小程序在调用接口的时候出现以上报错,接口没有问题,是因为小程序自动校验了合法域名 打开本地设置: 勾选不校验合法域名,即可 效果如下:

数据治理,数据提取,大数据中心建设,大数据治理总体解决方案书(word,ppt原件)

1. 数据管理的现状 2. 数据治理的概述 1.1数据治理概念 2.2数据治理目标 3. 数据治理体系 4. 数据治理核心领域 1.1 数据模型 1.2 数据生命周期 (1)数据生成及传输 (2)数据存储 (3)数据处理和应用…

电机控制储备知识 二:电磁学理论知识

一:磁场的发现过程和和一些实验现象 古代发现:公元前七世纪,中国和古希腊的学者就已经发现了磁石。 吉尔伯特的研究:1600年,英国女王御臣威廉吉尔伯特(William Gilbert)发表了《地磁论》&#…

Java:数组的定义和使用(万字解析)

目录 1. 数组的概念 2. 数组的基础知识 2.1 数组的创建 \1. 基础创建格式: \2. 类似C语言的创建格式: 【错误的创建(初始化)格式】 2.2 数组的数据类型 2.3 数组的初始化 —— 两种方式 \1.动态初始化:(完全默认初始化) \2. 静态初…

ProLightsfx新的出发–从CSDN到WordPress

原文链接:ProLightsfx新的出发--从CSDN到WordPress_ProLightsfx的技术分享 (https://www.prolightsfxjh.com/article/article-new-start/) 大概有差不多2年时间没有在csdn发布文章了。可能主要是最近几年工作有些疲惫、精神有些懈怠&#xff…

【react】Redux基础用法

1. Redux基础用法 Redux 是一个用于 JavaScript 应用的状态管理库,它不依赖于任何 UI库,但常用于与 React 框架配合使用。它提供了一种集中式的状态管理方式,将应用的所有状态保存在一个单一的全局 Store(存储)中&…

VMware虚拟机Debian扩展磁盘

一、 版本 VMware:Workstation 17 Pro虚拟机:Debian11 二、 VMware虚拟机扩展 虚拟机关机状态快照或者备份:以免扩容失败导致文件丢失虚拟机——设置——硬盘——磁盘使用工具——扩展——扩展磁盘容量——设置为想要的大小 三、 虚拟机…

软件设计师-上午题-16 算法(4-5分)

算法题号一般为62-65题(数据结构与算法题号为57-65,共9分),分值一般为4-5分。 目录 1 回溯法 1.1 N皇后问题 1.2 非递归求解N皇后问题 1.3 递归求解N皇后问题 1.4 真题 2 分治法 2.1 最大字段和问题 2.2 真题 3 动态规划 3.1 0-1背包问题 3.…

【react如何在chrome浏览器里面调试?】

react如何在chrome浏览器里面调试? 1. 首先在在工作区关联源码 2. 安装react的chrome插件。 3. 切换到插件的标签,然后选中你要调试的页面元素,再点击右边的按钮,切换到对应的源码 4. 可以在源码任意位置打断点运行。

【Mysql NDB Cluster 集群(CentOS 7)安装笔记一】

Mysql NDB Cluster 集群(CentOS 7)安装笔记 NDB集群核心概念 NDBCLUSTER(也称为NDB)是一个内存存储引擎,提供高可用性和数据保存功能。 NDBCLUSTER存储引擎可以配置一系列故障转移和负载平衡选项,但从集群级别的存储引擎开始是最容易的。NDB集群的NDB存储引擎包含一整套…