# Quick Start
## Make Taskly Yours In 30 Minutes
**Skill level:** Beginner · **Time:** 30 minutes · **You need:** the site running with `npm run dev` ([Installation](/taskly/getting-started/installation/))
This page walks through the ten changes almost every site needs, in order. Each step names one file and the exact lines to edit. Save the file and the browser shows the change.
1. **Name your site and set its address**
Open `src/config/config.toml` and edit the `[site]` block:
```toml
[site]
title = "Acme Tasks"
description = "Plan projects and ship work together in one calm workspace."
tagline = "Task management for remote teams"
baseUrl = "https://www.acme.com"
```
`baseUrl` is your live address. The theme ships with the placeholder `https://example.com`, and `npm run build` prints a `[site]` warning until you change it. Canonical URLs, the sitemap, `robots.txt`, RSS feeds, `llms.txt`, and social previews all use it, so set it before you launch. While you are in the file, set `author` and `keywords` under `[seo]` too.
2. **Decide on languages**
Taskly ships every page in English and French. If you only need English, set `enable = false` under `[settings.multilingual]` in the same file. The French files stay on disk but are no longer built. Restart `npm run dev` after this change. See [Internationalization](/taskly/customization/internationalization/) to add or remove languages for good.
3. **Add your logo**
With no logo image, Taskly draws its built-in check mark next to `logoText`. To use your own file, put it in `src/assets/images/` and point `logo` at it:
```toml
[site]
logo = "/images/my-logo.svg"
logoText = "Acme Tasks" # set to "" if your logo already contains the name
logoWidth = "32px"
logoHeight = "32px"
```
The footer of inner pages is dark: if your logo is dark too, add a light version and set it as `logoDark`. Then set `[site.favicon] image` to a square version of your logo and run `npm run generate-favicons`. Details: [Site Identity & Logo](/taskly/customization/site-identity-logo/).
4. **Set your brand color**
Open `src/styles/theme.css` and change the brand colors in the `:root` block: `--theme-primary` (lilac: links, focus rings, the featured plan, the logo tile) with its light tint `--theme-primary-soft`, and `--theme-sun` (the main `fill` button):
```css
:root {
--theme-primary: #9886fe; /* lilac: links, focus rings, featured plan, logo tile */
--theme-primary-soft: #efebff; /* light tint behind icons and badges */
--theme-sun: #ffd86f; /* sun: the "fill" button, with dark text */
--theme-accent: #ffd86f; /* keep equal to --theme-sun */
}
```
The `fill` button is dark text on `--theme-sun`, so keep that color light. White text sits on `--theme-primary`, so check that it reads. Details: [Colors & Fonts](/taskly/customization/colors-fonts/).
5. **Write your homepage hero**
Open `src/content/sections/english/hero-section.md` and change `title`, `description`, and the two buttons (`button`, `secondaryButton`). Wrap one or two words of the title in asterisks (`*remote team’s*`) to set them in the italic serif pill. Do the same in `src/content/sections/french/hero-section.md` if you kept French. The sample rating in `badge` is made up: replace it with your own or delete the block.
6. **Point the header buttons and menus at your pages**
The header button and the text link before it are in `config.toml`:
```toml
[settings.navigationButton]
enable = true
label = "" # empty uses "Get started" from src/i18n/en.json
url = "/signup/"
[settings.navigationSecondaryLink]
enable = true
label = "" # empty uses "Log in" from src/i18n/en.json
url = "/login/"
```
The menu links are in `src/config/menu.en.json` (and `menu.fr.json`). Set `"enable": false` on anything you don't need. The **Home** and **Pages** menus exist to show off the demo, so most sites turn them off. Details: [Menus](/taskly/customization/menus/).
7. **Connect the forms**
The contact form, the demo request form, and the newsletter forms post to placeholder addresses until you change them in `config.toml`:
```toml
[settings]
contactFormAction = "https://formsubmit.co/you@yourdomain.com"
contactFormProvider = "formsubmit.co" # formsubmit.co | formspree | netlify
[settings.subscription]
formAction = "https://your-account.us1.list-manage.com/subscribe/post?u=...&id=..."
```
Until you do, `npm run dev` shows a warning inside each form. Details: [Forms](/taskly/customization/forms/).
8. **Change the announcement bar and the footer text**
The dark strip above the header is `src/content/widgets/english/announcement-bar.md`: change `text` and `link`, or turn it off with `[settings.announcementBar] enable = false` in `config.toml`. The footer description and copyright line are in `src/i18n/en.json` under `footer` (and `fr.json`). In `copyright`, `{year}` becomes the year of the build and `{brand}` your `site.title`. Social links are in `src/config/social.json`.
9. **Pick your section layouts (optional)**
9 sections have more than one layout. Open [http://localhost:4321/elements/](http://localhost:4321/elements/) to compare them all, then set the one you like with `layout` in the section file (every page) or in a page block (one page). Details: [Section Layouts](/taskly/customization/section-layouts/).
10. **Check and build**
Stop the dev server, then run:
```bash
npm run astro-check
npm run build
```
Fix anything either command reports. If the build prints a yellow `[site]` warning, `baseUrl` is still the placeholder (step 1). Then follow the [Deployment](/taskly/deployment/) guide.
### What Next?
- Replace the demo content page by page: [Pages](/taskly/customization/pages/) lists every page and its file.
- Replace the sample product data in the dashboard mockup: `src/content/widgets/english/dashboard-mockup.md`.
- Try other looks for your sections: [Section Layouts](/taskly/customization/section-layouts/).
- Let an AI assistant do the repetitive work: [Prompt Library](/taskly/ai-customization/prompt-library/).