Create a project

The configuration module frugal.config.ts

Frugal tries to assume as little as possible about your project, so you have to configure it. First, let's write the minimal configuration needed :

frugal.config.ts
import { Config } from "https://deno.land/x/frugal@0.9.6/mod.ts"

export default {
    self: import.meta.url,
    pages: []
} satisfies Config;
1
2
3
4
5
6

The self property should be the absolute path of the configuration module (obtained with import.meta.url). The folder where the config module resides will be the root of your project (the dirname of self). Frugal will resolve every path relative to this root.

Warning

Unless you know what you are doing, self should always be import.meta.url.

The pages should list the paths of the page modules of your website. It is empty for now, but not for long.

Your first page

Create a file pages/home.ts with the following code :

pages/home.ts
export const route = '/'

export function render() {
    return `<!DOCTYPE html>
<html>
    <body>
        <h1>My blog</h1>
    </body>
</html>`
}
1
2
3
4
5
6
7
8
9
10

You just wrote your first static page with Frugal!

For now, we will not use any UI framework, so we output basic HTML with template strings in the render method. This method will be called at build time to generate the page's markup. The route contains the URL pattern of the generated page. Here the generated page will live at the root of the website.

Add the relative path to the newly created page in the configuration module :

frugal.config.ts
import { Config } from "https://deno.land/x/frugal@0.9.6/mod.ts"

export default {
    self: import.meta.url,
    pages: ['pages/home.ts']
} satisfies Config;
1
2
3
4
5
6

Now we need a script to run Frugal.

The dev script

Create a file dev.ts with the following code:

dev.ts
import { context } from "https://deno.land/x/frugal@0.9.6/mod.ts"
import config from "./frugal.config.ts"

await context(config).watch()
1
2
3
4

Simply calling the watch function on the context will set up a watch process and a dev server with live-reload.

You can now run this script to get a dev server with live reload :

deno run -A dev.ts
Visiting http://0.0.0.0:3000/ should display your page.


Info
The dev server has live-reload capacity. Changing the code of a page or any of its dependencies should trigger a page reload.


However, this is limited to staticaly analyzable imports (static imports or dynamic imports with paths known ahead of time). Any change in external data sources (database, API, filesystem ...) won't trigger a reload: you'll have to refresh the page manually


Now that we have a working project, we will start coding our blog in the next section.