mvc 网站建设,搜索关键词排名优化技术,wordpress项目wiki,綦江集团网站建设大家好#xff0c;今天给大家分享一个由 Deno React 驱动的静态网站生成器Pagic。 项目介绍
Pagic 是一个由 Deno React 驱动的静态网站生成器。它配置简单#xff0c;支持将 md/tsx 文件渲染成静态页面#xff0c;而且还有大量的官方或第三方主题和插件可供扩展。
核心…大家好今天给大家分享一个由 Deno React 驱动的静态网站生成器Pagic。 项目介绍
Pagic 是一个由 Deno React 驱动的静态网站生成器。它配置简单支持将 md/tsx 文件渲染成静态页面而且还有大量的官方或第三方主题和插件可供扩展。
核心特点
配置简单Pagic遵循约定优于配置的理念尽可能减少配置项通过符合直觉的设计降低用户理解成本。
支持多种文件渲染支持将mdMarkdown和tsxTypeScript 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 --namepagic https://deno.land/x/pagic/mod.ts
若需要安装指定版本的 Pagic则可以在安装的 URL 中加入版本号
deno install --unstable --allow-read --allow-write --allow-net --allow-env --allow-run --namepagic https://deno.land/x/pagicv1.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 --namepagic https://deno.land/x/pagic/mod.ts
通过 Docker 安装
执行以下命令可以通过 Docker 安装 Pagic
alias pagicdocker 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: docsTypeScript 入门教程 (GitHub)流浪小猫的博客 (GitHub)Deno X ranking (GitHub)Deno 钻研之术 (GitHub)Deno 中文手册 (GitHub)JavaScript 20 年 (GitHub)ECMAScript 面试宝典 (GitHub)Blitz.js React 全栈开发手册 (GitHub)自然醒的博客GitHubViktor’s DocsGitHub0xzhang 的博客GitHubAdd my site as a demo
项目地址
https://github.com/basecamp/omakub
一个由Deno和React驱动的静态网站生成器 - BTool博客 - 在线工具软件为开发者提供方便
