Docuna - Astro Starlight Docs Template - Documentation and Landing
Astro Starlight documentation template with landing page, search, sidebar nav, dark mode. Fast, SEO ready, MDX, own 100% source, one-time.

Docuna Astro Starlight project

A project present by creativitas

Hire developer : https://www.fiverr.com/users/creativitas

---

How to install docuna starlight astro js themes template

Download Node JS

For first you need to download and install node js , so you can download node js

Download and install node js on your local devices.

Download Docuna Project

Next you can download docuna source code project, you can download docuna here

Extract Docuna Project

After you have download and install node js , and download docuna source code project, next you can create new folder on desktop, name it your new folder with docuna , and extract docuna source code project in to your project folder / docuna folder.

Install Docuna Project

Ok, now you can access docuna project on your desktop with terminal, so open terminal, and run command cd/C:\Users\pcname\Desktop\docuna.

Need to change pcname with your pc name , now you can install docuna project by run this command npm install

Run Docuna Project

Ok, now we can run docuna project on your local devices, so run this command npm run dev , open localhost:4321

Congratulations, you have run docuna project on your local devices.

---

Configuration

First you need to set up and configure your documentation site, make sure you have a list of content about your documentation project.

And then you can configure your sidebar site in astro.config.mjs

Open astro.config.mjs with code editor

Add your domain

Insert your domain

title: 'Your doc title here....',

Configure sidebar

Configure sidebar doc page

label: 'Your categories doc here...',

Documentation content

Configure your documentation content

items: [
{ label: 'Your content doc title...', link: 'URL Link for your documentation content article..' },

Auto Generate

Use auto generate content from documentation folder

{
label: 'Your Categories doc here...',
autogenerate: { directory: 'your folder doc here...' },
},

Example Code

Complete code look like this

export default defineConfig({
  site: 'your website domain here..',
  integrations: [
    starlight({
      title: 'Your doc title here....',
      social: {
        github: 'your github repo url here..',
      },
      sidebar: [
        {
          label: 'Your categories doc here...',
          items: [
            { label: 'Your content doc title...', link: 'URL Link for your documentation content article..' },
          ],
        },
        {
          label: 'Your Categories doc here...',
          autogenerate: { directory: 'your folder doc here...' },
        },
        {
          label: 'Project',
          autogenerate: { directory: 'project' },
        },
      ],
    }),
  ],
});

Implementation Code

example implementation code

export default defineConfig({
  site: 'https://astrodoc.pages.dev',
  integrations: [
    starlight({
      title: 'Docuna',
      social: {
        github: 'https://www.fiverr.com/creativitas',
      },
      sidebar: [
        {
          label: 'Getting Started',
          items: [
            { label: 'Welcome', link: '/getting-started/welcome/' },
            { label: 'Download', link: '/getting-started/download/' },
            { label: 'Installation', link: '/getting-started/installation/' },
            { label: 'Structure', link: '/getting-started/structure/' },
            { label: 'Configuration', link: '/getting-started/configuration/' },
            { label: 'Design UI', link: '/getting-started/design/' },
            { label: 'Content Doc', link: '/getting-started/content/' },
            { label: 'Static Page', link: '/getting-started/static-page/' },
            { label: 'Hosting Deploy', link: '/getting-started/hosting-deploy/' },
            { label: 'Headless CMS', link: '/getting-started/headlesscms/' },
          ],
        },
        {
          label: 'Source Code',
          autogenerate: { directory: 'sourcecode' },
        },
        {
          label: 'Project',
          autogenerate: { directory: 'project' },
        },
      ],
    }),
  ],
});

---

How to update landing page starlight astro js project

For update design landing page UI, and configure your navbar or footer , you can access on src/data/

Navbar Link

For update navbar menu link and footer area, you can access on src/data/config/config.json

Home Landing Page

For update home landing page design ,you can access on src/data/home/home.json

You can update the landing page design in this area, just edit it according to your needs with json code.

For change icon you can see starlight component https://starlight.astro.build/guides/components/#icon

---

How to write documentation content article

Folder Location

For write content documentation, you can access on src/content/docs

Categories Group

Now you can create category folders to group your documentation content articles.

for example the getstart folder for how to work with your project.

Content Article

Next, you can create a content article, by creating a new .md markdown file, in the getstart folder.

Example Content

Example we create installation.md for create installation documentation content , next you can add this frontmatter,

---
title: Your title in here...
description: Description in here....
---
Write content with markdown concept here....

---

How to create static page documentation starlight docuna

Folder Location

For create a new static page you can access on src/content/docs

Create New Page

And create your new static page with mdx format, for example about.mdx for create your about page.

Frontmatter

Next you can insert this frontmatter in to your about.mdx or your new static page.

---
title: "Insert title here...."
description: "Insert description here...."
image: "Insert URL image cover here..."
template: splash
---

---

Hosting Deploy

For deploy your documentation website project, for first you need push your documentation website project in to github repo, just create github account and create new repo, then push your project in to your repo.

Next you can register on cloud modern hosting like netlify, vercel, cloudflare and others.

---

Headless CMS

Decap CMS

You can use decap cms by netlify app for integration your project with decap cms, and you can also deploy your website on netlify.

Tina CMS

Tina is the best choice if you want integration your documentation website project, for dev mode or localdevices.

Cloudcannon

You can also integration your website project with cloudcannon headless cms if you want to work with cms.