Posts Projects
2 mins read

Getting Started

A comprehensive guide to getting started with the Litos Theme

#Tutorial
Getting Started

Welcome to Litos Theme! This comprehensive guide will walk you through setting up and launching your project with Litos, a modern blog theme built with Astro.js.

Prerequisitesh2

Before starting, ensure you have the following tools installed in your development environment:

  • Node.js - Required for running the development environment
  • pnpm - Our preferred package manager for dependency management
  • Git - For version control and project management
  • VS Code - Recommended code editor with excellent development experience
TIP

While VS Code is recommended, you can use any code editor of your choice that supports web development.

Project Setuph2

Creating Your Projecth3

You can start your Litos project by forking the repository:

  1. Visit the Litos Theme repository
  2. Click the “Fork” button to create your copy
  3. Clone your forked repository locally:
Terminal window
git clone https://github.com/[YOUR_USERNAME]/[YOUR_REPO_NAME].git
cd [YOUR_REPO_NAME]

Installing Dependenciesh3

Once you have cloned the repository, install the project dependencies:

Terminal window
# Install all required dependencies
pnpm install


# Start the development server
pnpm dev
NOTE

When you first start the project, you might see this React-related warning:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.

This warning is caused by the interaction between React plugin and MDX plugin. According to Astro’s official statement, this warning can be safely ignored.

Project Configurationh2

Before customizing your site, familiarize yourself with the project structure. There are three main configuration areas to focus on:

  1. Basic Site Configuration

  2. Code Block Styling

  3. Markdown Extensions

Content Creationh2

Litos supports both standard Markdown and enhanced syntax features:

For post configuration and metadata, refer to the Post Configuration guide.

TIP

Start by customizing the basic configuration to match your site’s branding and navigation structure before creating content.

Catalogue