-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathguide-hosting.html
More file actions
183 lines (166 loc) · 13.3 KB
/
Copy pathguide-hosting.html
File metadata and controls
183 lines (166 loc) · 13.3 KB
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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="本站为何是静态网站、如何做出跳转与动效、如何拥有类似 www.baidu.com 的域名并自行维护内容。" />
<title>运维说明：chainmapai.com 上线 · ChainMap AI</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="site-header">
<div class="header-inner">
<a href="index.html" class="logo">ChainMap <span class="logo-accent">AI</span></a>
<button type="button" class="nav-toggle" aria-label="打开菜单" aria-expanded="false"></button>
<nav class="nav" id="site-nav">
<a href="index.html">首页</a>
<a href="hot-topics.html">AI产业链</a>
<a href="companies.html">热门公司分析</a>
</nav>
</div>
</header>
<main class="main-article page-enter">
<article class="article-page container article-container">
<header class="article-header">
<p class="article-kicker">运维说明</p>
<h1 class="article-h1">为什么现在是“静态网站”、动效与跳转如何实现、怎样变成 www.你的域名.com</h1>
<p class="article-meta">面向个人维护 · 按步骤即可操作</p>
</header>
<div class="article-body">
<nav class="article-toc" aria-label="本页目录">
<strong class="article-toc-title">本页目录</strong>
<ol>
<li><a href="#static">为什么用静态网站</a></li>
<li><a href="#dynamic-feel">动效与跳转</a></li>
<li><a href="#path-a">路径 A：GitHub Pages + 自有域名（推荐新手）</a></li>
<li><a href="#path-b">路径 B：国内 OSS（需备案时）</a></li>
<li><a href="#maintain-detail">自己维护：从改字到发新文章（逐步）</a></li>
</ol>
</nav>
<h2 id="static">1. 为什么采用静态网站？</h2>
<p>
<strong>静态网站</strong>指服务器（或 CDN）只向访问者返回已经做好的 HTML、CSS、JS 和图片文件，不在服务器上为每个访问者临时执行复杂的数据库查询或登录逻辑。对你这种以<strong>文章与图谱介绍</strong>为主的站点，静态方案通常更简单、更便宜、加载更快，也更容易备份：整个文件夹打包带走即可。
</p>
<p>
你看到的“页面之间跳转”本质上是浏览器打开另一个 <code>*.html</code> 文件，或由本站的 JavaScript 做平滑滚动、菜单展开等——这些都不需要“动态网站”才能完成。<strong>动态网站</strong>一般指后台有数据库、用户系统、服务端渲染（如 PHP/Java/Node 每次现拼页面）等；当你需要用户注册、评论入库、电商下单时再考虑更合适。
</p>
<h2 id="dynamic-feel">2. 你要的“动态跳转”已经怎么做？</h2>
<ul>
<li><strong>多页面导航</strong>：<code>index.html</code>、<code>article-memory.html</code>、<code>guide-hosting.html</code> 之间用链接互相跳转，与百度、新浪等门户的“点菜单进不同栏目”是同一种机制。</li>
<li><strong>单页内锚点</strong>：首页里的「产业链」「投资视角」等，通过 <code>#chain</code> 这类锚点在长页面内平滑滚动。</li>
<li><strong>动效</strong>：<code>styles.css</code> 里的过渡与 <code>script.js</code> 里的菜单、滚动行为，让交互更顺，但文件仍是静态的。</li>
</ul>
<p>若以后需要博客式后台，可再升级为 <strong>GitHub Pages + Hexo/Hugo</strong> 或 <strong>WordPress 托管</strong>，那是另一条路线，本仓库不必改架构也能先跑着。</p>
<h2 id="path-a">3. 可实现的一步步路径：GitHub Pages + 自有域名</h2>
<p>下面是一条<strong>从零到能用浏览器打开你的域名</strong>的常见路线。界面名称若略有出入，以 GitHub / 域名商当前页面为准。</p>
<h3 class="article-h3">阶段一：让网站先有一个公网地址（不绑域名也能测）</h3>
<ol class="article-ol-steps article-ol-steps--nested">
<li>
<strong>注册 GitHub 账号</strong>：打开 <a href="https://github.com/signup" rel="noopener noreferrer">github.com/signup</a>，按提示完成注册并登录。
</li>
<li>
<strong>新建仓库</strong>：右上角 “+” → “New repository”。仓库名可自取（例如 <code>invest-site</code>），选 <strong>Public</strong> → Create repository。
</li>
<li>
<strong>把本站文件放进仓库</strong>（二选一）：
<ul>
<li><strong>网页上传</strong>：仓库页点 “Add file” → “Upload files”，把电脑里整个网站文件夹里的 <code>index.html</code>、<code>styles.css</code>、<code>script.js</code>、各 <code>article-*.html</code>、<code>guide-hosting.html</code> 等拖到页面，Commit changes。</li>
<li><strong>用 Git 推送</strong>（熟悉命令行时）：本机安装 Git，在网站文件夹里执行 <code>git init</code>、在 GitHub 上复制仓库地址后 <code>git remote add origin ...</code>，再 <code>git add .</code>、<code>git commit -m "init"</code>、<code>git push -u origin main</code>（若默认分支是 master 则按仓库提示）。</li>
</ul>
</li>
<li>
<strong>开启 GitHub Pages</strong>：仓库 → <strong>Settings</strong> → 左侧 <strong>Pages</strong> → Build and deployment → Source 选 <strong>Deploy from a branch</strong> → Branch 选 <code>main</code>（或 <code>master</code>）且文件夹选 <code>/ (root)</code> → Save。
</li>
<li>
<strong>等待构建并访问测试地址</strong>：几分钟后，同一 Pages 页面会显示站点地址，一般为 <code>https://你的用户名.github.io/仓库名/</code>。用浏览器打开，确认首页能显示。
</li>
</ol>
<p class="article-note">
若 404：确认仓库<strong>根目录</strong>（不是子文件夹里）有 <code>index.html</code>；GitHub 区分文件名大小写；首页地址末尾常需带仓库名路径，除非使用 <code>用户名.github.io</code> 专用仓库规则（可查 GitHub Pages 文档）。
</p>
<h3 class="article-h3">阶段二：购买域名</h3>
<ol class="article-ol-steps article-ol-steps--nested">
<li>在 <strong>阿里云、腾讯云、Cloudflare</strong> 等任一处搜索想用的名字（如 <code>zhangsan-invest.com</code>），下单并完成付款。</li>
<li>在域名控制台找到 <strong>DNS 解析 / 解析设置</strong>，准备添加记录。</li>
</ol>
<h3 class="article-h3">阶段三：把 <code>chainmapai.com</code> 绑到 GitHub Pages</h3>
<p class="article-note">
本站根目录已有 <code>CNAME</code> 文件，内容为 <code>chainmapai.com</code>。推送到 GitHub 后，在 Pages 里填同一域名即可。
</p>
<p><strong>阿里云解析（复制用）</strong></p>
<div class="article-table-wrap">
<table class="article-table">
<thead>
<tr><th>类型</th><th>主机记录</th><th>记录值</th></tr>
</thead>
<tbody>
<tr><td>A</td><td>@</td><td>185.199.108.153</td></tr>
<tr><td>A</td><td>@</td><td>185.199.109.153</td></tr>
<tr><td>A</td><td>@</td><td>185.199.110.153</td></tr>
<tr><td>A</td><td>@</td><td>185.199.111.153</td></tr>
<tr><td>CNAME</td><td>www</td><td>jeasnd.github.io</td></tr>
</tbody>
</table>
</div>
<ol class="article-ol-steps article-ol-steps--nested">
<li>
GitHub 仓库 → <strong>Settings</strong> → <strong>Pages</strong> → <strong>Custom domain</strong> 填入 <code>chainmapai.com</code> → Save。DNS 生效且证书就绪后，勾选 <strong>Enforce HTTPS</strong>。
</li>
<li>
在域名商 DNS 里新增（只绑 <code>www</code> 时）：类型 <strong>CNAME</strong>，主机记录 <strong>www</strong>，记录值填 <code>你的GitHub用户名.github.io</code>（与 GitHub Pages 说明一致）。
</li>
<li>
若还要支持<strong>根域名</strong>（<code>example.com</code> 不带 www）：在 GitHub Custom domain 中也可添加根域名；DNS 侧需按 <a href="https://docs.github.com/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site" rel="noopener noreferrer">GitHub 官方文档</a> 配置 <strong>A 记录</strong>指向文档列出的 IP，或使用域名商提供的 <strong>ALIAS/ANAME</strong> 指到 <code>用户名.github.io</code>。IP 以文档为准，会更新。
</li>
<li>
<strong>等待生效</strong>：DNS 传播通常数分钟至数小时。成功后用 <code>https://www.你的域名.com</code> 应能打开与 GitHub Pages 相同的站点。
</li>
</ol>
<h2 id="path-b">4. 路径 B：国内 OSS + 备案（概要）</h2>
<p>若主要访客在中国大陆且使用<strong>国内 OSS 静态网站托管或国内节点 CDN</strong>，通常需要 <strong>ICP 备案</strong>。流程为：在阿里云/腾讯云等购买域名与大陆可用 OSS → 按控制台指引提交备案 → 通过后上传本仓库全部静态文件到 Bucket 并开启静态网站托管 → 在<strong>该厂商 DNS</strong> 把域名解析到 OSS 网站端点。细则以服务商当下页面为准。</p>
<h2 id="maintain-detail">5. 自己维护：从改一句话到发一篇新文章（逐步）</h2>
<p>以下以 <strong>GitHub</strong> 为例；若你用手动上传到 OSS，把 “push 后自动更新” 理解为 “上传覆盖文件”。</p>
<h3 class="article-h3">5.1 只改首页或某篇文章里的文字</h3>
<ol class="article-ol-steps article-ol-steps--nested">
<li>用 Cursor 或 VS Code 打开你的网站文件夹（与 <code>index.html</code> 同级）。</li>
<li>打开要改的 HTML，例如 <code>index.html</code> 或 <code>article-memory.html</code>。</li>
<li>只改标签之间的正文，避免删掉 <code><div></code>、<code></p></code> 等成对标签。</li>
<li>保存（Ctrl+S）。</li>
<li><strong>用 Git 时</strong>：在该文件夹打开终端，执行 <code>git add .</code> → <code>git commit -m "更新文案"</code> → <code>git push</code>。约 1～3 分钟后刷新线上地址。</li>
<li><strong>用网页编辑时</strong>：在 GitHub 打开对应文件 → 铅笔 Edit → 保存 Commit。</li>
</ol>
<h3 class="article-h3">5.2 新增一篇专题文章（推荐按此顺序做）</h3>
<ol class="article-ol-steps article-ol-steps--nested">
<li>复制 <code>article-memory.html</code>，重命名为新英文名，例如 <code>article-chip.html</code>（勿用空格与中文文件名）。</li>
<li>打开新文件，修改：<code><title></code>、<code>meta description</code>、<code><h1></code>、<code>article-body</code> 内正文；目录 <code>article-toc</code> 里每个 <code>href="#xxx"</code> 与正文里 <code><h2 id="xxx"></code> 一一对应。</li>
<li>打开 <code>index.html</code>，在 <code><div class="article-cards"></code> 里复制一整块 <code><a class="article-card" ...></code>，改 <code>href="article-chip.html"</code> 与卡片标题、摘要。</li>
<li>（可选）在其它页面的 <code><nav class="nav"></code> 里加一条指向新文章的链接。</li>
<li>本地双击 <code>index.html</code> 用浏览器点链接自测。</li>
<li><code>git add</code> / <code>commit</code> / <code>git push</code>（或上传全部变更文件）。</li>
</ol>
<h3 class="article-h3">5.3 两个原则</h3>
<ul>
<li><strong>相对路径</strong>：链接写 <code>href="article-chip.html"</code>、<code>href="styles.css"</code>，不写本机盘符。</li>
<li><strong>备份</strong>：大改前复制整个网站文件夹一份。</li>
</ul>
<p class="article-note">
本站页面均使用相对路径；保持文件夹结构不变，整包上传到托管根目录即可。
</p>
</div>
<footer class="article-footer">
<a class="btn-secondary" href="index.html">← 返回首页</a>
<a class="btn-secondary" href="article-memory.html">内存专题 →</a>
</footer>
</article>
</main>
<footer class="site-footer">
<div class="container footer-inner">
<p>© 2026 chainmapai.com · ChainMap AI</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>