Download

Docus - Astro Starlight Docs Template - Documentation, Blog, Landing
Astro Starlight docs template with documentation, blog, landing page, search, sidebar, dark mode. MDX ready, SEO auto, fast, own 100% source, one-time.

astro • starlight • documentation-template • docs-template • blog-template • astro-template • documentation-website • landing-page • astro-docs • premiumthemes • jamstackthemes •

Astro Starlight docs template with documentation, blog, landing page, search, sidebar, dark mode. MDX ready, SEO auto, fast, own 100% source, one-time.

Docus - Astro Starlight Docs Template - Documentation, Blog, Landing

Docus Astro Starlight project.

A project present by creativitas

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

-----

Why Docus Exists

Most documentation sites force you to pick one thing: either a docs platform that can't blog, or a blog platform that can't handle docs. Then you end up maintaining two separate sites — two builds, two designs, two hosts, two things that can break.

Docus ends that. One Astro project. Documentation, blog, and landing page — all sharing the same design system, the same navigation, the same deployment pipeline.

Built on Astro + Starlight, it's fast, static, SEO-ready, and easy to maintain. You own 100% of the source code, one-time purchase, use on unlimited projects.

-----

What You Get

Documentation System

Starlight with auto-generated sidebar, full-text search, syntax highlighting, and multi-level navigation. Write in MDX or Markdown — both supported out of the box.

Blog System

Blog list with pagination, post detail pages, tags, categories, and RSS feed. Content stays in Markdown files. No database, no CMS required.

Landing Page

Hero section, feature cards, services, tech stack, and CTA — all JSON-driven. Edit text without touching a single component.

Pricing Page

Plan comparison layout with JSON-driven tiers. Ready for Gumroad, Fiverr, or any checkout you use.

Contact Form

Built-in form integration. Receive messages without a backend server.

SEO Ready

Meta tags, Open Graph, sitemap, and canonical URLs handled automatically. Just set your site URL in astro.config.mjs.

-----

Built for Speed and Ownership

Docus builds to static HTML. That means:

  • Loads instantly from any CDN
  • No server runtime, no database
  • Deploys free to Cloudflare Pages, Vercel, Netlify, Firebase, or any static host
  • Zero maintenance overhead

You own the source code. No monthly fees. No vendor lock-in. Use it on unlimited projects.

-----

Who This Is For

  • Product teams launching documentation for the first time
  • Developers building docs sites for clients
  • Open-source projects that need proper docs and a blog
  • SaaS companies tired of maintaining three separate sites
  • Agencies that want a professional starting point for documentation projects

If you need a documentation site that's actually fast, easy to update, and looks intentional — Docus is built for you.

-----

Live Demo

See the full template in action:

👉 Run Live Demo

Browse the documentation, test the blog, check the landing page. Everything is functional.

-----

Docus — built with Astro + Starlight. Documentation, blog, and landing in one project. JSON-driven, MDX ready, SEO optimized.

-----

Get Docus Now

One-time purchase. Use on unlimited projects. Full source code, complete documentation, and deployment guides included.

👉 Get Docus on Gumroad — $65

-----

How to

Installation

  • For first you can download astro docus project source code files. Download Now →
  • Next you can download node js and install on your local devices. Download Node →
  • Create a new project folder name it with astrodocu on your desktop or where you installed node js.
  • Extract source code files and copy all files in to your project folder , for example you have create astrodocu on your desktop.
  • Ok, after you have create new project folder next we need to can acces your project using terminal, so run this command C:\Users\pcname\Desktop\astrodocu change pcname with your pc name and change astrodocu with your project name.
  • Now we need to install source code project with terminal, run this command npm install
  • After you have install it , next we can test run this project run npm run dev
  • Open localhost:4321
  • -----

Astro Docus Folder Structure

You need to know about the folder structure to make it easier for you to customize your documentation site.

astro docu starlight

Astro Docus folder structure - we work on src folder.

public - this folder for your storage files example like image , icon and others.

src

  • assets for your documentation files, but we recommend you, to save your files into files in public/src/assets/
  • content - This area is for your documentation content within the doc folder
  • data - All your data files here, such as home pages, static pages, and configuration design UI.
  • design - For the layout theme of your website project.
  • pages - For static page and your blog content article
  • styles - Custom CSS for your astro starlight documentation project.
  • widget - This folder for widget design area, like navbar and others.

astro.config.mjs - For configuration your website, on this files you can customises the sidebar documentation menu navigation.

----

Configuration Astro Docus

You can configure your documentation site with the update configuration menu.

Open astro.config.mjs files with code editor, then update with your needed ,You can change the configuration and adapt it to the documentation articles you have created, if you have completed your project.

astro.config.mjs

export default defineConfig({
site: 'your website url in here',
integrations: [
starlight({
title: 'Your website title',
logo: {src: 'Image logo URL in here..',},
customCss: ['Your custom css in here..',],
social: { github: 'Your github repo here..', },
sidebar: [
{label: 'Title for your categories documentation article..',
items: [
{ label: 'Your doc article 1', link: 'Link url article 1 in here..' },
{ label: 'Your doc article 2 ', link: 'Link url article 2 in here..' },
],
},
{label: 'New categories title for documentation article..',
items: [
{ label: 'Your new doc here..', link: 'Link url in here...' },
{ label: 'New doc 2 grouping in here...',
items: [
{ label: 'New doc 2 title article 1', link: 'Link URL for new doc 1 ' },
{ label: 'New doc 2 title article 1', link: 'Link URL for new doc 2 ' },
],
},
],
});

Implementation

export default defineConfig({
site: 'https://astrodoc.pages.dev',
integrations: [
starlight({
title: 'Blacks',
logo: {src: './src/assets/astrologos.png',},
customCss: ['./src/styles/base.css',],
social: { github: 'https://github.com/mesinkasir', },
sidebar: [
{label: 'Get Start',
items: [
{ label: 'Start', link: '/getstart/' },
{ label: 'Installation', link: '/getstart/installation' },
{ label: 'Download', link: '/getstart/download' },
],
},
{label: 'Folder Structure',
items: [
{ label: 'Index', link: '/folder/' },
{ label: 'Content',
items: [
{ label: 'Services Folder', link: '/folder/content/services' },
{ label: 'Services file', link: '/folder/content/files' },
],
},
],
});

For best results, complete your entire doc article,static page then integrate this documentation sidebar menu with your documentation article,

This configuration output on sidebar left documentation page.

astro docus

----

Static Page

Static Page Astro Docus

In docus project, you can create a static page , for example about page or contact page. access on src/content/docs/ and you can see example static article page in here.

astro documentation themes template

For add static page you can create new .mdx or .md files, or for simply step, copy and paste from example article .mdx or .md files, rename with your static page url , update title and description and write your content.

Frontformatter

---
title: Order Astro JS Blacks
description: Buy and Order Astro JS Blacks themes template complete project.
template: splash
tableOfContents: false
prev: false
next: false
---
import Nav from '../../widget/index_page/Nav.astro';
import Header from '../../widget/plan/Header.astro';
import Footer from '../../widget/index_page/Footer.astro';
import Help from '../../widget/Help.astro';
import '../../styles/doc.css';
import '../../styles/default.css';

Implementation

---
title: Order Astro JS Blacks
description: Buy and Order Astro JS Blacks themes template complete project.
template: splash
tableOfContents: false
prev: false
next: false
---
import Nav from '../../widget/index_page/Nav.astro';
import Header from '../../widget/plan/Header.astro';
import Footer from '../../widget/index_page/Footer.astro';
import Help from '../../widget/Help.astro';
import '../../styles/doc.css';
import '../../styles/default.css';

Output Design UI

astro starlight themes template

----

Pricing Page

For pricing page you just need to update on src/data/pricing/pricing.json

JSON code

{
"resources": [
  {
   "title": "Your pricing plan name ",
   "text": "Information about your pricing plan here...",
   "price": "insert price in here...",
   "link": "URL Link for this order.."
  },
  {
   "title": "Standard",
   "text": "Standard Package set - astro js blacks themes template source code + Tina headless CMS for local dev mode.",
   "price": "$105",
   "link": "https://www.fiverr.com/creativitas/design-presentation-website-for-marketing-product"
  },
  {
   "title": "Premium",
   "text": "PRO Package set - astro js blacks themes template source code + Cloud netlify decap cms + Setup Configuration hosting .",
   "price": "$155",
   "link": "https://www.fiverr.com/creativitas/design-your-modern-website-using-jekyll"
  },
  {
   "title": "Custom",
   "text": "Custom Package set - astro js blacks themes template source code + Cloud netlify decap cms + Setup Configuration hosting +.",
   "price": "$155",
   "link": "https://www.fiverr.com/creativitas/design-your-modern-website-using-jekyll"
  }
]
}

Output Design UI

astro starlight themes template

----

Contact Page

Location src/content/docs/contact.mdx

In contact page is inlcude with contact form, for help you handle message from your customer , this concept is use airform server, so for first you can activation your email. Easy for use just sent message on your contact form, then click confirmation for activate this contact form.The contact page includes a contact form, to help you handle messages from your customers, this concept uses an airform server, so first you can activate your email. Easy to use, just send a message on your contact form, then click confirm from your email to activate this contact form.

frontmatter

---
title: "Contact Us"
description: "Need information ?? contact our team dev."
phone: "6285179858615"
email: "axcora@gmail.com"
address: "Bunerdo alegadro , 77 th  , Holywood - USA "
template: splash
tableOfContents: false
prev: false
next: false
---

output design UI

astro starlight themes template

----

Documentation Content Astro Docus

Now we can add documentation content, access on src/content/docs , create new folder for grouping your documentation, and name it with your doc categories .

Or you can see grouping categories doc example such cms, contact, folder, get start and others folder.

astro starlight themes template

Create a new folder and name it with your documentation category group, for example getstart - this is for the first documentation schema.

And later you will create content documentation with the following link yourweb.com/getstart/

astro starlight themes template

In the initial folder, we can now create new document content, to create a new article, you can simply copy and paste from the example article,

and update according to your needs. Or create a new file, and name it with the title of your document, then write the markdown content.

Frontformatter

---
title: Gallery
description: Update gallery astro js themes template blacks project.
---
### Title in here...
Write your content about your documentation here...

Implementation

---
title: Gallery
description: Update gallery astro js themes template blacks project.
---
## Gallery Page
Gallery Page Astro JS Blacks Theme.
This area for displaying your image and video gallery.
You can update gallery index page , with access on `src/pages/gallery/index.md`

Output Design UI

astro starlight themes template

Once you have completed all your initial group document articles, we can now create an index page to make it easier for your users to access your document articles.

Create index.mdx files on your group doc articles. and add this frontformatter.

---
title: Get Start
description: Get Started with blacks astro js themes template
tableOfContents: false
next: false
---
import Data from '../../../data/index_page/hosting.json';
import { Card, CardGrid } from '@astrojs/starlight/components';
## {frontmatter.description}

{ Data.resources.map(({ title,text,link }) => ( 
  
    {text} 
{title} info →
))}

Group Categories Doc Index Page

Next we need to access on src/data/index_page/and create file for your index page getstart.json

Next, you can customises the json files with your needs.

Json Code

{
    "resources": [
      {
       "title": "Vercel",
       "text": "Vercel Hosting",
       "link": "/hosting/vercel"
      },
      {
       "title": "Add your title article docs",
       "text": "Text information here...",
       "link": "URL for your articles..."
      },
      {
       "title": "Netlify",
       "text": "Netlify Hosting",
       "link": "/hosting/netlify"
      }
    ]
    }

And you can customises your get start index with your get start articles.

Implementation JSON code

{
    "resources": [
      {
       "title": "Vercel",
       "text": "Vercel Hosting",
       "link": "/hosting/vercel"
      },
      {
       "title": "Cloudflare",
       "text": "Cloudflare Hosting",
       "link": "/hosting/cloudflare"
      },
      {
       "title": "Netlify",
       "text": "Netlify Hosting",
       "link": "/hosting/netlify"
      },
      {
       "title": "Firebase",
       "text": "Google Firebase Host",
       "link": "/hosting/firebase"
      },
      {
       "title": "Surge",
       "text": "Surge Cloud Host",
       "link": "/hosting/surge"
      },
      {
       "title": "PHP",
       "text": "PHP Hosting",
       "link": "/hosting/php"
      }
    ]
    }

Output Design UI

astro starlight themes template

For add this display on your index files, you need to import your json. on your index.mdx files

import Start from '../../../widget/index_page/getstart.astro';

The complete JSON code look like this.

{
    "resources": [
      {
       "title": "Vercel",
       "text": "Vercel Hosting",
       "link": "/hosting/vercel"
      },
      {
       "title": "Cloudflare",
       "text": "Cloudflare Hosting",
       "link": "/hosting/cloudflare"
      },
      {
       "title": "Netlify",
       "text": "Netlify Hosting",
       "link": "/hosting/netlify"
      }
    ]
    }

Create New Group Doc Article

Create new grouping documentation is same like create this getstart Group doc .

For example you need to create a cms documentation group , you can create new group doc and name it with cms , on your src/content/docs folder

complete source look like src/content/docs/cms

For create new article doc, you can create new files and name it with your article doc url, and insert the fontformatter format.

Example : mycms.md

Complete source : src/content/docs/cms/mycms.md

---
title: My CMS
description: My CMS new article
---
### Title in here...
Write your content about your documentation here...

You can add all articles to your documentation group.

Once you have completed all the articles, you can now create an index file to organize your group documents.

Before do that we need to create a Json Data, so you can access on src/data/index_page/ and create your json data for your cms group , for example cms.json

the complete source look like src/data/index_page/cms.json

Insert this JSON format code

{
    "resources": [
      {
       "title": "Your article cms title doc 1",
       "text": "Text information for cms article doc 1",
       "link": "URL Link for your artilce doc 1"
      },
      {
       "title": "Your article cms title doc 2",
       "text": "Text information for cms article doc 2",
       "link": "URL Link for your artilce doc 2"
      },
      {
       "title": "New add cms title doc",
       "text": "New Text information for cms article doc",
       "link": "URL Link for your new artilce doc "
      }
    ]
    }

Implementation

{
    "resources": [
      {
       "title": "Decap CMS",
       "text": "Headless Git Hybrid Tech",
       "link": "/cms/decap"
      },
      {
       "title": "Tina CMS",
       "text": "Dev Mode Headless CMS",
       "link": "/cms/tina"
      },
      {
       "title": "Cloudcannon",
       "text": "Headless Git Cloud System",
       "link": "/cms/cloudcannon"
      },
      {
       "title": "Other CMS",
       "text": "Other Headless CMS",
       "link": "/cms/others"
      }
    ]
    }

And we need to import this json data files in to your index.mdx files.

import Data from '../../../data/index_page/cms.json';

so access on src/content/docs/cms/index.mdx or you can paste this code in to your index.mdx files.

---
title: CMS Group article
description: This is cms group article description index page
tableOfContents: false
next: false
---
import Data from '../../../data/index_page/cms.json';
import { Card, CardGrid } from '@astrojs/starlight/components';
## {frontmatter.description}

{ Data.resources.map(({ title,text,link }) => ( 
  
    {text} 
{title} info →
))}

Output Design UI

astro starlight themes template

Note: If you want to create index page for your group documentation content, for first you need to create

a json data for your group article, next you can import the JSON data into your index.mdx files on your group article.

---

Blog Articles Astro Docus

Astro docus project is inlcude with blog content, access on src/content/pages/blog .

astro js starlight blog

You can see example article for blog page in here. Next you can add new content article , with create new files , and name it file with your article, and write your content. Or for simple step , you can copy and paste from example article, rename files with your article blog url and update title, description and others with your needed.You can see an example of an article for a blog page here. Next you can add new article content, by creating a new file, and naming the file with your article, and writing your content. Or for a simple step, you can copy and paste from the example article, rename the file with your article's blog url and update the title, description, etc. according to your needs.

Frontformatter

---
layout: ../../design/blog/blogpost.astro
title: "Your blog article title here..."
description: "Your blog description title here..."
image: URL Image or CDN image here...
pubDate: 2023-12-12
tags: ["astro", "tags in here", " astro template", "astro themes"]
categories: ["categories in here"]
---
### Hello World
Write your content article here...

Implementation

---
layout: ../../design/blog/blogpost.astro
title: "Image Detail Astro JS Template"
description: "Detail image gallery content article - astro js themes"
image: /src/assets/image.png
pubDate: 2023-12-12
tags: ["astro", "image gallery", " astro template", "astro themes"]
categories: ["image"]
---
When your site visitors or customers click on one of the image galleries, they will be directed to the image detail page,visitors and customers can see detailed information from your image gallery.
[Read how to change image gallery page here →](/getstart/gallery/#image-gallery)
[Run project demo →](https://conceptualart.pages.dev/)
or
[Order this themes →](https://www.hockeycomputindo.com/themes/astro/blacks-complete-astro-themes/)

Output Design UI

astro js starlight blog

After you have finished creating all the articles, your blog articles will be listed in the blog index page area.

astro js starlight blog

You can set pagination and post display number, just open and update in [..page].astro file.

Change this code

  return paginate(formattedPosts, {
    pageSize: input post number here,
  })
}

The implementation if we want to display 12 posts in pagination.

  return paginate(formattedPosts, {
    pageSize: 12,
  })
}

---

Update Design UI

After you have configuration , create documentation content, blog article, and others. Now you can update your design UI, like setup your navigation ,

sidebar doc , and footer menu for static page, home page,doc page or blog page.After you have configured, create documentation content, blog articles, etc.

Now you can update your design UI, such as setting navigation menus and footers for static pages, home pages, or blog pages.

Access on data/configuration

Navigation Home Page + Static Page

Update static and home page nav - open on data/configuration/home/homepage.json

Complete JSON Code

{
    "title": "Blacks Astro Themes",
    "description": "Multipurpose Premium Astro JS Elegant Themes template with complete features",
    "icon": "/src/assets/astrojs.svg",
    "image": "/src/assets/newastro.png",
    "navbar": [
        {
         "nav": "Home",
         "link": "/"
        },
        {
         "nav": "Doc",
         "link": "/getstart/"
        },
        {
         "nav": "Blog",
         "link": "/blog/"
        },
        {
         "nav": "Plan",
         "link": "/plan/"
        }
    ],
    "footer1": "Menu",
    "footer1_nav": [
        {
         "nav": "Home Page",
         "link": "/"
        },
        {
         "nav": "Documentation",
         "link": "/getstart/"
        },
        {
         "nav": "Blog Page",
         "link": "/blog/"
        },
        {
         "nav": "Pricing Plan",
         "link": "/plan/"
        }
    ],
    "footer2": "Start",
    "footer2_nav": [
        {
         "nav": "Get Start",
         "link": "/getstart/"
        },
        {
         "nav": "Folder Structure",
         "link": "/folder/"
        },
        {
         "nav": "Headless CMS",
         "link": "/cms/"
        },
        {
         "nav": "Cloud Hosting",
         "link": "/hosting/"
        }
    ],
    "footer3": "Project",
    "footer3_nav": [
        {
         "nav": "Astro Blacks",
         "link": "/project/astroblacks/"
        },
        {
         "nav": "Astro Rent Car",
         "link": "/project/astrocar/"
        },
        {
         "nav": "Astro Docus",
         "link": "/project/astrodoc/"
        },
        {
         "nav": "Source Code",
         "link": "/project/astrothemes/"
        }
    ],
    "footer4": "Contact",
    "footer4_nav": [
        {
         "nav": "Sent Message",
         "link": "/message/"
        },
        {
         "nav": "WhatsApp Chat",
         "link": "https://wa.me/6285179858615"
        },
        {
         "nav": "Sent Email",
         "link": "mailto:axcora@gmail.com"
        },
        {
         "nav": "Hire Developer",
         "link": "https://www.fiverr.com/creativitas/"
        }
    ]
}

Navbar area

"title": "Blacks Astro Themes",
    "description": "Multipurpose Premium Astro JS Elegant Themes template with complete features",
    "icon": "/src/assets/astrojs.svg",
    "image": "/src/assets/newastro.png",
    "navbar": [
        {
         "nav": "Home",
         "link": "/"
        },
        {
         "nav": "Add new nav here...",
         "link": "Link URL for your new nav..."
        },
        {
         "nav": "Doc",
         "link": "/getstart/"
        }
    ],

For add new you can copy and paste from example code, then edit with you needed. see the example code.

Output Design UI

starlight astro js themes template

Footer area

    "footer1": "Menu",
    "footer1_nav": [
        {
         "nav": "Home Page",
         "link": "/"
        },
        {
         "nav": "New Nav here..",
         "link": "URL for new nav.."
        },
        {
         "nav": "Blog Page",
         "link": "/blog/"
        }
    ],
    "footer2": "Start",
    "footer2_nav": [
        {
         "nav": "Get Start",
         "link": "/getstart/"
        },
        {
         "nav": "New Nav here..",
         "link": "URL for new nav.."
        },
        {
         "nav": "Headless CMS",
         "link": "/cms/"
        }
    ],
    "footer3": "Project",
    "footer3_nav": [
        {
         "nav": "Astro Blacks",
         "link": "/project/astroblacks/"
        },
        {
         "nav": "Source Code",
         "link": "/project/astrothemes/"
        }
    ],
    "footer4": "Contact",
    "footer4_nav": [
        {
         "nav": "Sent Message",
         "link": "/message/"
        },
        {
         "nav": "Add your new nav here...",
         "link": "Link for your footer nav.."
        },
        {
         "nav": "Sent Email",
         "link": "mailto:axcora@gmail.com"
        }
    ]

For add new you can copy and paste from example code, then edit with you needed. see the example code.

Output Design UI

starlight astro js themes template

Update Blog Page Nav

Next , you can update blog page nav - open on data/configuration/blog/blogpage.json

Complete JSON Code

{
    "url": "https://astrodoc.pages.dev/blog",
    "title": "Blog Astro Themes",
    "description": "Update blog Docus Astro JS Starlight Themes template with complete features",
    "categories_page_title": "Categories Astro Themes",
    "categories_page_description": "Update blog Docus Astro JS Starlight Themes template with complete - categories",
    "tags_page_title": "Tags Astro Themes",
    "tags_page_description": "Update blog Docus Astro JS Starlight Themes template with complete features - tagging",
    "icon": "/src/assets/astrojs.svg",
    "image": "/src/assets/newastro.png",
    "navbar": [
        {
         "nav": "Home",
         "icon": "/src/assets/homeblog.svg",
         "link": "/"
        },
        {
         "nav": "Doc",
         "icon": "/src/assets/homedoc.svg",
         "link": "/getstart/"
        },
        {
         "nav": "Blog",
         "icon": "/src/assets/bloggers.svg",
         "link": "/blog/"
        },
        {
         "nav": "Plan",
         "icon": "/src/assets/blogcontact.svg",
         "link": "/plan/"
        }
    ]
}

Categories title and description is for your categories title and description page , Tags title and categories for your blog tag page.

Implementation Blog List Page

"title": "Blog Astro Themes",
"description": "Update blog Docus Astro JS Starlight Themes template with complete features",

Output Design UI

starlight astro js themes template

Implementation Categories Page

"categories_page_title": "Categories Astro Themes",
"categories_page_description": "Update blog Docus Astro JS Starlight Themes 

Output Design UI

starlight astro js themes template

Implementation Tag page

"tags_page_title": "Tags Astro Themes",
"tags_page_description": "Update blog Docus Astro JS Starlight Themes template with complete features - tagging",

Output Design UI

starlight astro js themes template

Implementation navbar blog

"icon": "/src/assets/astrojs.svg",
    "image": "/src/assets/newastro.png",
    "navbar": [
        {
         "nav": "Home",
         "icon": "/src/assets/homeblog.svg",
         "link": "/"
        },
        {
         "nav": "Doc",
         "icon": "/src/assets/homedoc.svg",
         "link": "/getstart/"
        },
        {
         "nav": "Blog",
         "icon": "/src/assets/bloggers.svg",
         "link": "/blog/"
        },
        {
         "nav": "Plan",
         "icon": "/src/assets/blogcontact.svg",
         "link": "/plan/"
        }
    ]

Output Design UI on Blog page list

starlight astro js themes template

Output Design UI on Blog article page

starlight astro js themes template

Sidebar Doc

Next you need to config your sidebar documentation , so you can access on astro.config.mjs

export default defineConfig({
site: 'your website url in here',
integrations: [
starlight({
title: 'Your website title',
logo: {src: 'Image logo URL in here..',},
customCss: ['Your custom css in here..',],
social: { github: 'Your github repo here..', },
sidebar: [
{label: 'Title for your categories documentation article..',
items: [
{ label: 'Your doc article 1', link: 'Link url article 1 in here..' },
{ label: 'Your doc article 2 ', link: 'Link url article 2 in here..' },
],
},
{label: 'New categories title for documentation article..',
items: [
{ label: 'Your new doc here..', link: 'Link url in here...' },
{ label: 'New doc 2 grouping in here...',
items: [
{ label: 'New doc 2 title article 1', link: 'Link URL for new doc 1 ' },
{ label: 'New doc 2 title article 1', link: 'Link URL for new doc 2 ' },
],
},
],
});

Customise the sidebar doc with your needs, integration label with your doc url link, and save it.

Output Design UI

starlight astro js themes template

---

Push Docus Project on Github.

Before push your project, you need to add your domain.

For first you can open astro.config

and change site url with your domain name .

Json Code

export default defineConfig({
	site: 'https://astrodoc.pages.dev',
	integrations: [
});

And open src/data/config.json change url with your domain name.

Github

Register and create an account on github

Next you can create new repo , check image

astro js documentation themes template

Name it your repo , then select your project for public or private, Then you can click create repo button.

Next, You need to following github command.

For first access your project using terminal , then copy and paste command script from github.

Example

git init
git add .
git commit -m "first commit for my astro website"
git remote add origin https://github.com/username/your-repo-name
git push -u origin master

Change username with your github username ,and change your-repo-name with your github repo

And you have successfully push your project on github repo.

Output

astro js documentation themes template

Next step, you need to register on modern static host provider for deploy your project and make your website live.

---

Publish Astro Docus Project Theme.

For deploy and make your website live, so you need to register on modern static host provider, for example, cloudflare , netlify or vercel.

  • Register with your github account
  • Next you can click create new project app for netlify and vercel or pages for cloudflare
  • And you can click select and integration with your github repo project.
  • After you have integration with your github account, now you can select your github repo
  • Next you can click deploy, and select astro as framework.
  • Click Deploy
  • Congratulations your website is live now !!
  • ---

Headless CMS for Astro JS Blacks Theme.

If you want to work with CMS , so you can use headless git cms for best solutions.

Same like other cms, with headless cms we can update website and blog quickly.

Include with credential security for login on backend admin, make your website secure.

We can use netlify decap cms.

Astro cms

Credential login with google or github account

Astro cms

Dashboard area

Astro cms

Blog article post

Astro cms

Write your article or update page

You can build your backend headless cms with decap cms.

Astro cms

Or you can use headless cms for your dev local mode with Tina CMS

If you interest work with headless cms, so you can use our services for develope your backend headless cms admin for your project.


Frequently Asked Questions
What buyers ask about Docus - Astro Starlight Docs Template - Documentation, Blog, Landing


What is Docus, and what problem does it solve?

Docus is a premium Astro + Starlight documentation template that combines documentation, blog, and landing page in one Astro project. It ships with a documentation system with auto-generated sidebar, full-text search, syntax highlighting, and multi-level navigation; a blog with pagination, post detail, tags, categories, and RSS feed; a JSON-driven landing page with hero, feature cards, services, tech stack, and CTA; a pricing page with JSON-driven tiers; a contact form without a backend server; and SEO with meta tags, Open Graph, sitemap, and canonical URLs. Instead of maintaining two or three separate sites, you run one project, edit Markdown and JSON, and deploy once.


Do I need to know Astro or Starlight to use Docus?

You need Node.js and a terminal to install and run the project, but daily content editing happens through Markdown, MDX, and JSON. Documentation lives in src/content/docs/, blog posts in src/content/pages/blog/, landing and navbar config in src/data/configuration/, and pricing in src/data/pricing/pricing.json. If you can edit Markdown and JSON, you can customize most of it. Astro and Starlight knowledge helps for layout changes.


How do I install and run Docus locally?

Install Node.js from nodejs.org. Download the source code, create a project folder named astrodocu on your desktop, and extract the source into it. Open a terminal, run cd C:\Users\pcname\Desktop\astrodocu (replace pcname with your PC name), then npm install and npm run dev. Open localhost in your browser.


How do I configure the sidebar and documentation groups?

Open astro.config.mjs and set site to your domain and title to your doc title. In the sidebar array, each entry has a label and either items or a nested items for subgroups. Each item has a label and link. To create a new documentation group, create a folder inside src/content/docs/ (for example getstart), add .md or .mdx articles to it, then add the group and its items to the sidebar array in astro.config.mjs. For best results, finish all your doc articles first, then wire the sidebar to match.


How do I build a group index page with cards?

A group index page is an index.mdx inside the group folder. It imports a JSON file from src/data/index_page/ (for example getstart.json) and uses the Starlight Card and CardGrid components to render a card for each entry. Each JSON entry has title, text, and link. The index.mdx frontmatter sets title, description, tableOfContents false, and next false. The pattern is create the JSON, import it in index.mdx, then map resources to Card inside CardGrid. Repeat this for every group, including cms, hosting, and others.


How do I create a static page like About or Order?

Create an .mdx file in src/content/docs/ and set the frontmatter to title, description, template splash, tableOfContents false, prev false, and next false. Then import the widgets you need (Nav, Header, Footer, Help), the doc styles, and write the body. The template splash gives you a full-width page instead of a standard docs page, which is what you want for about, order, contact, and similar static pages.


How do I add a blog post and change pagination?

Create a .md file in src/content/pages/blog/ with frontmatter layout ../../design/blog/blogpost.astro, title, description, image, pubDate, tags, and categories. Write the body in Markdown. Posts appear on the blog listing automatically. To change how many posts display per page, open [..page].astro in the blog folder and change pageSize 12 to your number. Categories and tags each have their own page, and the titles and descriptions for those pages live in src/data/configuration/blog/blogpage.json under categories_page_title, categories_page_description, tags_page_title, and tags_page_description.


How does the contact form work?

The contact page lives at src/content/docs/contact.mdx with frontmatter title, description, phone, email, address, template splash, tableOfContents false, prev false, and next false. The form uses the airform server, so the first time you submit a message you will receive a confirmation email; click the confirmation link to activate the form. After activation, every message goes to your inbox without any backend server or database.


Is SEO handled automatically?

Yes. Docus handles meta tags, Open Graph, sitemap, and canonical URLs automatically. Set your site URL in astro.config.mjs, and the canonical URLs and sitemap entries follow. The landing page and navbar config also carry title, description, and image for social sharing, and every blog post carries its own title, description, and image in frontmatter. Combined with the static Astro output, the site is search-ready without manual meta wiring per page.


How do I deploy Docus, and does it support a CMS?

Set the site URL in astro.config.mjs, push the project to GitHub, then register on Cloudflare Pages, Netlify, or Vercel with your GitHub account, create a new project, connect your repository, select Astro as the framework, and click deploy. The site is live. A headless CMS is optional Decap CMS works through Netlify, and Tina CMS works in local development mode. If you want a CMS built for your project, custom CMS integration is available through the Fiverr link in the article.


What is the license, and where can I see the demo and get support?

Docus is a one-time purchase at 65 dollars, and you own 100 percent of the source. You can use it on personal and client projects. The license does not permit reselling or redistributing the template itself. Live demo astrodoc.pages.dev. Download creativitaz.gumroad.com/l/starlightastrodocus. For support, email axcora@gmail.com. Custom work, including headless CMS integration and bespoke Astro sites, is available through the Fiverr link in the article.

URL: https://www.hockeycomputindo.com/themes/astro/starlight-doc-astro-js/

Embed — Cloudinary

Docus - Astro Starlight Docs Template - Documentation, Blog, Landing

https://www.hockeycomputindo.com/themes/astro/starlight-doc-astro-js/

DOWNLOAD →

$65 - Own 100%

Docus - Astro Starlight Docs Template - Documentation, Blog, Landing

Astro Starlight docs template with documentation, blog, landing page, search, sidebar, dark mode. MDX ready, SEO auto, fast, own 100% source, one-time.

DOWNLOAD →DEMO →

Features

astro-starlight
documentation-blog-landing
sidebar-nav-search
dark-mode-seo-auto
mdx-markdown
categories-tags-pagination
contact-form
own-100-source

https://astrodoc.pages.dev/


← ForgeDocs — All-in-One Astro Starlight Theme for Landing Page, Documentation, and BlogFinance App - Astro Startup Template - SaaS, Finance, App Landing →

Need Custom?

Hire via Fiverr Escrow

72+ verified reviews, escrow protected.

ORDER CUSTOM →

Selected Premium Themes
A focused collection, not a marketplace.

Custom Web Architecture
Escrow Protected

Headless commerce, booking systems, static site generators, and AI automation — engineered for speed, SEO, and full ownership. No subscriptions, no lock-in. - Commerce, booking, SSG, AI — built to own, not rent.