DKCutter
guide
guide

Create a DKCutter From Scratch

We'll create a simple DKCutter named dkcutter-website-simple for generating basic websites. This is a great way to get started with DKCutter if you're new to creating websites. Or you can use --init option to create a base DKCutter template project.

Let's get started!

Step 1: Create a directory for your DKCutter

Open your terminal and navigate to your desired directory. Then, run the following command to create a new directory for your DKCutter and cd into it:

mkdir dkcutter-website-simple
cd dkcutter-website-simple/

Step 2: Create thedkcutter.json file

The dkcutter.json file contains configuration options that DKCutter uses to generate your project. Create a new file named dkcutter.json and paste the following content into it, replacing the placeholder text with your desired project name:

dkcutter.json
{
  "$schema": "https://dkcutter.ncontiero.com/schema.json",
  "projectName": "My Simple Website",
  "projectSlug": "{{ projectName|lower|replace(' ', '-')|trim }}"
}

Explanation ofdkcutter.json properties:

  • "$schema": This property specifies the location of the DKCutter schema file that defines the valid configuration options.
  • "projectName": This property defines the name of your website project.
  • "projectSlug": This property defines the name of the directory that will be created for your website. It uses a template that converts the project name to lowercase, replaces spaces with hyphens, and removes any leading or trailing whitespace.

Step 3: Create the template directory

Create a new directory named template/{{dkcutter.projectSlug}} inside your DKCutter project directory. This directory will hold the template files that will be used to generate your website.

Step 4: Create the index.html file

Inside the template/{{dkcutter.projectSlug}} directory, create a new file named index.html and paste the following basic HTML code into it:

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>{{ dkcutter.projectName }}</title>
  </head>
  <body>
    <h1>{{ dkcutter.projectName }}</h1>
  </body>
</html>

This code defines a simple HTML page with a title that matches your project name.

Step 5: Run DKCutter

Navigate back to your terminal and run the following command to generate your website project:

npm
yarn
pnpm
bun
npx dkcutter@latest .

The . at the end of the command specifies the current directory where your DKCutter project resides.

You can expect similar output:

npx dkcutter@latest .
✔ Project name? … Test web
✔ Project slug? … test-web
✔ Project created!

Resulting directory should be inside your work directory with a name that matches projectSlug you defined. Inside that directory there should be index.html with generated source:

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test web</title>
  </head>
  <body>
    <h1>Test web</h1>
  </body>
</html>
ON THIS PAGE