Building a Real-Time System Health Dashboard with Powershell, HTML & CSS

Kwame Owusu Ohemeng — Sun, 10 Aug 2025 16:03:42 +0000

Introduction

In today’s fast-paced IT world, system reliability is crucial. Monitoring key system metrics helps prevent downtime and costly errors. In this post, I’ll walk you through a project I built: a real-time system health dashboard that runs on a Windows VM using PowerShell, HTML, and CSS. It provides live insights on CPU, memory, disk health, uptime, network, and more — all wrapped in a sleek dark blue futuristic interface.

⸻

Why I Built This

Downtime and unnoticed errors can cause serious business losses. Existing monitoring tools can be complex or expensive. I wanted a simple, automated solution that provides clear, real-time data for system admins and IT pros.

⸻

Key Features
• Real-time monitoring of CPU usage, memory utilisation, disk health, uptime, network status, and critical event logs
• Interactive HTML dashboard with modern dark blue theme
• Automation via Windows Task Scheduler for continuous updates
• Built entirely with PowerShell scripting and web technologies (HTML/CSS)

⸻

Step-by-Step implementation

Planning the Dashboard
Planning the dashboard took a bit of time and heavy reasoning. There are many system health metrics, but my goal was to provide the key ones - CPU, memory, disk, uptime, network, and event logs. My focus was on real-time accuracy and easy readability. I gave the dashboard a futuristic dark blue theme to make the data visually appealing. I separated the PowerShell script, HTML and CSS into different files to make the project maintainable. Lastly, I automated the script via Task Scheduler to ensure regular updates without manual intervention.

Gathering System Data with PowerShell
In PowerShell, I was able to derive all the system metrics - these include the following:

HostName: shows the name that identifies your computer in a local network
$env: COMPUTERNAME

OSName: shows what Operating System you are using
$OSInformation = Get-CimInstance - ClassName Win32_OperatingSystem $OSname = $OSInformation.Caption.Trim()

OSVersion: shows the version of the OS you are using
(Get-CimInstance -ClassName Win32_OperatingSystem).Version

OSBuild number: a specific identifier for the version of your OS
(Get-CimInstance -ClassName Win32_OperatingSystem).BuildNumber

CPU Load Percentage: shows you how much the CPU is currently in use
`(Get-CimInstance Win32_Processor).LoadPercentage

CPU Name(Model): Identifies the exact CPU chip
(Get-CimInstance Win32_Processor).Name
Number of Cores: Finds the physical processing power of the computer
(Get-CimInstance Win32_Processor).NumberOfCores

Number of Logical Processors: Finds the multitasking capacity of the CPU
(Get-CimInstance Win32_Processor).NumberOfLogicalProcessors

Total Physical Memory: The total installed RAM on your system
$totalMemory = (Get-CimInstance Win32_ComputerSystem).TotalPhysicalMemory/1GB
I round this figure to give a concise result

Available Memory: Determines how much RAM is currently available (free space)
$freeMemory = (Get-CimInstance Win32_OperatingSystem).FreePhysicalMemory/1MBI round this figure to give a concise result
To dive deeper - check the source code.

Exporting Data to HTML

In HTML, I created placeholders to accept the values from PowerShell. I made sure to get the content of the HTML file in PowerShell by using this syntax:

$html = Get-Content "C:\Users\Mikel\Desktop\index.html" -Raw Get-Content: gets the data from the HTML file

-Raw: Make sure to get the content in the exact form, unedited, and unmodified.

After getting the contents in HTML (the placeholders), I assigned the various system metrics data to each placeholder. After replacing the values. I exported the HTML file to the output file.

Syntax:

$html | Out-File "reportFile" -Encoding utf8
reportFile: is the output file that renders the script in a web browser.

Styling with CSS
I created a separate CSS file and linked it to the HTML file using this syntax:

<link rel="stylesheet" href="style.css"
In the CSS file, I styled the page to my preference. I animated the background and gave it a dark-blue futuristic theme.

Automation with Task Scheduler

In my task scheduler, under the actions section in the top right panel. I chose “Create Basic Task”

In the “Create Basic Task” menu, I gave the script I want to automate a name.

Now in the “Trigger” menu, I was asked when I want to start the automation. I chose daily to always get real-time and updated data. Since I chose daily, I set the time to when the automation should start.

The “Action” menu is what you want the task to do, I chose to “start a program” since we are dealing with a script here.

In the “Start a Program” menu, I entered PowerShell as the script I want to run. In the “Add arguments” text bar, I wrote a script to bypass or ignore every restriction to be able to run the script successfully.
Syntax:

`-ExcecutionPolicy Bypass -File "path to HTML file"

The final part is the summary menu which shows you want you have done so far. I was okay with it and clicked on “Finish”

In my task creation, I wasn't given an option to set a time interval for the task to be repeated. So I after creating the task, I located the file and navigated to the Trigger section on the top panel. In the Trigger menu, I clicked on Edit. It opened a menu as shown in the image below:

I checked “Repeat task every” and set it to 15 minutes. This means my script will run every 15 mins.

Testing

Now to see if the task I created was working successfully, I had to manually run the task.

I located my file and clicked “Run” in the actions panel on the right side.

My script ran successfully as expected!!

FINAL RESULT

What I learnt
Through this project, I have strengthened my skills in PowerShell scripting, automation, and web design, while gaining practical experience in system monitoring and creating a user-friendly dashboard.

Conclusion
This project demonstrates how combining scripting and web technologies can create effective, real-time system monitoring tools. I welcome your feedback and encourage you to explore the repo!

Check out the full project on GitHub:
⸻

DEV Community: Kwame Owusu Ohemeng

Building a Real-Time System Health Dashboard with Powershell, HTML & CSS