# Installation

## Installation Guide

Follow these steps to set up and start using the theme.

### **Prerequisites**

Before you begin, ensure your system meets the following requirements.

<Aside type="tip">
  If you're on **macOS**, the easiest way to install dependencies is using
  [Homebrew](https://docs.brew.sh/Installation). Homebrew is a package manager
  that simplifies installing software. Follow [this
  guide](https://mac.install.guide/homebrew/index.html) to install Homebrew.
</Aside>

### Install Node.js

Node.js lets you run JavaScript code on your computer. The version you need depends on your edition:

| Edition | Node.js version                                                                        |
| ------- | -------------------------------------------------------------------------------------- |
| Astro   | 22.23.4 or later                                                                       |
| Tina    | 22 (22.23.4 or later) or 24. Tina's command line tool supports only those two versions |
| Sanity  | 22.23.4 or later                                                                       |

The theme uses Astro 7 and Tailwind CSS 4 tooling, so using the version declared in the `engines` field of `package.json` is the safest path.

<Tabs>
  <TabItem label="Windows">

    Follow these steps to install Node.js on Windows:

    1. Download the latest suitable **LTS/current version** of Node.js from the official website: [Node.js Downloads](https://nodejs.org/en/download/)
    2. Run the installer after it's downloaded, and follow the on-screen instructions.
    3. After installation, open the **Command Prompt** and verify the installation:

    ```bash
    node -v
    ```

    You should see a version number like `v22.23.4` or newer.

    <Aside type="tip">
      If you run into any issues, you can use **Chocolatey** to install Node.js:

      ```bash
      choco install nodejs-lts
      ```
    </Aside>

  </TabItem>

  <TabItem label="macOS">

    Here's how to install Node.js on macOS:

    1. Make sure [Homebrew](https://brew.sh/) is installed.
    2. Open **Terminal** and run:

    ```bash
    brew install node
    ```

    3. Verify the installation:

    ```bash
    node -v
    ```

    The terminal should display the installed version of Node.js.

    <Aside type="tip">
      You can also download the installer directly from [Node.js Downloads](https://nodejs.org/en/download/) if you prefer not to use Homebrew.
    </Aside>

  </TabItem>

  <TabItem label="Linux">

    To install Node.js on Linux, follow these steps:

    1. Open **Terminal** and update your package list:

    ```bash
    sudo apt update
    ```

    2. Install Node.js:

    ```bash
    sudo apt install nodejs npm
    ```

    3. Verify the installation:

    ```bash
    node -v
    ```

    If everything worked correctly, the installed version will be displayed.

    <Aside type="tip">
      For other Linux distributions, check the [official Node.js installation guide](https://nodejs.org/en/download/package-manager/) for the recommended package source.
    </Aside>

  </TabItem>
</Tabs>

Run `node -v` when you finish. If it shows a version older than 22.23.4, install a newer one from [Node.js Downloads](https://nodejs.org/en/download/). Some Linux package lists have an older version. In the Tina edition, the version must be 22 or 24, and the newest Node.js release can be above that.

💡 **Need help?** Check out the official [Node.js installation guide](https://nodejs.org/en/download).

---

### **Setting Up Techlo**

Once Node.js is installed, unzip the theme and open a terminal in its folder. These steps work in every [edition](../../features/editions/):

#### Install Dependencies

Navigate to your **project directory** and run:

```bash
npm ci
```

This will install the exact dependency versions from `package-lock.json`.

#### Start the Development Server

To start the local development server, run:

```bash
npm run dev
```

🔹 Your site will be available at **http://localhost:4321**.

`npm run dev` also turns `src/config/config.toml` into the settings file the theme reads, and watches it for changes, so you don't need to run anything else. To use another port on the Astro edition, run `npm run dev -- --port 4322`. The Tina edition uses a `PORT` variable, and the Sanity edition uses `SITE_PORT`.

#### Create a Production Build

To generate an optimized production build, run:

```bash
npm run build
```

This regenerates the config from TOML, runs the Astro build, and strips draft pages from the sitemap, placing the final output in the `dist/` folder.

#### Preview the Production Build

To preview the built site locally, run:

```bash
npm run preview
```

This builds the site, then serves `dist/` on your computer, so you can verify the production output before deployment.

Run `npm run astro-check` after you change code or content schemas.

#### Tina Edition

Keep `npm run dev` running and open **http://localhost:4321/admin/**. Click **Enter Edit Mode**. You need no account and no password. The first time, the editor can take a minute to load. See [Tina](../../features/tina/).

#### Sanity Edition

`npm run dev` runs the site straight away with the bundled sample content, and no account. `npm ci` downloads about 900 MB in this edition. To edit the content, connect your own Sanity project:

```bash
npm run setup
npm run dev:all
```

Then open the Studio at **http://localhost:3333** and log in with the same Sanity account. See [Sanity](../../features/sanity/).

---

🚀 **You're all set.** Next, review the project structure so you know where Techlo keeps its content, layouts, and configuration.