Skip to content
LightNet

Getting Started

Welcome to the LightNet Developer Documentation site! This guide will walk you through creating your first LightNet project. Not sure what LightNet is all about? Visit the LightNet homepage.

Requirements

Section titled “Requirements”

Before starting, ensure the following are installed on your machine:

To verify your installations, run the following commands in your terminal:

Terminal window
node --version
git --version

If these commands return version numbers, you’re ready to go!

1. Set Up the Sk8 Ministries Example

Section titled “1. Set Up the Sk8 Ministries Example”

We recommend starting with the Sk8 Ministries example, a prebuilt template that showcases LightNet’s features for a fictional skateboard ministry. It’s a great starting point for learning how to structure your media site.

To create a local copy of the project - navigate your terminal to a folder where you would like to create the copy and run:

Terminal window
npm create astro@latest -- --template LightNetDev/LightNet/examples/sk8-ministries

This starts Astro’s create astro command - which lets you:

  • Choose a location for your project. This creates the folder for your project and also set its name.
  • Install its dependencies (Yes).
  • Initialize a Git repository (Yes).

Once finished, navigate into your project folder:

Terminal window
cd your-project-folder

2. Run the Development Server

Section titled “2. Run the Development Server”

Now that your project is set up, start the development server to see your site in action. The development server is an application that lets you preview your media site in your browser without putting it online.

Terminal window
npm run dev

Your site is available at localhost:4321. Open your browser to preview the example site. As you will need the development server for the next steps, please keep it running.

3. Make Your First Modification

Section titled “3. Make Your First Modification”

As your first modification, let’s change the site title:

  1. Open the project folder in VS Code (or your preferred text editor).
  2. Inside VS-Code open src/translations/en.yml.
  3. Modify the value of the x.site.title-key by changing “Sk8 Ministries” to your desired site name.
  4. Save the file. Still running npm run dev, your browser automatically refreshes to show the updated title. It is visible in front of the big picture and inside the header bar.

Optional: Make another Modification using the Administration UI

Section titled “Optional: Make another Modification using the Administration UI”

You can easily update content using the Administration User Interface (Administration UI). The Administration UI is a graphical user interface that enables a content manager to update the media site’s content without accessing the source code. Follow these steps to run the Administration UI:

  1. Ensure that npm run dev is still running in your terminal.
  2. Open a new terminal window in your project’s folder and execute the following command. This command downloads and starts a backend for Decap CMS, which is used for the content Administration UI.
    Terminal window
    npx decap-server
  3. Once you see the message info: Decap CMS Proxy Server listening on port 8081 in your terminal, open your browser and navigate to the Administration UI on localhost:4321/admin.
  4. Click the “Login” button. You are presented with a list of all available media items.
  5. Open how-to-360-flip--en by clicking it. Change the title to “How to Do a 360 Flip”.
  6. Click the “Publish” button in the header bar, then select “Publish Now”.

This action updates the a JSON content file stored on inside your project folder.

Inspect the changes you have just made:

  1. Check the Updated Content File: Open the file located at /src/content/media/how-to-360-flip--en.json. The title attribute should reflect your changes.
  2. View the Updated Website: In your browser, go to localhost:4321/en/media/how-to-360-flip—en. You should see the updated title displayed below the video.

Feel free to experiment further by adding new media items through the Administration UI or by creating additional JSON files.

What’s Next?

Section titled “What’s Next?”

Great job! 🎉 You’ve successfully created, run and modified a local copy of the SK8 Ministries media site. Now, let’s dive deeper into how LightNet works and explore more advanced customization options.