|
27 | 27 | <meta property="og:description" content="工具：Cloudflare+GitHub+Hexo FluidHexohexo 是一个快速、简洁，而且功能强大的静态博客框架。我们可以使用 Markdown 编写博客文章，然后 hexo 帮我们把 Markdown 文件渲染成静态 HTML 页面。因此 hexo 非常适合用来搭建技术类博客，以及项目文档和个人网站。 需要安装node.js依赖 github托管将博客项目托管到github仓库，并使"> |
28 | 28 | <meta property="og:locale" content="zh_CN"> |
29 | 29 | <meta property="article:published_time" content="2023-04-01T00:00:00.000Z"> |
30 | | -<meta property="article:modified_time" content="2026-05-31T19:00:17.046Z"> |
| 30 | +<meta property="article:modified_time" content="2026-05-31T19:45:55.435Z"> |
31 | 31 | <meta property="article:author" content="Jimi"> |
32 | 32 | <meta property="article:tag" content="Hexo"> |
33 | 33 | <meta property="article:tag" content="博客搭建"> |
|
228 | 228 | <span class="post-meta mr-2"> |
229 | 229 | <i class="iconfont icon-chart"></i> |
230 | 230 |
|
231 | | - 656 字 |
| 231 | + 765 字 |
232 | 232 |
|
233 | 233 | </span> |
234 | 234 |
|
|
239 | 239 |
|
240 | 240 |
|
241 | 241 |
|
242 | | - 6 分钟 |
| 242 | + 7 分钟 |
243 | 243 |
|
244 | 244 | </span> |
245 | 245 |
|
@@ -290,45 +290,58 @@ <h2 id="Cloudflare"><a href="#Cloudflare" class="headerlink" title="Cloudflare"> |
290 | 290 | <h2 id="修改Hexo主题"><a href="#修改Hexo主题" class="headerlink" title="修改Hexo主题"></a>修改Hexo主题</h2><p>我选择Fluid主题，再加一些个性化的设计，大家可以自行选择。</p> |
291 | 291 | <h2 id="添加评论功能"><a href="#添加评论功能" class="headerlink" title="添加评论功能"></a>添加评论功能</h2><p>使用github utterances插件</p> |
292 | 292 | <h2 id="md中添加截图"><a href="#md中添加截图" class="headerlink" title="md中添加截图"></a>md中添加截图</h2><p>cursor中使用了Paste Image插件。<br>F1截图之后，Ctrl+Alt+V,直接粘贴到特定目录，并在当前md文档中引用该图片。</p> |
293 | | -<h1 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h1><h2 id="发布新文章"><a href="#发布新文章" class="headerlink" title="发布新文章"></a>发布新文章</h2><h3 id="方式一：发布语雀原生导出的-md"><a href="#方式一：发布语雀原生导出的-md" class="headerlink" title="方式一：发布语雀原生导出的 md"></a>方式一：发布语雀原生导出的 md</h3><p>例如现在有一个语雀导出的文件 <code>bloga.md</code>，要作为 2026 年 5 月的文章发布。</p> |
294 | | -<p>1.将 <code>bloga.md</code> 放到对应月份目录：</p> |
| 293 | +<h2 id="多端同步发表blog"><a href="#多端同步发表blog" class="headerlink" title="多端同步发表blog"></a>多端同步发表blog</h2><h3 id="从source下载源码"><a href="#从source下载源码" class="headerlink" title="从source下载源码"></a>从source下载源码</h3><p>在新的电脑上维护博客时，只需要下载 <code>source</code> 分支，不需要手动下载 <code>main</code> 分支。<code>source</code> 分支保存 Hexo 全部源码，<code>main</code> 分支由 <code>hexo deploy</code> 自动更新，用来展示最终网页。</p> |
| 294 | +<p>第一次在新电脑上执行：</p> |
| 295 | +<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs stylus">git clone -<span class="hljs-selector-tag">b</span> <span class="hljs-selector-tag">source</span> git@github<span class="hljs-selector-class">.com</span>:Jimi-Lab/Jimi-Lab<span class="hljs-selector-class">.github</span><span class="hljs-selector-class">.io</span><span class="hljs-selector-class">.git</span> my-blog<br>cd my-blog<br>npm install<br></code></pre></td></tr></table></figure> |
| 296 | + |
| 297 | +<p>如果是在 Windows 上使用 Git，建议额外开启长路径支持：</p> |
| 298 | +<figure class="highlight arduino"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs arduino">git config --global core.longpaths <span class="hljs-literal">true</span><br>git config core.longpaths <span class="hljs-literal">true</span><br></code></pre></td></tr></table></figure> |
| 299 | + |
| 300 | +<p>以后每次开始写文章前，先同步最新源码：</p> |
| 301 | +<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs bash"><span class="hljs-built_in">cd</span> /path/to/my-blog<br>git checkout <span class="hljs-built_in">source</span><br>git pull<br></code></pre></td></tr></table></figure> |
| 302 | + |
| 303 | + |
| 304 | + |
| 305 | + |
| 306 | +<h3 id="更新blogs"><a href="#更新blogs" class="headerlink" title="更新blogs"></a>更新blogs</h3><p>以语雀原生导出的 <code>bloga.md</code> 为例，如果这篇文章属于 2026 年 5 月，就先把文件放到：</p> |
295 | 307 | <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash"><span class="hljs-built_in">source</span>/_posts/2026/05/bloga.md<br></code></pre></td></tr></table></figure> |
296 | 308 |
|
297 | | -<p>2.进入 Hexo 项目根目录，执行导入命令：</p> |
298 | | -<figure class="highlight applescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs applescript">cd /path/<span class="hljs-keyword">to</span>/<span class="hljs-keyword">my</span>-blog<br>npm <span class="hljs-built_in">run</span> import:yuque<br></code></pre></td></tr></table></figure> |
| 309 | +<p>然后在 Hexo 项目根目录执行：</p> |
| 310 | +<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs routeros">cd /path/<span class="hljs-keyword">to</span>/my-blog<br>npm <span class="hljs-built_in">run</span> import:yuque<br>npm <span class="hljs-built_in">run</span> verify:posts<br></code></pre></td></tr></table></figure> |
299 | 311 |
|
300 | | -<p>这条命令会自动完成以下事情：</p> |
| 312 | +<p>这两条命令会完成：</p> |
301 | 313 | <ul> |
302 | 314 | <li>可以一次处理多篇md</li> |
303 | 315 | <li>将裸 md 转成文章包结构：<code>source/_posts/2026/05/bloga/bloga.md</code></li> |
304 | | -<li>创建图片目录：<code>source/_posts/2026/05/bloga/img/</code></li> |
305 | | -<li>下载语雀 CDN 图片到 <code>img/</code></li> |
306 | | -<li>将 md 里的图片引用改成 <code>img/...</code></li> |
307 | | -<li>自动补充头信息：<code>title</code>、<code>date</code>、<code>categories</code>、<code>tags</code></li> |
| 316 | +<li>将远程图片下载到同级 <code>img/</code> 目录</li> |
| 317 | +<li>将 md 中的图片引用统一改成 <code>img/...</code></li> |
| 318 | +<li>检查是否还有远程图片、旧图片路径、缺失图片、裸 md 等问题</li> |
308 | 319 | </ul> |
309 | | -<p>3.导入后检查文章：</p> |
310 | | -<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs routeros">npm <span class="hljs-built_in">run</span> verify:posts<br></code></pre></td></tr></table></figure> |
311 | | - |
312 | | -<p>如果校验通过，再打开：</p> |
| 320 | +<p>校验通过后，打开生成后的文章 md，手动修改分类和标签：</p> |
313 | 321 | <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash"><span class="hljs-built_in">source</span>/_posts/2026/05/bloga/bloga.md<br></code></pre></td></tr></table></figure> |
314 | 322 |
|
315 | | -<p>把 <code>categories: [xx]</code> 和 <code>tags: xxx</code> 改成实际分类和标签。</p> |
316 | | -<p>4.本地预览：</p> |
317 | | -<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs routeros">npm <span class="hljs-built_in">run</span> clean<br>npm <span class="hljs-built_in">run</span> build<br>npm <span class="hljs-built_in">run</span> server<br></code></pre></td></tr></table></figure> |
| 323 | +<p>需要重点修改：</p> |
| 324 | +<figure class="highlight subunit"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs subunit">categories: [xx]<br><span class="hljs-keyword">tags:</span><br> - xxx<br></code></pre></td></tr></table></figure> |
318 | 325 |
|
319 | | -<p>浏览器打开：</p> |
320 | | -<figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs dts"><span class="hljs-symbol">http:</span><span class="hljs-comment">//localhost:4000/</span><br></code></pre></td></tr></table></figure> |
321 | 326 |
|
322 | | -<p>5.确认无误后发布：</p> |
323 | | -<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs routeros">npm <span class="hljs-built_in">run</span> clean<br>npm <span class="hljs-built_in">run</span> build<br>npm <span class="hljs-built_in">run</span> deploy<br></code></pre></td></tr></table></figure> |
324 | 327 |
|
325 | | -<h3 id="方式二：手写新文章"><a href="#方式二：手写新文章" class="headerlink" title="方式二：手写新文章"></a>方式二：手写新文章</h3><p>在 Hexo 项目根目录下执行：</p> |
326 | | -<figure class="highlight actionscript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs actionscript">hexo <span class="hljs-keyword">new</span> <span class="hljs-string">"Hello World"</span><br></code></pre></td></tr></table></figure> |
327 | 328 |
|
328 | | -<p>该命令会生成：</p> |
329 | | -<figure class="highlight gradle"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs gradle"><span class="hljs-keyword">source</span><span class="hljs-regexp">/_posts/YYYY</span><span class="hljs-regexp">/MM/</span>Hello-World/Hello-World.md<br></code></pre></td></tr></table></figure> |
| 329 | +<h3 id="Push至github-source-branch"><a href="#Push至github-source-branch" class="headerlink" title="Push至github source branch"></a>Push至github source branch</h3><p>文章导入和分类标签确认后，先把源码同步到 GitHub 的 <code>source</code> 分支：</p> |
| 330 | +<figure class="highlight avrasm"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs avrasm">git status<br>git <span class="hljs-keyword">add</span> -A<br>git commit -m <span class="hljs-string">"update blog source"</span><br>git <span class="hljs-keyword">push</span><br></code></pre></td></tr></table></figure> |
330 | 331 |
|
331 | | -<p>每篇文章独立一个文件夹，文章图片放在同级 <code>img/</code> 目录，md 中统一使用 <code>img/xxx.png</code>。</p> |
| 332 | + |
| 333 | +<p>本地预览：</p> |
| 334 | +<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs routeros">npm <span class="hljs-built_in">run</span> clean<br>npm <span class="hljs-built_in">run</span> build<br>npm <span class="hljs-built_in">run</span> server<br></code></pre></td></tr></table></figure> |
| 335 | + |
| 336 | + |
| 337 | +<p>生成并发布网页：</p> |
| 338 | +<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs routeros">npm <span class="hljs-built_in">run</span> deploy:site<br></code></pre></td></tr></table></figure> |
| 339 | + |
| 340 | +<p>这里需要区分：</p> |
| 341 | +<ul> |
| 342 | +<li><code>git push</code>：保存源码到 <code>source</code> 分支，方便 Windows / Mac / Linux 多端同步</li> |
| 343 | +<li><code>npm run deploy:site</code>：依次执行 <code>clean</code>、<code>build</code>、<code>deploy</code>，把 Hexo 生成后的静态网页发布到 <code>main</code> 分支</li> |
| 344 | +</ul> |
332 | 345 | <hr> |
333 | 346 | <p>最终URL：<br>github：<a href="https://jimi-lab.github.io/">https://jimi-lab.github.io/</a><br>cloudflare：<a target="_blank" rel="noopener" href="https://jimi-lab-github-io.pages.dev/">https://jimi-lab-github-io.pages.dev/</a></p> |
334 | 347 | <p>最终效果图如下：<br><img src = "/2023/04/01/搭建个人博客/img/background.png"></p> |
|
0 commit comments