diamondnode/index.html at main · Genesis-Conductor-Engine/diamondnode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Self-Hosted EdgeOne Pages MCP Server</title>
    <meta name="description" content="Self-hosted MCP solution for AI assistants to deploy and manage static websites" />
    <!-- Tailwind runtime -->
    <script src="https://assets.edgeone.site/js/tailwindcss@4.1.7.js"></script>
    <style>
      /* minimal reset for font smoothing */
      html, body { height: 100%; }
    </style>
  </head>
  <body>
    <main class="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100">
      <!-- Hero Section -->
      <section class="pt-20 px-6 max-w-7xl mx-auto">
        <div class="text-center">
          <h1 class="text-4xl md:text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600 mb-6">
            Self-Hosted EdgeOne Pages MCP Server
          </h1>
          <p class="text-xl md:text-2xl text-slate-700 max-w-3xl mx-auto mb-10">
            A self-hosted MCP solution that enables AI assistants to deploy and manage your static websites directly
          </p>
          <div class="flex justify-center mb-8">
            <a href="https://edgeone.ai/pages/new?from=github&template=self-hosted-pages-mcp" target="_blank" class="inline-block">
              <img src="https://cdnstatic.tencentcs.com/edgeone/pages/deploy.svg" alt="Deploy with EdgeOne Pages" class="hover:opacity-80 transition-opacity">
            </a>
          </div>
        </div>
      </section>

      <!-- Features Section -->
      <section class="py-16 px-6 max-w-7xl mx-auto">
        <h2 class="text-3xl font-bold text-center mb-12 text-slate-800">Key Features</h2>
        <div class="grid md:grid-cols-3 gap-8">
          <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
            </div>
            <h3 class="text-xl font-semibold mb-2 text-slate-800">Self-Hosted Solution</h3>
            <p class="text-slate-600">Deploy your own MCP server with complete control and customization</p>
          </div>

          <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <h3 class="text-xl font-semibold mb-2 text-slate-800">AI Assistant Integration</h3>
            <p class="text-slate-600">Enable AI assistants to directly deploy and manage websites through MCP protocol</p>
          </div>

          <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
              </svg>
            </div>
            <h3 class="text-xl font-semibold mb-2 text-slate-800">Ready to Use</h3>
            <p class="text-slate-600">Simple setup with EdgeOne Pages KV storage, ready to use out of the box</p>
          </div>
        </div>
      </section>

      <!-- How It Works Section -->
      <section class="py-16 px-6 max-w-7xl mx-auto">
        <h2 class="text-3xl font-bold text-center mb-12 text-slate-800">How It Works</h2>
        <div class="grid md:grid-cols-2 gap-10 items-center">
          <div class="order-2 md:order-1">
            <ol class="space-y-6">
              <li class="flex">
                <div class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-purple-600 text-white font-bold mr-4">1</div>
                <div>
                  <h3 class="font-semibold text-lg text-slate-800 mb-1">One-Click Deploy</h3>
                  <p class="text-slate-600">Click the deploy button to quickly set up your MCP server on EdgeOne Pages</p>
                </div>
              </li>
              <li class="flex">
                <div class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-purple-600 text-white font-bold mr-4">2</div>
                <div>
                  <h3 class="font-semibold text-lg text-slate-800 mb-1">Configure MCP Client</h3>
                  <p class="text-slate-600">Add your server URL to your MCP client configuration file</p>
                </div>
              </li>
              <li class="flex">
                <div class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-purple-600 text-white font-bold mr-4">3</div>
                <div>
                  <h3 class="font-semibold text-lg text-slate-800 mb-1">Start Managing Websites</h3>
                  <p class="text-slate-600">Your AI assistant can now deploy and manage static websites directly</p>
                </div>
              </li>
            </ol>
          </div>
          <div class="order-1 md:order-2">
            <div class="bg-white p-6 rounded-xl shadow-lg border border-slate-200">
              <div class="flex items-center mb-4">
                <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                <div class="w-3 h-3 rounded-full bg-green-500"></div>
              </div>
              <div class="font-mono text-sm bg-slate-100 p-4 rounded-lg text-slate-800 overflow-x-auto">
                <div class="text-purple-600">// Configure MCP Server</div>
                <div class="mt-2">{</div>
                <div class="mt-2 ml-4">"mcpServers": {</div>
                <div class="mt-2 ml-8">"edgeone-pages": {</div>
                <div class="mt-2 ml-12">"url": "https://your-domain.com/mcp-server"</div>
                <div class="mt-2 ml-8">}</div>
                <div class="mt-2 ml-4">}</div>
                <div class="mt-2">}</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- CTA Section -->
      <section class="py-16 px-6 max-w-7xl mx-auto">
        <div class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl p-10 text-center shadow-xl">
          <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Deploy Your MCP Server Now</h2>
          <p class="text-lg text-white/90 max-w-2xl mx-auto mb-8">Set up your self-hosted MCP server and enable AI assistants to manage your websites seamlessly</p>
          <div class="flex flex-col md:flex-row gap-4 justify-center">
            <a href="https://edgeone.ai/pages/new?from=github&template=self-hosted-pages-mcp" target="_blank" class="bg-white text-purple-700 font-medium py-3 px-8 rounded-full shadow-lg hover:shadow-xl hover:bg-gray-100 transition-all duration-300">Deploy Now</a>
            <a href="https://pages.edgeone.ai/document/kv-storage" target="_blank" class="bg-transparent border-2 border-white text-white font-medium py-3 px-8 rounded-full shadow-lg hover:shadow-xl hover:bg-white/10 transition-all duration-300">Setup Guide</a>
          </div>
        </div>
      </section>

      <!-- Footer -->
      <footer class="py-8 px-6 border-t border-slate-200">
        <div class="max-w-7xl mx-auto text-center">
          <p class="text-slate-500">&copy; <span id="year"></span> EdgeOne Pages.</p>
        </div>
      </footer>
    </main>

    <script>
      document.getElementById('year').textContent = new Date().getFullYear();
    </script>
  </body>
</html>