Skip to main content
This guide will help you set up GitFolio locally for development and contribution.

​
Prerequisites

Before you begin, ensure you have the following installed:
1

Node.js

Version 20 or higher is required.Check your version:
node --version
Download from nodejs.org if needed.
2

pnpm Package Manager

Version 10.4.1 or higher is required.Install pnpm globally:
npm install -g [email protected]
Verify installation:
pnpm --version
3

Git

Required for version control.Check if installed:
git --version

​
Initial Setup

1

Clone the Repository

Clone the GitFolio repository to your local machine:
git clone https://github.com/Skb3611/GitFolio.git
cd GitFolio
2

Install Dependencies

Install all project dependencies using pnpm:
pnpm install
This will install dependencies for all packages in the monorepo.
3

Set Up Environment Variables

Create a .env file in the root directory with necessary environment variables.
Contact the maintainers or check the project documentation for required environment variables.

​
Monorepo Structure

GitFolio uses a monorepo structure powered by Turborepo and pnpm workspaces: 
GitFolio/
├── apps/
│   ├── renderer/        # Main rendering application
│   └── playground/      # Development playground
├── packages/
│   ├── templates/       # Portfolio templates
│   ├── types/           # Shared TypeScript types
│   ├── eslint-config/   # ESLint configuration
│   └── typescript-config/ # TypeScript configuration
├── package.json         # Root package configuration
└── turbo.json          # Turborepo configuration

​
Development Commands

GitFolio uses Turborepo to manage tasks across the monorepo. Here are the key commands: 
# Start all dev servers
pnpm run dev

# Start specific package dev server
pnpm run dev --filter=renderer

​
Working with Templates

The templates package is where all portfolio templates live.

​
Templates Package Structure

packages/templates/
├── src/
│   ├── Templates/           # All portfolio templates
│   │   ├── Obsidian/        # Obsidian template
│   │   │   ├── components/  # Template-specific components
│   │   │   └── template.tsx # Main template file
│   │   └── index.ts         # Exports all templates
│   └── index.ts             # Package entry point
├── package.json             # Package dependencies
├── postcss.config.mjs       # PostCSS configuration
└── tsconfig.json            # TypeScript configuration

​
Building the Templates Package

1

Build Templates

pnpm run build --filter=renderer
2

Test in Playground

Start the development server to see your changes:
pnpm run dev --filter=renderer
The renderer will be available at http://localhost:3000

​
Turborepo Tasks

GitFolio uses Turborepo to efficiently run tasks across packages. Key tasks include:
Builds all packages with proper dependency ordering. Uses caching to speed up repeated builds.
"build": {
  "dependsOn": ["^build"],
  "outputs": [".next/**", "dist/**"],
  "cache": true
}
Starts development servers with hot reload. Runs persistently and doesn’t use cache.
"dev": {
  "dependsOn": ["^dev"],
  "cache": false,
  "persistent": true
}
Runs ESLint across all packages. Results are cached for efficiency.
"lint": {
  "outputs": [],
  "cache": true
}
Runs test suites. Coverage reports are generated in coverage/ directory.
"test": {
  "outputs": ["coverage/**"],
  "cache": false
}

​
Using Package Filters

Turborepo allows you to run commands for specific packages using the --filter flag: 
# Run dev server only for renderer
pnpm run dev --filter=renderer

# Build only templates package
pnpm run build --filter=@workspace/templates

# Lint specific app
pnpm run lint --filter=playground

​
Troubleshooting

If you encounter issues during pnpm install:
  1. Ensure you’re using pnpm version 10.4.1 or higher
  2. Clear pnpm cache: pnpm store prune
  3. Delete node_modules and pnpm-lock.yaml, then reinstall
  4. Make sure Node.js version is 20 or higher
If builds are failing:
  1. Check TypeScript errors: Look for type issues in your code
  2. Clear Turborepo cache: rm -rf .turbo
  3. Rebuild from scratch: pnpm run build
  4. Ensure all dependencies are installed
If the dev server won’t start:
  1. Check if port 3000 is already in use
  2. Verify environment variables are set correctly
  3. Check console for error messages
  4. Try running with verbose logging
If changes aren’t reflecting:
  1. Restart the dev server
  2. Clear browser cache
  3. Check if files are being watched (look for file watcher limits on Linux)
  4. Ensure you’re editing files in the correct package

​
Editor Setup

For the best development experience, we recommend using Visual Studio Code with the following extensions:
  • ESLint
  • Prettier
  • TypeScript and JavaScript Language Features
  • Tailwind CSS IntelliSense

​
Next Steps

Now that your development environment is set up:
  1. Review our Code Style Guide
  2. Read the Contributing Guidelines
  3. Start creating your first template!
If you run into any issues, check our FAQ or reach out for support.

Build docs developers (and LLMs) love

Get started for freeTalk to us