Create a Markdown page

Markdown pages are useful for text-focused pages such as an introduction to your ministry, contact information, or frequently asked questions. Markdown lets you write headings, paragraphs, lists, links, and images in a plain text file. LightNet provides a layout that displays this content within your site’s design, including the header and navigation.

This guide shows you how to create a Markdown page, using an about page as an example. An about page introduces your ministry or community; you can follow the same steps to create other text-focused pages. You will create a file for each site language, add the page content, and link to the page from the main menu. The example uses English and German, but you can use the same approach for your site’s languages.

If you are new to how file paths become page URLs, read Page fundamentals first.

Create the page

1. Create a Markdown file for each site language in its locale folder under src/pages/. For example, if your site supports English and German, you would create the following files:

   • Directorysrc

     • Directorypages

       • Directoryen

         • about.md
       • Directoryde

         • about.md

2. Add the layout, title, and page content to each file. Use Markdown syntax to write your content. For example:

   src/pages/en/about.md

   ---
   layout: "lightnet/layouts/MarkdownPage.astro"
   title: About
   ---
   
   # About
   
   Learn about our ministry and the community we serve.
   
   ![Our community gathered together](../../assets/my-community-picture.jpg)

   The layout field selects LightNet’s Markdown page layout, which includes the site header and adapts to different screen sizes. The title field sets the page title; the # About heading appears in the page content. You can also create your own layout to customize the page’s appearance.

   For the image in this example, place your image at src/assets/my-community-picture.jpg, or update the relative path to match your file. Astro optimizes local images referenced in Markdown. Add the translated title, heading, and content to src/pages/de/about.md using the same layout.

3. Add an entry to mainMenu in your existing LightNet configuration in astro.config.mjs:

   astro.config.mjs

   export default defineConfig({
     integrations: [
       lightnet({
         mainMenu: [
           {
             href: "/about",
             label: {
               en: "About",
             },
           },
         ],
       }),
     ],
   });

   Use /about as the link destination. LightNet adds the current locale automatically, so the menu links to /en/about or /de/about. See Set the main menu for more options.

4. Translate the menu label for each site language in the label map from the previous step. For example:

   astro.config.mjs

   label: {
     en: "About",
     de: "Über uns",
   }

Open /en/about and /de/about on your local development site to check the content, image, and menu labels in each language.