一个由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…

BERT的中文问答系统28

为了使GUI界面更加人性化,我们从以下几个方面进行改进: 美化界面:使用更现代的样式和布局,增加图标和颜色。 用户反馈:增加更多的提示信息和反馈,让用户知道当前的操作状态。 功能增强:增加一些…

python之正则表达式总结

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

练习LabVIEW第三十八题

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

众测遇到的一些案列漏洞

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

nacos快速启动

预备环境准备: 确保是64 bit OS(推荐Linux/Unix/Mac),安装64 bit JDK 1.8并下载&配置,安装Maven 3.2.x并下载&配置。 下载源码或者安装包: 从Github上下载源码方式: git clone https://…

CanMV-K230 案例1 DSP框架初版

CanMV-K230的DSP框架 DSP框架一般可以表示为ADC采集——DSP处理——DAC输出 首先,针对上面的框架应该不要限制想象能力: 1)ADC可以是采集电压的ADC,也可以是采集声音、振动等; 2)DSP只是可以处理DSP功能的…

道可云人工智能元宇宙每日资讯|《河南省推动“人工智能+”行动计划》发布

道可云元宇宙每日简报(2024年10月30日)讯,今日元宇宙新鲜事有: 《河南省推动“人工智能”行动计划(2024—2026年)》发布 河南省政府办公厅近日印发了《河南省推动“人工智能”行动计划(2024—…

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

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

#渗透测试#SRC漏洞挖掘# 操作系统-windows系统bat病毒

免责声明 本教程仅为合法的教学目的而准备,严禁用于任何形式的违法犯罪活动及其他商业行为,在使用本教程前,您应确保该行为符合当地的法律法规,继续阅读即表示您需自行承担所有操作的后果,如有异议,请立即停…

【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;都是集成了多个模型的…

centos插U盘在什么路径访问

在CentOS系统中&#xff0c;插入U盘后&#xff0c;通常需要挂载U盘才能访问其中的文件。以下是挂载U盘并访问的步骤&#xff1a; 查看U盘设备&#xff1a; 使用fdisk -l命令查看U盘的设备名称&#xff0c;例如/dev/sdb1。 创建挂载点&#xff1a; 在/mnt目录下创建一个用于挂载…

Android Studio:connect time out

参考&#xff1a;Android Studio&#xff1a;connect time out_android studio connection timed out-CSDN博客

配置深度学习环境

先前已经配置好了 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…