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

大家好,今天给大家分享一个由 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.mzph.cn/diannao/59382.shtml

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

相关文章

如何才能实时监测Mac的运行状态

实时监测Mac的运行状态,能够让我们更好的了解Mac的情况,因此如何才能监测Mac的运行状态很重要 State,实时监测你的Mac运行状态,能够直观的展示当前Mac的CPU、内存、硬盘、温度、风扇、网络信息以及开机时间等重要信息 除此之外&a…

python之正则表达式总结

正则表达式 对于正则表达式的学习,我整理了网上的一些资料,希望可以帮助到各位!!! 我们可以使用正则表达式来定义字符串的匹配模式,即如何检查一个字符串是否有跟某种模式匹配的部分或者从一个字符串中将与…

练习LabVIEW第三十八题

学习目标: 刚学了LabVIEW,在网上找了些题,练习一下LabVIEW,有不对不好不足的地方欢迎指正! 第三十八题: 创建一个VI,实现对按钮状态的指示和按钮“按下”持续时间简单计算功能,按…

众测遇到的一些案列漏洞

文章中涉及的敏感信息均已做打码处理,文章仅做经验分享用途,切勿当真,未授权的攻击属于非法行为!文章中敏感信息均已做多层打码处理。传播、利用本文章所提供的信息而造成的任何直接或者间接的后果及损失,均由使用者本人负责,作者不为此承担任何责任,一旦造成后果请自行…

C#:强大而优雅的编程语言

在当今的软件开发领域,C#作为一种广泛应用的编程语言,以其强大的功能、优雅的语法和丰富的生态系统,受到了众多开发者的喜爱。本文将深入探讨 C#的各个方面,展示它的魅力和优势。 一、C#的历史与发展 C#是由微软公司开发的一种面…

【OJ题解】在字符串中查找第一个不重复字符的索引

💵个人主页: 起名字真南 💵个人专栏:【数据结构初阶】 【C语言】 【C】 【OJ题解】 目录 1. 引言2. 题目分析示例: 3. 解题思路思路一:双重循环思路二:哈希表 4. C代码实现5. 代码详解6. 时间和空间复杂度分析7. 优化方…

el-date-picker日期选择器动态设置日期

需求&#xff1a;选择开始时间&#xff0c;或者在开始时间已存在的情况下&#xff1b;结束时间下拉日期选择框展示从开始日期展示&#xff1b;而不是当前日期&#xff0c;并且结束时间下拉框日期要禁用开始时间之前的日期。 <el-form-item label"开始时间" prop&q…

「C/C++」C/C++的区别

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「C/C」C/C程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasoli…

Redis-基本了解

一、Redis 初识 Redis 是⼀种基于键值对&#xff08;key-value&#xff09;的NoSQL数据库&#xff0c;与很多键值对数据库不同的是&#xff0c;Redis 中的值可以是由string&#xff08;字符串&#xff09;、hash&#xff08;哈希&#xff09;、list&#xff08;列表&#xff09…

大模型面试题持续更新_Moe(2024-10-30)

获取更多面试真题的集合&#xff0c;请移步至 https://i.afbcs.cn/naPbNYhttps://pica.zhimg.com/80/v2-7fd6e77f69aa02c34ca8c334870b3bcd_720w.webp?sourced16d100b Moe和集成学习方法有什么异同&#xff1f; MoE和集成学习的思想异曲同工&#xff0c;都是集成了多个模型的…

配置深度学习环境

先前已经配置好了 1在新建一个项目时 2.打开文件&#xff0c;找到设置 3.点开设置 如图1.2.3所示

PHP不良事件上报系统源码,医院安全不良事件管理系统,基于 vue2+element+ laravel框架开发

不良事件上报系统通过 “事前的人员知识培训管理和制度落地促进”、“事中的事件上报和跟进处理”、 以及 “事后的原因分析和工作持续优化”&#xff0c;结合预存上百套已正在使用的模板&#xff0c;帮助医院从对护理事件、药品事件、医疗器械事件、医院感染事件、输血事件、意…

Rust 力扣 - 2461. 长度为 K 子数组中的最大和

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们遍历长度为k的窗口&#xff0c;用一个哈希表记录窗口内的所有元素&#xff08;用来对窗口内元素去重&#xff09;&#xff0c;我们取哈希表中元素数量等于k的窗口总和的最大值 题解代码 use std::collecti…

yolov8涨点系列之C2f模块改进主分支

文章目录 C2F 模块介绍定义与基本原理应用场景 C2f模块修改步骤(1) C2f_up模块编辑(2)在__init_.pyblock.py中声明&#xff08;3&#xff09;在task.py中声明yolov8引入C2f_up模块yolov8.yamlyolov8.yaml引入C2f_up模块 C2f改进对YOLOv8检测具有多方面的好处 C2F 模块介绍 定义…

数字IC后端实现Innovus 时钟树综合(Clock Tree Synthesis)典型案例

对于如下所示电路&#xff0c;要求以下几路做到等长&#xff0c;clock skew控制在50ps以内&#xff0c;clock tree insertion delay做到800ps! from FF/Q to FF1_1/D through the FF1 CK from FF/Q to FF2_1/D through the FF2 CK from FF/Q to FF3_1/D through the FF3 CK fr…

STM32F030中断言的使用分享

前言 最近在写一个程序中&#xff0c;想对存到FLASH中的结构体分配的大小做控制&#xff0c;希望分配的大小偶数字节大小。&#xff08;因为读时是按16位读&#xff0c;如果奇数就可能读超了&#xff09;如果结构体大小为奇数&#xff0c;就跳到断言处。 分析 STM32F030的标…

Flutter使用share_plus是提示发现了重复的类

问题描述 我现在下载了share_plus包后发现代码编译不通过&#xff0c;并提示Duplicate class kotlin.collections.jdk8.CollectionsJDK8Kt found in modules jetified-kotlin-stdlib-1.8.22 (org.jetbrains.kotlin:kotlin-stdlib:1.8.22) and jetified-kotlin-stdlib-jdk8-1.7…

基于STM32的远距离遥控自动避障小车设计

引言 本项目基于STM32微控制器设计一个远距离遥控自动避障小车系统。该系统通过蓝牙或Wi-Fi模块实现远程控制&#xff0c;同时结合超声波传感器和红外传感器&#xff0c;实现自主避障功能。小车支持多种操作模式&#xff0c;包括手动遥控、自动避障和路径跟踪&#xff0c;适用…

gitee 使用 webhoot 触发 Jenkins 自动构建

一、插件下载和配置 Manage Jenkins>Plugin Manager 搜索 gitee 进行安装 插件配置 1、前往Jenkins -> Manage Jenkins -> System -> Gitee Configuration -> Gitee connections 2、在 Connection name 中输入 Gitee 或者你想要的名字 3、Gitee host URL 中…

springboot yml文件数据源出现警告/报黄/数据库配置警告问题

1、看一下数据源的依赖是不是都引入完整了 2、看一下数据源是否有拼写错误 上图就是数据源拼写错误