mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-07-14 19:56:52 +00:00
update synology page
This commit is contained in:
MacRimi
parent
4f3a78536c
commit
8912253106
@ -1,33 +1,552 @@
|
|||||||
import type { Metadata } from "next"
|
"use client"
|
||||||
import { Settings } from "lucide-react"
|
|
||||||
import Image from "next/image"
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
import Image from "next/image"
|
||||||
title: "ProxMenux - Create Synology DSM VM",
|
import { Wrench, Target, CheckCircle } from "lucide-react"
|
||||||
description:
|
import { useState } from "react"
|
||||||
"Step-by-step guide to create and configure a Synology DSM VM using ProxMenux with Arc, RR, and TinyCore loaders.",
|
|
||||||
openGraph: {
|
export default function Page() {
|
||||||
title: "ProxMenux - Create Synology DSM VM",
|
return (
|
||||||
description:
|
<div className="container mx-auto px-4 py-8">
|
||||||
"Step-by-step guide to create and configure a Synology DSM VM using ProxMenux with Arc, RR, and TinyCore loaders.",
|
<h1 className="text-3xl font-bold mb-6">Create Synology DSM VM using ProxMenux</h1>
|
||||||
type: "article",
|
|
||||||
url: "https://macrimi.github.io/ProxMenux/docs/synology-vm",
|
<section className="mb-10">
|
||||||
images: [
|
<h2 className="text-2xl font-semibold mb-4 flex items-center">Introduction</h2>
|
||||||
{
|
<p className="mb-4">
|
||||||
url: "https://macrimi.github.io/ProxMenux/synology-vm-guide.png",
|
ProxMenux provides an automated script that creates and configures a VM to install Synology DSM (DiskStation
|
||||||
width: 1200,
|
Manager). This script simplifies the process by downloading and adding one of the available loaders to the VM
|
||||||
height: 630,
|
boot, giving you the option between three different choices:
|
||||||
alt: "ProxMenux - Create Synology DSM VM",
|
</p>
|
||||||
},
|
<ul className="list-disc pl-5 mb-4">
|
||||||
],
|
<li>AuxXxilium Arc (referred to as "arc")</li>
|
||||||
},
|
<li>edPill rr (referred to as "rr")</li>
|
||||||
twitter: {
|
<li>TinyCore RedPill M-shell (referred to as "tinycore")</li>
|
||||||
card: "summary_large_image",
|
</ul>
|
||||||
title: "ProxMenux - Create Synology DSM VM",
|
<p className="mb-4">
|
||||||
description:
|
You also have the option to add a custom loader if you prefer to modify or create your own configuration.
|
||||||
"Step-by-step guide to create and configure a Synology DSM VM using ProxMenux with Arc, RR, and TinyCore loaders.",
|
</p>
|
||||||
images: ["https://macrimi.github.io/ProxMenux/synology-vm-guide.png"],
|
<p className="mb-4">
|
||||||
},
|
All loaders are similar although each has its own structure and configuration methods. This guide describes
|
||||||
|
the 6 basic steps involved in setting up a Synology DSM loader. The exact steps may vary depending on the
|
||||||
|
loader and/or changes introduced by the developer, so understanding the basic steps similar in all of them
|
||||||
|
will help you know how to build the loader of your choice for the proper functioning of Synology DS.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-10">
|
||||||
|
<h2 className="text-2xl font-semibold mb-4 flex items-center">
|
||||||
|
<Wrench className="h-6 w-6 mr-2 text-blue-500" />
|
||||||
|
Step-by-Step Guide
|
||||||
|
</h2>
|
||||||
|
<p className="mb-6">
|
||||||
|
This guide will walk you through the process of configuring the loader and setting up the VM. Each step
|
||||||
|
includes screenshots to show how the process looks with the three loaders (arc, rr, and tinycore).
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12 border-b pb-8">
|
||||||
|
<h2 className="text-xl font-semibold mb-4 flex items-center" id="step1">
|
||||||
|
<StepNumber number={1} />
|
||||||
|
Start the VM and Access the Main Menu
|
||||||
|
</h2>
|
||||||
|
<p className="mb-4">
|
||||||
|
Once the VM is created, start it. The first time you boot the VM, you'll access the loader's main menu to
|
||||||
|
select and configure the DSM model you want to build. Once the loader is created, this step will be skipped
|
||||||
|
unless you manually force a reconfiguration from the boot monitor.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<TabGroup
|
||||||
|
tabs={[
|
||||||
|
{
|
||||||
|
id: "arc",
|
||||||
|
label: "Arc Loader",
|
||||||
|
content: (
|
||||||
|
<div className="flex flex-col space-y-8 mt-6">
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_1_1.png"
|
||||||
|
alt="Arc Loader Interface"
|
||||||
|
caption="Arc Loader Interface"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "rr",
|
||||||
|
label: "RR Loader",
|
||||||
|
content: (
|
||||||
|
<div className="flex flex-col space-y-8 mt-6">
|
||||||
|
<div className="bg-gray-50 p-4 rounded-lg mb-6">
|
||||||
|
<p className="mb-2">
|
||||||
|
<strong>In the case of RR</strong>, you'll need to manually enter the following command to open
|
||||||
|
the menu:
|
||||||
|
</p>
|
||||||
|
<pre className="bg-gray-100 p-4 rounded-md overflow-x-auto text-sm">
|
||||||
|
<code>./menu.sh</code>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_0_1.png"
|
||||||
|
alt="RR Command Example"
|
||||||
|
caption="RR Command Example: ./menu.sh"
|
||||||
|
/>
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_1_1.png"
|
||||||
|
alt="RR Loader Interface"
|
||||||
|
caption="RR Loader Interface"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "tinycore",
|
||||||
|
label: "TinyCore Loader",
|
||||||
|
content: (
|
||||||
|
<div className="flex flex-col space-y-8 mt-6">
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_1_1.png"
|
||||||
|
alt="TinyCore Loader Interface"
|
||||||
|
caption="TinyCore Loader Interface"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12 border-b pb-8">
|
||||||
|
<h2 className="text-xl font-semibold mb-4 flex items-center" id="step2">
|
||||||
|
<StepNumber number={2} />
|
||||||
|
Select Model
|
||||||
|
</h2>
|
||||||
|
<p className="mb-4">
|
||||||
|
After loading the menu, select the Synology DSM model you want to install. Depending on the loader, you may
|
||||||
|
sometimes need to expand the options to see more models.
|
||||||
|
</p>
|
||||||
|
<h3 className="text-lg font-semibold mb-4">Examples:</h3>
|
||||||
|
<TabGroup
|
||||||
|
tabs={[
|
||||||
|
{
|
||||||
|
id: "arc",
|
||||||
|
label: "Arc Loader",
|
||||||
|
content: (
|
||||||
|
<div className="flex flex-col space-y-8 mt-6">
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_2_1.png"
|
||||||
|
alt="Arc Model Selection"
|
||||||
|
caption="Arc Model Selection"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "rr",
|
||||||
|
label: "RR Loader",
|
||||||
|
content: (
|
||||||
|
<div className="flex flex-col space-y-8 mt-6">
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_2_1.png"
|
||||||
|
alt="RR Model Selection"
|
||||||
|
caption="RR Model Selection"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "tinycore",
|
||||||
|
label: "TinyCore Loader",
|
||||||
|
content: (
|
||||||
|
<div className="flex flex-col space-y-8 mt-6">
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_2_1.png"
|
||||||
|
alt="TinyCore Model Selection"
|
||||||
|
caption="TinyCore Model Selection"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<p className="mt-4">In our example, we'll choose the SA6400 model.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12 border-b pb-8">
|
||||||
|
<h2 className="text-xl font-semibold mb-4 flex items-center" id="step3">
|
||||||
|
<StepNumber number={3} />
|
||||||
|
Select DSM Version
|
||||||
|
</h2>
|
||||||
|
<p className="mb-4">
|
||||||
|
After selecting the model, you need to choose the DSM version you want to install. In some loaders (such as
|
||||||
|
arc), you may encounter additional options at this stage.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<TabGroup
|
||||||
|
tabs={[
|
||||||
|
{
|
||||||
|
id: "arc",
|
||||||
|
label: "Arc Loader",
|
||||||
|
content: (
|
||||||
|
<div className="flex flex-col space-y-8 mt-6">
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_3_1.png"
|
||||||
|
alt="Arc Version Selection - Step 1"
|
||||||
|
caption="Arc Version Selection - Step 1"
|
||||||
|
/>
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_3_2.png"
|
||||||
|
alt="Arc Version Selection - Step 2"
|
||||||
|
caption="Arc Version Selection - Step 2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "rr",
|
||||||
|
label: "RR Loader",
|
||||||
|
content: (
|
||||||
|
<div className="flex flex-col space-y-8 mt-6">
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_3_1.png"
|
||||||
|
alt="RR Version Selection - Step 1"
|
||||||
|
caption="RR Version Selection - Step 1"
|
||||||
|
/>
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_3_2.png"
|
||||||
|
alt="RR Version Selection - Step 2"
|
||||||
|
caption="RR Version Selection - Step 2"
|
||||||
|
/>
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_3_3.png"
|
||||||
|
alt="RR Version Selection - Step 3"
|
||||||
|
caption="RR Version Selection - Step 3"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "tinycore",
|
||||||
|
label: "TinyCore Loader",
|
||||||
|
content: (
|
||||||
|
<div className="flex flex-col space-y-8 mt-6">
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_3_1.png"
|
||||||
|
alt="TinyCore Version Selection - Step 1"
|
||||||
|
caption="TinyCore Version Selection - Step 1"
|
||||||
|
/>
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_3_2.png"
|
||||||
|
alt="TinyCore Version Selection - Step 2"
|
||||||
|
caption="TinyCore Version Selection - Step 2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12 border-b pb-8">
|
||||||
|
<h2 className="text-xl font-semibold mb-4 flex items-center" id="step4">
|
||||||
|
<StepNumber number={4} />
|
||||||
|
Select Add-Ons
|
||||||
|
</h2>
|
||||||
|
<p className="mb-4">This step allows you to add additional features or custom configurations to the loader.</p>
|
||||||
|
|
||||||
|
<TabGroup
|
||||||
|
tabs={[
|
||||||
|
{
|
||||||
|
id: "arc",
|
||||||
|
label: "Arc Loader",
|
||||||
|
content: (
|
||||||
|
<div className="flex flex-col space-y-8 mt-6">
|
||||||
|
<p className="mb-2">
|
||||||
|
<strong>Arc</strong> gives you the option to configure automatically or manually adjust the
|
||||||
|
settings.
|
||||||
|
</p>
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_1.png"
|
||||||
|
alt="Arc Auto Configuration"
|
||||||
|
caption="Arc Auto Configuration"
|
||||||
|
/>
|
||||||
|
<p className="mb-2">
|
||||||
|
If we choose not to use automatic mode, we enter the menu to configure different options necessary
|
||||||
|
for the loader:
|
||||||
|
</p>
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_2.png"
|
||||||
|
alt="Arc Manual Configuration"
|
||||||
|
caption="Arc Manual Configuration"
|
||||||
|
/>
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_3.png"
|
||||||
|
alt="Arc SN/Mac Configuration"
|
||||||
|
caption="Arc SN/Mac Configuration"
|
||||||
|
/>
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_4.png"
|
||||||
|
alt="Arc Sata Portmap"
|
||||||
|
caption="Arc Sata Portmap (use the recommended option)"
|
||||||
|
/>
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_5.png"
|
||||||
|
alt="Arc Add-Ons Selection"
|
||||||
|
caption="Arc Add-Ons Selection"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "rr",
|
||||||
|
label: "RR Loader",
|
||||||
|
content: (
|
||||||
|
<div className="flex flex-col space-y-8 mt-6">
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_4_1.png"
|
||||||
|
alt="RR Add-On Step 1"
|
||||||
|
caption="RR Add-On Step 1"
|
||||||
|
/>
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_4_2.png"
|
||||||
|
alt="RR Add-On Step 2"
|
||||||
|
caption="RR Add-On Step 2 - Press to add add-ons"
|
||||||
|
/>
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_4_3.png"
|
||||||
|
alt="RR Add-On Step 3"
|
||||||
|
caption="RR Add-On Step 3 - Select the one you want by clicking on it. If you want to add more, repeat the process from images 2.4.2 and 2.4.3"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "tinycore",
|
||||||
|
label: "TinyCore Loader",
|
||||||
|
content: (
|
||||||
|
<div className="flex flex-col space-y-8 mt-6">
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_1.png"
|
||||||
|
alt="TinyCore SN Configuration"
|
||||||
|
caption="TinyCore SN Configuration"
|
||||||
|
/>
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_2.png"
|
||||||
|
alt="TinyCore Random Option"
|
||||||
|
caption="TinyCore Random Option - The random option is recommended"
|
||||||
|
/>
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_3.png"
|
||||||
|
alt="TinyCore MAC Configuration"
|
||||||
|
caption="TinyCore MAC Configuration"
|
||||||
|
/>
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_4.png"
|
||||||
|
alt="TinyCore VM MAC"
|
||||||
|
caption="TinyCore VM MAC - Choose to use your VM's MAC or a random one"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12 border-b pb-8">
|
||||||
|
<h2 className="text-xl font-semibold mb-4 flex items-center" id="step5">
|
||||||
|
<StepNumber number={5} />
|
||||||
|
Build the Loader
|
||||||
|
</h2>
|
||||||
|
<p className="mb-4">
|
||||||
|
Once you have selected the model, DSM version, and add-ons, proceed to build the loader. This process might
|
||||||
|
take a few minutes depending on the loader and the selected configuration. To start, select the "Build the
|
||||||
|
Loader" option.
|
||||||
|
</p>
|
||||||
|
<h3 className="text-lg font-semibold mb-4">Examples:</h3>
|
||||||
|
<TabGroup
|
||||||
|
tabs={[
|
||||||
|
{
|
||||||
|
id: "arc",
|
||||||
|
label: "Arc Loader",
|
||||||
|
content: (
|
||||||
|
<div className="flex flex-col space-y-8 mt-6">
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_5_1.png"
|
||||||
|
alt="Arc Build Loader"
|
||||||
|
caption="Arc Build Loader"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "rr",
|
||||||
|
label: "RR Loader",
|
||||||
|
content: (
|
||||||
|
<div className="flex flex-col space-y-8 mt-6">
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_5_1.png"
|
||||||
|
alt="RR Build Loader"
|
||||||
|
caption="RR Build Loader"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "tinycore",
|
||||||
|
label: "TinyCore Loader",
|
||||||
|
content: (
|
||||||
|
<div className="flex flex-col space-y-8 mt-6">
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_5_1.png"
|
||||||
|
alt="TinyCore Build Loader"
|
||||||
|
caption="TinyCore Build Loader"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12 border-b pb-8">
|
||||||
|
<h2 className="text-xl font-semibold mb-4 flex items-center" id="step6">
|
||||||
|
<StepNumber number={6} />
|
||||||
|
Boot the Loader
|
||||||
|
</h2>
|
||||||
|
<p className="mb-4">
|
||||||
|
Once the loader has been built, it will prompt you to boot. The VM will restart with the configuration you've
|
||||||
|
created and start the DSM installation.
|
||||||
|
</p>
|
||||||
|
<h3 className="text-lg font-semibold mb-4">Examples:</h3>
|
||||||
|
<TabGroup
|
||||||
|
tabs={[
|
||||||
|
{
|
||||||
|
id: "arc",
|
||||||
|
label: "Arc Loader",
|
||||||
|
content: (
|
||||||
|
<div className="flex flex-col space-y-8 mt-6">
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_6_1.png"
|
||||||
|
alt="Arc Boot Loader"
|
||||||
|
caption="Arc Boot Loader"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "rr",
|
||||||
|
label: "RR Loader",
|
||||||
|
content: (
|
||||||
|
<div className="flex flex-col space-y-8 mt-6">
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_6_1.png"
|
||||||
|
alt="RR Boot Loader"
|
||||||
|
caption="RR Boot Loader"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "tinycore",
|
||||||
|
label: "TinyCore Loader",
|
||||||
|
content: (
|
||||||
|
<div className="flex flex-col space-y-8 mt-6">
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_6_1.png"
|
||||||
|
alt="TinyCore Boot Loader"
|
||||||
|
caption="TinyCore Boot Loader"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* STARTING DSM INSTALLATION */}
|
||||||
|
<section className="mb-8">
|
||||||
|
<h2 className="text-xl font-semibold mb-4 flex items-center">
|
||||||
|
<CheckCircle className="h-6 w-6 mr-3 text-green-500" />
|
||||||
|
Starting the DSM Installation
|
||||||
|
</h2>
|
||||||
|
<p className="mb-4">Once the loader is booted, you can find your Synology device using:</p>
|
||||||
|
<div className="bg-gray-100 p-4 rounded-md overflow-x-auto text-sm mb-4">
|
||||||
|
<code>https://find.synology.com</code>
|
||||||
|
</div>
|
||||||
|
<p className="mb-6">Follow the on-screen steps to complete the DSM installation.</p>
|
||||||
|
<div className="flex flex-col space-y-8">
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/install_DSM.png"
|
||||||
|
alt="DSM Setup"
|
||||||
|
caption="DSM Setup Screen"
|
||||||
|
/>
|
||||||
|
<ImageWithCaption
|
||||||
|
src="https://macrimi.github.io/ProxMenux/vm/synology/finish_install_DSM.png"
|
||||||
|
alt="Installation Complete"
|
||||||
|
caption="Installation Complete"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-8">
|
||||||
|
<h2 className="text-2xl font-semibold mb-4 flex items-center">
|
||||||
|
<Target className="h-6 w-6 mr-2 text-blue-500" />
|
||||||
|
Tips
|
||||||
|
</h2>
|
||||||
|
<ul className="list-disc pl-5 space-y-2">
|
||||||
|
<li>
|
||||||
|
Keep in mind that available options may change depending on the loader version and developer updates. If you
|
||||||
|
encounter issues during the loader creation process, consult the loader documentation. ProxMenux does not
|
||||||
|
provide support for the different loaders.
|
||||||
|
</li>
|
||||||
|
<li>Some loaders offer the possibility of configuration via web with ip:7080 or 7090.</li>
|
||||||
|
<li>
|
||||||
|
Some older DSM models may have issues recognizing disks or the network card. It is recommended to use more
|
||||||
|
recent models.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function TabGroup({ tabs }) {
|
||||||
|
const [activeTab, setActiveTab] = useState(tabs[0].id)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mt-4">
|
||||||
|
<div className="flex border-b">
|
||||||
|
{tabs.map((tab) => (
|
||||||
|
<button
|
||||||
|
key={tab.id}
|
||||||
|
onClick={() => setActiveTab(tab.id)}
|
||||||
|
className={`px-4 py-2 font-medium text-sm focus:outline-none ${
|
||||||
|
activeTab === tab.id ? "border-b-2 border-blue-500 text-blue-600" : "text-gray-500 hover:text-gray-700"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{tab.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="mt-4">{tabs.find((tab) => tab.id === activeTab)?.content}</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function ImageWithCaption({ src, alt, caption }: { src: string; alt: string; caption: string }) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center w-full max-w-[768px] mx-auto my-4">
|
||||||
|
<div className="w-full rounded-md overflow-hidden">
|
||||||
|
<Image
|
||||||
|
src={src || "/placeholder.svg"}
|
||||||
|
alt={alt}
|
||||||
|
width={768}
|
||||||
|
height={0}
|
||||||
|
style={{ height: "auto" }}
|
||||||
|
className="object-contain w-full"
|
||||||
|
sizes="(max-width: 768px) 100vw, 768px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className="mt-2 text-sm text-gray-600">{caption}</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function StepNumber({ number }: { number: number }) {
|
function StepNumber({ number }: { number: number }) {
|
||||||
@ -41,379 +560,3 @@ function StepNumber({ number }: { number: number }) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function ImageWithCaption({ src, alt, caption }: { src: string; alt: string; caption: string }) {
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center">
|
|
||||||
<div className="relative w-full h-48 md:h-64 overflow-hidden rounded-md">
|
|
||||||
<Image
|
|
||||||
src={src || "/placeholder.svg"}
|
|
||||||
alt={alt}
|
|
||||||
fill
|
|
||||||
className="object-contain"
|
|
||||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 33vw, 25vw"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<span className="mt-2 text-sm text-gray-600">{caption}</span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function SynologyVmPage() {
|
|
||||||
return (
|
|
||||||
<div className="container mx-auto px-4 py-8">
|
|
||||||
{/* Title + Icon */}
|
|
||||||
<div className="flex items-center mb-6">
|
|
||||||
<Settings className="h-8 w-8 mr-2 text-blue-500" />
|
|
||||||
<h1 className="text-2xl md:text-3xl font-bold">Create Synology DSM VM using ProxMenux</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Introduction */}
|
|
||||||
<div className="bg-gray-50 p-4 rounded-lg mb-8">
|
|
||||||
<p className="text-base md:text-lg text-black mb-4">
|
|
||||||
ProxMenux provides an automated script that creates and configures a VM to install Synology DSM (DiskStation
|
|
||||||
Manager). This script allows you to choose from three different loaders:
|
|
||||||
</p>
|
|
||||||
<ul className="list-disc list-inside mb-4 ml-4">
|
|
||||||
<li>
|
|
||||||
<strong>AuxXxilium Arc</strong> (referred to as "arc")
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>edPill rr</strong> (referred to as "rr")
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<strong>TinyCore RedPill M-shell</strong> (referred to as "tinycore")
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<p className="text-base md:text-lg text-black mb-2">
|
|
||||||
You also have the option to add a custom loader if you prefer to modify or create your own configuration.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* STEP 1 */}
|
|
||||||
<section className="mb-12 border-b pb-8">
|
|
||||||
<h2 className="text-xl font-semibold mb-4 flex items-center" id="step1">
|
|
||||||
<StepNumber number={1} />
|
|
||||||
Start the VM and Access the Main Menu
|
|
||||||
</h2>
|
|
||||||
<p className="mb-4">
|
|
||||||
Once the VM is created, start it. The first time you boot the VM, you'll access the
|
|
||||||
<strong> loader's main menu</strong> to select and configure the DSM model you want to build. Once the loader
|
|
||||||
is created, this step will be skipped unless you manually force a reconfiguration from the boot monitor.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{/* Command RR */}
|
|
||||||
<div className="bg-gray-50 p-4 rounded-lg mb-6">
|
|
||||||
<p className="mb-2">
|
|
||||||
<strong>In the case of RR</strong>, you'll need to manually enter the following command to open the menu
|
|
||||||
as shown in the image below:
|
|
||||||
</p>
|
|
||||||
<pre className="bg-gray-100 p-4 rounded-md overflow-x-auto text-sm">
|
|
||||||
<code>./menu.sh</code>
|
|
||||||
</pre>
|
|
||||||
<div className="mt-4 flex justify-center">
|
|
||||||
<div className="relative w-64 h-48 overflow-hidden rounded-md">
|
|
||||||
<Image
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_0_1.png"
|
|
||||||
alt="RR Command Example"
|
|
||||||
fill
|
|
||||||
className="object-contain"
|
|
||||||
sizes="(max-width: 768px) 100vw, 256px"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p className="text-center text-sm text-gray-600 mt-2">RR Command Example: ./menu.sh</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Example images */}
|
|
||||||
<h3 className="text-lg font-semibold mb-4">Examples of loader interfaces:</h3>
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_1_1.png"
|
|
||||||
alt="Arc Loader Interface"
|
|
||||||
caption="Arc Loader Interface"
|
|
||||||
/>
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_1_1.png"
|
|
||||||
alt="RR Loader Interface"
|
|
||||||
caption="RR Loader Interface"
|
|
||||||
/>
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_1_1.png"
|
|
||||||
alt="TinyCore Loader Interface"
|
|
||||||
caption="TinyCore Loader Interface"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* STEP 2 */}
|
|
||||||
<section className="mb-12 border-b pb-8">
|
|
||||||
<h2 className="text-xl font-semibold mb-4 flex items-center" id="step2">
|
|
||||||
<StepNumber number={2} />
|
|
||||||
Select Model
|
|
||||||
</h2>
|
|
||||||
<p className="mb-4">After loading the menu, select the Synology DSM model you want to install.</p>
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_2_1.png"
|
|
||||||
alt="Arc Model Selection"
|
|
||||||
caption="Arc Model Selection"
|
|
||||||
/>
|
|
||||||
<ImageWithCaption src="/vm/synology/rr/rr_2_2_1.png" alt="RR Model Selection" caption="RR Model Selection" />
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_2_1.png"
|
|
||||||
alt="TinyCore Model Selection"
|
|
||||||
caption="TinyCore Model Selection"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* STEP 3 */}
|
|
||||||
<section className="mb-12 border-b pb-8">
|
|
||||||
<h2 className="text-xl font-semibold mb-4 flex items-center" id="step3">
|
|
||||||
<StepNumber number={3} />
|
|
||||||
Select DSM Version
|
|
||||||
</h2>
|
|
||||||
<p className="mb-4">
|
|
||||||
After selecting the model, you need to choose the DSM version you want to install. In some loaders (such as{" "}
|
|
||||||
<strong>arc</strong>), you may encounter additional options at this stage.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="mb-8">
|
|
||||||
<h3 className="text-lg font-semibold mb-4">Arc Loader:</h3>
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_3_1.png"
|
|
||||||
alt="Arc Version Selection - Step 1"
|
|
||||||
caption="Arc Version Selection - Step 1"
|
|
||||||
/>
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_3_2.png"
|
|
||||||
alt="Arc Version Selection - Step 2"
|
|
||||||
caption="Arc Version Selection - Step 2"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-8">
|
|
||||||
<h3 className="text-lg font-semibold mb-4">RR Loader:</h3>
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_3_1.png"
|
|
||||||
alt="RR Version Selection - Step 1"
|
|
||||||
caption="RR Version Selection - Step 1"
|
|
||||||
/>
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_3_2.png"
|
|
||||||
alt="RR Version Selection - Step 2"
|
|
||||||
caption="RR Version Selection - Step 2"
|
|
||||||
/>
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_3_3.png"
|
|
||||||
alt="RR Version Selection - Step 3"
|
|
||||||
caption="RR Version Selection - Step 3"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold mb-4">TinyCore Loader:</h3>
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_3_1.png"
|
|
||||||
alt="TinyCore Version Selection - Step 1"
|
|
||||||
caption="TinyCore Version Selection - Step 1"
|
|
||||||
/>
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_3_2.png"
|
|
||||||
alt="TinyCore Version Selection - Step 2"
|
|
||||||
caption="TinyCore Version Selection - Step 2"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* STEP 4 */}
|
|
||||||
<section className="mb-12 border-b pb-8">
|
|
||||||
<h2 className="text-xl font-semibold mb-4 flex items-center" id="step4">
|
|
||||||
<StepNumber number={4} />
|
|
||||||
Select Add-Ons
|
|
||||||
</h2>
|
|
||||||
<p className="mb-4">This step allows you to add additional features or custom configurations to the loader.</p>
|
|
||||||
<p className="mb-4">
|
|
||||||
<strong>Arc</strong> gives you the option to configure automatically or manually adjust the settings.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="mb-8">
|
|
||||||
<h3 className="text-lg font-semibold mb-4">Arc Loader Add-Ons:</h3>
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_1.png"
|
|
||||||
alt="Arc Auto Configuration"
|
|
||||||
caption="Arc Auto Configuration"
|
|
||||||
/>
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_2.png"
|
|
||||||
alt="Arc Manual Configuration"
|
|
||||||
caption="Arc Manual Configuration"
|
|
||||||
/>
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_3.png"
|
|
||||||
alt="Arc SN/Mac Configuration"
|
|
||||||
caption="Arc SN/Mac Configuration"
|
|
||||||
/>
|
|
||||||
<ImageWithCaption src="/vm/synology/arc/arc_1_4_4.png" alt="Arc Sata Portmap" caption="Arc Sata Portmap" />
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_4_5.png"
|
|
||||||
alt="Arc Add-Ons Selection"
|
|
||||||
caption="Arc Add-Ons Selection"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-8">
|
|
||||||
<h3 className="text-lg font-semibold mb-4">RR Loader Add-Ons:</h3>
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
||||||
<ImageWithCaption src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_4_1.png" alt="RR Add-On Step 1" caption="RR Add-On Step 1" />
|
|
||||||
<ImageWithCaption src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_4_2.png" alt="RR Add-On Step 2" caption="RR Add-On Step 2" />
|
|
||||||
<ImageWithCaption src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_4_3.png" alt="RR Add-On Step 3" caption="RR Add-On Step 3" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold mb-4">TinyCore Loader Add-Ons:</h3>
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_1.png"
|
|
||||||
alt="TinyCore SN Configuration"
|
|
||||||
caption="TinyCore SN Configuration"
|
|
||||||
/>
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_2.png"
|
|
||||||
alt="TinyCore Random Option"
|
|
||||||
caption="TinyCore Random Option"
|
|
||||||
/>
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_3.png"
|
|
||||||
alt="TinyCore MAC Configuration"
|
|
||||||
caption="TinyCore MAC Configuration"
|
|
||||||
/>
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_4_4.png"
|
|
||||||
alt="TinyCore VM MAC"
|
|
||||||
caption="TinyCore VM MAC"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* STEP 5 */}
|
|
||||||
<section className="mb-12 border-b pb-8">
|
|
||||||
<h2 className="text-xl font-semibold mb-4 flex items-center" id="step5">
|
|
||||||
<StepNumber number={5} />
|
|
||||||
Build the Loader
|
|
||||||
</h2>
|
|
||||||
<p className="mb-4">Once you have selected the model, DSM version, and add-ons, proceed to build the loader.</p>
|
|
||||||
<p className="mb-4">
|
|
||||||
This process might take a few minutes depending on the loader and the selected configuration. To start, select
|
|
||||||
the <strong>"Build the Loader"</strong> option.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
||||||
<ImageWithCaption src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_5_1.png" alt="Arc Build Loader" caption="Arc Build Loader" />
|
|
||||||
<ImageWithCaption src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_5_1.png" alt="RR Build Loader" caption="RR Build Loader" />
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/tinycore/tinycore_3_5_1.png"
|
|
||||||
alt="TinyCore Build Loader"
|
|
||||||
caption="TinyCore Build Loader"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* STEP 6 */}
|
|
||||||
<section className="mb-12 border-b pb-8">
|
|
||||||
<h2 className="text-xl font-semibold mb-4 flex items-center" id="step6">
|
|
||||||
<StepNumber number={6} />
|
|
||||||
Boot the Loader
|
|
||||||
</h2>
|
|
||||||
<p className="mb-4">
|
|
||||||
Once the loader has been built, it will prompt you to boot. The VM will restart with the configuration you've
|
|
||||||
created and start the DSM installation.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
||||||
<ImageWithCaption src="https://macrimi.github.io/ProxMenux/vm/synology/arc/arc_1_6_1.png" alt="Arc Boot Loader" caption="Arc Boot Loader" />
|
|
||||||
<ImageWithCaption src="https://macrimi.github.io/ProxMenux/vm/synology/rr/rr_2_6_1.png" alt="RR Boot Loader" caption="RR Boot Loader" />
|
|
||||||
<ImageWithCaption
|
|
||||||
src="/vm/synology/tinycore/tinycore_3_6_1.png"
|
|
||||||
alt="TinyCore Boot Loader"
|
|
||||||
caption="TinyCore Boot Loader"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* STARTING DSM INSTALLATION */}
|
|
||||||
<section className="mb-8">
|
|
||||||
<h2 className="text-xl font-semibold mb-4 flex items-center">
|
|
||||||
<div
|
|
||||||
className="inline-flex items-center justify-center w-8 h-8 mr-3 text-white bg-green-500 rounded-full"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<span className="text-sm">✓</span>
|
|
||||||
</div>
|
|
||||||
Starting the DSM Installation
|
|
||||||
</h2>
|
|
||||||
<p className="mb-4">Once the loader is booted, you can find your Synology device using:</p>
|
|
||||||
<div className="bg-gray-100 p-4 rounded-md overflow-x-auto text-sm mb-4">
|
|
||||||
<code>https://find.synology.com</code>
|
|
||||||
</div>
|
|
||||||
<p className="mb-6">Follow the on-screen steps to complete the DSM installation.</p>
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
||||||
<ImageWithCaption src="https://macrimi.github.io/ProxMenux/vm/synology/install_DSM.png" alt="DSM Setup" caption="DSM Setup Screen" />
|
|
||||||
<ImageWithCaption
|
|
||||||
src="https://macrimi.github.io/ProxMenux/vm/synology/finish_install_DSM.png"
|
|
||||||
alt="Installation Complete"
|
|
||||||
caption="Installation Complete"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Table of Contents - Fixed on the side for larger screens */}
|
|
||||||
<div className="hidden lg:block fixed top-1/4 right-4 bg-white p-4 rounded-lg shadow-md w-64">
|
|
||||||
<h3 className="font-bold text-lg mb-2">Quick Navigation</h3>
|
|
||||||
<ul className="space-y-2">
|
|
||||||
<li>
|
|
||||||
<a href="#step1" className="text-blue-500 hover:underline">
|
|
||||||
1. Start the VM
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#step2" className="text-blue-500 hover:underline">
|
|
||||||
2. Select Model
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#step3" className="text-blue-500 hover:underline">
|
|
||||||
3. Select DSM Version
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#step4" className="text-blue-500 hover:underline">
|
|
||||||
4. Select Add-Ons
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#step5" className="text-blue-500 hover:underline">
|
|
||||||
5. Build the Loader
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#step6" className="text-blue-500 hover:underline">
|
|
||||||
6. Boot the Loader
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 209 KiB After Width: | Height: | Size: 227 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 127 KiB |
Loading…
x
Reference in New Issue
Block a user