Deploying HAML and SCSS Projects on Vercel: Step-by-Step Guide

Hosting a HAML and SCSS project on Vercel involves a few steps, from setting up your project to deploying it to the Vercel platform. Below is a step-by-step guide:

Prerequisites:

Node.js and npm installed on your machine.
Vercel CLI installed (npm install -g vercel).
A Vercel account.

Step 1: Set Up Your Project

First, make sure that you have a project directory set up with HAML and SCSS files.

Example Directory Structure:

your-project/
├── src/
│   ├── index.haml
│   ├── style.scss
├── package.json
├── vercel.json

Step 2: Convert HAML and SCSS Files

Vercel does not natively support HAML or SCSS, so you need to compile them to HTML and CSS, respectively.

Create a build script in your package.json to compile HAML to HTML and SCSS to CSS:

package.json:

{
  "name": "your-project",
  "version": "1.0.0",
  "scripts": {
    "build": "haml src/index.haml dist/index.html && sass src/style.scss dist/style.css"
  },
  "dependencies": {
    "haml": "^5.3.2",
    "sass": "^1.35.1"
  }
}

Step 3: Create a Vercel Configuration File

Create a vercel.json file in your project directory to define the build and output settings.

vercel.json:

{
  "version": 2,
  "builds": [
    { "src": "src/index.haml", "use": "@now/static" },
    { "src": "src/style.scss", "use": "@now/static" }
  ],
  "routes": [
    { "src": "/index.html", "dest": "/dist/index.html" },
    { "src": "/style.css", "dest": "/dist/style.css" }
  ]
}

Step 4: Build Your Project

Run the build scripts to compile your HAML and SCSS files:

npm install
npm run build

This command will create a dist directory with your compiled HTML and CSS.

Step 5: Deploy to Vercel

Now, you are ready to deploy your project to Vercel.

Open the terminal.
Run the following command to log in to Vercel if you haven't already:
```
vercel login
```
Deploy your project by navigating to your project directory and running:
```
vercel
```

Conclusion

Once the deployment process completes, Vercel will provide you with a URL to access your deployed project. This URL will be in the output of the vercel command.

Remember to push your changes to your version control system (e.g., GitHub) if you are using continuous deployment with Vercel.