一个由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.rhkb.cn/news/464410.html

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

相关文章

已解决,部署GPTSoVITS报错‘AsyncRequest‘ object has no attribute ‘_json_response_data‘

部署GPTSoVITS过程中,开启一键三连进程发生,报错AsyncRequest object has no attribute _json_response_data 具体报错内容为 (GPTSoVITS) PS D:\Code\GPT-SoVITS-beta0706> python webui.py Running on local URL: http://0.0.0.0:9874 IMPORTANT:…

Chrome 130 版本开发者工具(DevTools)更新内容

Chrome 130 版本开发者工具(DevTools)更新内容 一、网络(Network)面板更新 1. 重新定义网络过滤器 网络面板获新增了一些过滤条件,这些过滤条件是根据反馈重新设计的,特定于类型的过滤条件保持不变&…

Java之包,抽象类,接口

目录 包 导入包 静态导入 将类放入包 常见的系统包 抽象类 语法规则 注意事项: 抽象类的作用 接口 实现多个接口 接口间的继承 接口使用实例 (法一)实现Comparable接口的compareTo()方法 (法二)实现Comp…

【linux】HTTPS 协议原理

1. 了解 HTTPS 协议原理 (一)认识 HTTPS HTTPS 也是一种应用层协议,是在 HTTP 协议的基础上引入了一个加密层 因为 HTTP协议的内容都是按照文本的方式进行传输的,这个过程中,可能会出现一些篡改的情况 (…

sql server 文件备份恢复

备份情况 在备份 lys_log_1324.bak 日志文件前,删除table_1表 现在恢复文件 恢复文件(使用norecovery) RESTORE DATABASE [lys] FILE Nlys, FILE Nlys_02 FROM DISK ND:\liyuanshuai\lys_filegroup.bak WITH FILE 1, NORECOVERY, …

Docker-安装

操作系统:Ubuntu 20.04.6 LTS 更新apt sudo apt update 删除旧版本docker sudo apt-get remove docker docker-engine docker.io 安装docker sudo apt install docker.io 查看docker版本 docker --version 启动docker 启动docker sudo systemctl start docker 启用…

CM API方式设置YARN队列资源

简述 对于CDH版本我们可以参考Fayson的文章,本次是CDP7.1.7 CM7.4.4 ,下面只演示一个设置队列容量百分比的示例,其他请参考cloudera官网。 获取cookies文件 生成cookies.txt文件 curl -i -k -v -c cookies.txt -u admin:admin http://192.168.242.100:7180/api/v44/clusters …

Openlayers高级交互(18/20):根据feature,将图形适配到最可视化窗口

本示例的目的是介绍如何在vue+openlayers中使用extent,使用feature fit的方式来适配窗口。当加载到页面上几个图形要充分展示在窗口的时候,可以用这种方式来平铺到页面中。 效果图 专栏名称内容介绍Openlayers基础实战 (72篇)专栏提供73篇文章,为小白群体提供基础知识及示…

鸿蒙HarmonyOS开发:给应用添加基础类型通知和进度条类型通知(API 12)

文章目录 一、通知介绍1、通知表现形式2、通知结构3、请求通知授权 二、创建通知1、发布基础类型通知2、发布进度类型通知3、更新通知4、移除通知 三、设置通知通道1、通知通道类型 四、创建通知组五、为通知添加行为意图1、导入模块。2、创建WantAgentInfo信息。4、创建WantAg…

Armv8的安全启动

目录 1. Trust Firmware 2. TF-A启动流程 3. TF-M启动流程 3.1 BL1 3.2 BL2 4.小结 在之前汽车信息安全 -- 再谈车规MCU的安全启动文章里,我们详细描述了TC3xx 、RH850、NXPS32K3的安全启动流程,而在车控类ECU中,我们也基本按照这个流程…

CAN总线学习笔记(1、CAN总线定义)

CAN总线学习笔记(1、CAN总线定义) 江协科技CAN总线入门教程视频学习笔记 CAN特性 两根通信线(CAN_H\CAN_L),两根线,无需工地 差分信号,抗干扰能力强 高速CAN(ISO11898)&#xff…

【算法】【优选算法】双指针(下)

目录 一、611.有效三⻆形的个数1.1 左右指针解法1.2 暴力解法 二、LCR 179.查找总价格为目标值的两个商品2.1 左右指针解法2.2 暴力解法 三、15.三数之和3.1 左右指针解法3.2 暴力解法 四、18.四数之和4.1 左右指针解法4.2 暴力解法 一、611.有效三⻆形的个数 题目链接&#x…

Docker 镜像体积优化实践:从基础镜像重建到层压缩的全流程指南

​ 由于最近在发布的时候发现docker镜像体积变得越来越大,导致整个打包发布流程变得非常耗时了。所以又接到一个差事,优化最终镜像体积。顺便也记录一下docker镜像体积优化的一些步骤。 大概步骤可以分为以下几个步骤: 重做基础镜像&#x…

路径规划 | ROS中多个路径规划算法可视化与性能对比分析

目录 0 专栏介绍1 引言2 禁用局部规划器3 路径规划定性对比实验3.1 加载路径规划器和可视化插件3.2 设置起点和终点3.3 选择规划器规划3.4 不同规划器对比3.5 路径保存和加载 4 路径规划定量对比实验4.1 计算规划耗时4.2 计算规划长度4.3 计算拓展节点数4.4 计算路径曲率4.5 计…

十四届蓝桥杯STEMA考试Python真题试卷第二套第五题

来源:十四届蓝桥杯STEMA考试Python真题试卷第二套编程第五题 本题属于迷宫类问题,适合用DFS算法解决,解析中给出了Python中 map() 和列表推导式的应用技巧。最后介绍了DFS算法的两种常见实现方式——递归实现、栈实现,应用场景——迷宫类问题、图的连通性、树的遍历、拓朴排…

【CSS】——基础入门常见操作

阿华代码,不是逆风,就是我疯 你们的点赞收藏是我前进最大的动力!! 希望本文内容能够帮助到你!! 目录 一:CSS引入 二:CSS对元素进行美化 1:style修饰 2:选…

RV1126-SDK学习之OSD实现原理

RV1126-SDK学习之OSD实现原理 前言 本文简单记录一下我在学习RV1126的SDK当中OSD绘制的原理的过程。 在学习OSD的过程当中,可能需要补充的基础知识: OSD是什么? BMP图像文件格式大致组成? 图像调色(Palette&#…

Vehicle OS软件平台解决方案

在智能汽车快速迭代的趋势之下,广义操作系统Vehicle OS应运而生,针对应用软件开发周期缩短和底层硬件迭代速度加快的背景,Vehicle OS将应用软件开发和底层硬件迭代解耦。它降低了迭代工作量并节约成本,用标准化的接口来助力软件定…

Chromium Mojo(IPC)进程通信演示 c++(1)

网上搜索关于mojo教程 多数都是理论 加上翻译谷歌mojo文档的,但是如何自定义两个进程使用mojo通信呢?看下面的完整例子介绍:(本人也是参考谷歌代码例子改编而成) 本文演示了client.exe和service.exe 通过mojo::Incomin…

sparkSQL面试题

一、查询所有数学课程成绩大于语文课程成绩的学生学号 数据 1,yuwen,43 1,shuxue,55 2,yuwen,77 2,shuxue,88 3,yuwen,98 3,shuxue,65 3,yingyu,88 基本步骤: 进行行转列比较语文与数学的成绩 SQL代码: with t1 as(SELECT id,sum(if(name yuwen,sc…