13个版本 (4个稳定版)

2.3.0 2023年11月29日
1.0.0 2023年11月24日
0.9.0 2023年11月24日

#602 in 模板引擎

MIT/Apache

695KB
1.5K SLoC

Rust 1.5K SLoC // 0.0% comments JavaScript 313 SLoC

Mextron

crates.io Crates.io Build & test Publish to Pages
Art by Crayon

一个在Rust中实现的极快静态网站生成器

🚧 此项目目前正在开发中。请预期有破坏性的变化。🚧 🚧 此项目目前对POSIX友好。对于Windows机器,请使用 WSL🚧

一个由Rust编写的简洁而极简的静态网站生成器。考虑到简洁性,Mextron使网站创建变得轻松。它支持Markdown文件,让您可以轻松地编写内容。

演示

这是一个实时演示,我的博客就是使用Mextron构建的。

安装

您可以使用Cargo安装Mextron

cargo install mextron

创建新项目

您可以使用new命令初始化新项目。

mextron new <folder>

您还可以使用功能标志-t指定主题。

mextron new <folder> -t pico

以开发模式运行Mextron

您可以通过使用dev模式运行mextron以开发模式。开发模式中还有一个-w,即watch功能标志,用于使用热重载。

mextron dev -w # If you are in the Project Directory 
# OR
mextron dev <INPUT_DIRECTORY> -w # If you wanna specify which folder to run

以构建模式运行Mextron

您可以使用build模式运行mextron以构建模式。

mextron build # If you are in the Project Directory 
# OR
mextron build <INPUT_DIRECTORY> # If you wanna specify which folder to run

功能

  • Markdown支持
  • 自定义主题
  • 语法高亮
  • SEO
  • 自定义元数据透传

项目结构

Mextron期望以下文件夹结构

.
├── pages
│  ├── about
│  │  └── page.md
│  ├── blog
│  │  ├── page.md
│  │  └── why-learn-rust.md
│  └── page.md
├── public
│  ├── favicon.ico
│  ├── flamethrower.js
│  └── images
│     └── og.png
├── Settings.toml
└── theme
   ├── app.hbs
   ├── blog.hbs
   ├── global.css
   └── post.hbs

docs文件夹是项目的输入目录,在运行开发服务器或构建时始终指定。您可以像这样指定不同的输入目录

mextron dev <input-dir-path>
  • Settings.toml文件包含网站的设置,您可以通过更改此文件中的值来自定义网站。
  • public文件夹包含网站的所有静态资源,这些文件原封不动地复制到输出目录。
  • pages文件夹包含所有Markdown文件,这是您编写内容的地方。
  • 主题文件夹 theme 包含所有网站模板和样式。它使用 handlebars 语法编写。
  • 全局 CSS 文件 global.css 包含网站的全球 CSS,您可以在该文件中编写自己的 CSS。

构建自定义页面

一个很好的例子是一个博客索引页面,其中您显示一系列帖子并链接到它们。这可以通过访问传递给每个页面的网站目录来实现。可以通过根对象访问网站目录,这在每个页面中都可用,它表示整个网站结构,包括其元数据,因此我可以像这样渲染一个博客索引页面

一个自定义模板,例如 blog,列出 blog 文件夹下的所有页面。

<ul>
	{{#each root.blog}}
		{{#if (not (eq @key "_self"))}}
			<hgroup>
				<h4><a href="{{@key}}/">{{this.title}}</a></h4>
				<h2>{{this.author}}</h2>
			</hgroup>
		{{/if}}
	{{/each}}
</ul>

然后定义一个在博客文件夹下的新页面,并将模板指定为上面创建的 blog

--
template: blog
title: ~/Mextron/blog
--

### This is a blog index

Settings.toml 文件

Settings.toml文件包含网站的设置,您可以通过更改此文件中的值来自定义网站。

[dev]
port = 3000 # The port on which the dev server runs
ws_port = 3001 # The port on which the dev server websocket runs, for hot reloading

[site]
script_urls = [] # List of script urls to be included in the site
style_urls = [ # List of style urls to be included in the site
  'https://cdn.jsdelivr.net.cn/npm/@picocss/pico@1/css/pico.min.css',
  'https://cdn.jsdelivr.net.cn/npm/[email protected]/themes/prism-tomorrow.min.css',
]

[meta]
title = "~/Mextron" # The title of the website
description = "Blazing fast static site generator written in Rust" # The description of the website
og_image_url = "https://mextron.vercel.app/images/og.png" # The og image url of the website
base_url = "https://mextron.vercel.app" # The base url of the website, used for building sitemap

[navigation] # The navigation links of the website
links = [
  { label = "~/", url = "/" },
  { label = "GitHub", url = "https://github.com/AvaterClasher/mextron" },
  { label = "Website", url = "https://soumyadipmoni.netlify.app" },
  { label = "Blog", url = "/blog/" },
  { label = "About", url = "/about/" },
]

[data] # The data to be passed to every page, can be accessed using `data` object in every page
author = "Soumyadip Moni"
author_link = "https://github.com/AvaterClasher"

[remote_data] # The remote data to be fetched and passed to every page, can be accessed using `remote_data` object
repo_meta = "https://api.github.com/repos/AvaterClasher/mextron" # The url of the remote data

Handlebars 辅助函数

Mextron 提供了一些 handlebars 辅助函数,使您的生活更加轻松。该项目使用 handlebars-rust,因此它提供的所有辅助函数都可用。除此之外,Mextron 还提供了以下辅助函数

  • slice:截取数组并返回截取的数组。
  • sort-by:按键对对象数组进行排序。
  • format-date:使用给定的格式格式化日期。
  • stringify:将值转换为字符串,这对于调试很有用。

您可以在 演示项目 中找到这些辅助函数的示例。

部署

您可以使用构建命令构建网站

mextron build <input-dir-path>

构建输出保存到 _site 文件夹。因此,您可以通过将 _site 文件夹复制到您的 Web 服务器来部署网站。您还可以使用 GitHub Pages 来托管您的网站。以下是一个将您的网站部署到 GitHub Pages 的 GitHub 操作示例

# Simple workflow for deploying static content to GitHub Pages
name: Publish to Pages

on:
    # Runs on pushes targeting the default branch
    push:
        branches: ["main"]

    # Allows you to run this workflow manually from the Actions tab
    workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
    contents: read
    pages: write
    id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
    group: "pages"
    cancel-in-progress: false

jobs:
    # Single deploy job since we're just deploying
    deploy:
        environment:
            name: github-pages
            url: ${{ steps.deployment.outputs.page_url }}
        runs-on: ubuntu-latest
        steps:
            - name: Checkout
              uses: actions/checkout@v3
            - name: Setup Pages
              uses: actions/configure-pages@v3
            - name: Install
              run: cargo install mextron
            - name: Build
              run: mextron build src # Replace src with your input directory
            - name: Upload artifact
              uses: actions/upload-pages-artifact@v1
              with:
                  # Upload entire repository
                  path: "./_site"
            - name: Deploy to GitHub Pages
              id: deployment
              uses: actions/deploy-pages@v2

许可证

您可以在 此处 找到许可证。

依赖关系

~28–43MB
~752K SLoC