Quick Start

Make Taskly Yours In 30 Minutes

Skill level: Beginner · Time: 30 minutes · You need: the site running with npm run dev (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.

Name your site and set its address

Open src/config/config.toml and edit the [site] block:
```
[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.
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 to add or remove languages for good.
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:
```
[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.
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):
```
: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.
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.
Point the header buttons and menus at your pages

The header button and the text link before it are in config.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.

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:

[settings]
  contactFormAction   = "https://formsubmit.co/[email protected]"
  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.

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.
Pick your section layouts (optional)

9 sections have more than one layout. Open 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.
Check and build

Stop the dev server, then run:
Terminal window
```
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 guide.

What Next?

Replace the demo content page by page: 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.
Let an AI assistant do the repetitive work: Prompt Library.