https://zhouwy.top/categories/%E5%8D%9A%E5%AE%A2/Recent content in 博客 on WY 的技术博客Hugozh-cnWed, 30 Apr 2025 00:00:00 +0000https://zhouwy.top/posts/hexo-%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E8%BF%87%E7%A8%8B%E8%AE%B0%E5%BD%95/Wed, 30 Apr 2025 00:00:00 +0000https://zhouwy.top/posts/hexo-%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E8%BF%87%E7%A8%8B%E8%AE%B0%E5%BD%95/<h1 id="hexo-博客搭建过程记录">Hexo 博客搭建过程记录</h1> <p>Hexo 是一个基于 Node.js 的静态博客框架，生成速度快、主题丰富、部署灵活。这篇文章记录了我从零搭建 Hexo 博客的完整过程，包括环境配置、主题选择、插件安装、自动化部署以及踩坑记录。</p> <h2 id="环境准备">环境准备</h2> <h3 id="安装-nodejs-与-npm">安装 Node.js 与 npm</h3> <p>Hexo 依赖 Node.js 运行，推荐使用 LTS 版本：</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span><span style="color:#75715e"># 确认版本</span> </span></span><span style="display:flex;"><span>node -v <span style="color:#75715e"># v18+ 即可</span> </span></span><span style="display:flex;"><span>npm -v </span></span></code></pre></div><p>如果网络环境受限（如国内），建议配置 npm 镜像源加速：</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>npm config set registry https://registry.npmmirror.com </span></span></code></pre></div><h3 id="安装-hexo-cli">安装 Hexo CLI</h3> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>npm install -g hexo-cli </span></span></code></pre></div><p>安装完成后就可以用 <code>hexo</code> 命令初始化博客项目了。</p> <h2 id="初始化博客">初始化博客</h2> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>hexo init myblog </span></span><span style="display:flex;"><span>cd myblog </span></span><span style="display:flex;"><span>npm install </span></span></code></pre></div><p><code>hexo init</code> 会自动生成博客骨架目录：</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-text" data-lang="text"><span style="display:flex;"><span>myblog/ </span></span><span style="display:flex;"><span>├── _config.yml # 博客配置文件（核心） </span></span><span style="display:flex;"><span>├── package.json </span></span><span style="display:flex;"><span>├── scaffolds/ # 模板文件 </span></span><span style="display:flex;"><span>├── source/ # 源文件（文章、图片等） </span></span><span style="display:flex;"><span>│ └── _posts/ # 文章目录 </span></span><span style="display:flex;"><span>└── themes/ # 主题目录 </span></span></code></pre></div><h3 id="核心配置-_configyml">核心配置 _config.yml</h3> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-yml" data-lang="yml"><span style="display:flex;"><span><span style="color:#f92672">title</span>: <span style="color:#ae81ff">我的博客</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">subtitle</span>: <span style="color:#ae81ff">记录技术与思考</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">author</span>: <span style="color:#ae81ff">Your Name</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">language</span>: <span style="color:#ae81ff">zh-CN</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">timezone</span>: <span style="color:#ae81ff">Asia/Shanghai</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e"># 域名与 URL</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">url</span>: <span style="color:#ae81ff">https://chinazhouwy.github.io</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">root</span>: <span style="color:#ae81ff">/</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">permalink</span>: :<span style="color:#ae81ff">year/:month/:day/:title/</span> </span></span></code></pre></div><h2 id="主题选择hacker">主题选择：Hacker</h2> <p>在主题选择上，我倾向于<strong>简洁风</strong>。Hacker 主题颜色鲜明、排版专注，适合技术博客。</p> <p>安装方式：</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>git clone https://github.com/iissnan/hexo-theme-hacker themes/hacker </span></span></code></pre></div><p>在 <code>_config.yml</code> 中启用：</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-yml" data-lang="yml"><span style="display:flex;"><span><span style="color:#f92672">theme</span>: <span style="color:#ae81ff">hacker</span> </span></span></code></pre></div><p>主题通常有自己的独立配置文件 <code>themes/hacker/_config.yml</code>，可以定制导航栏、社交链接、评论系统等。</p> <h3 id="主题定制要点">主题定制要点</h3> <ul> <li><strong>导航栏</strong>：添加&quot;首页&quot;、&ldquo;归档&rdquo;、&ldquo;关于&quot;等页面</li> <li><strong>社交链接</strong>：配置 GitHub、知乎等社交账号的图标链接</li> <li><strong>评论系统</strong>：集成 Gitalk 或 Valine 等无后端评论方案</li> </ul> <h2 id="写文章与本地预览">写文章与本地预览</h2> <p>创建新文章：</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>hexo new <span style="color:#e6db74">&#34;文章标题&#34;</span> </span></span></code></pre></div><p>该命令会在 <code>source/_posts/</code> 下生成一个 Markdown 文件，文件头包含 Front-matter：</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-yml" data-lang="yml"><span style="display:flex;"><span>--- </span></span><span style="display:flex;"><span><span style="color:#f92672">title</span>: <span style="color:#ae81ff">文章标题</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">date</span>: <span style="color:#e6db74">2025-04-30 09:24:55</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">tags</span>: </span></span><span style="display:flex;"><span> - <span style="color:#ae81ff">Hexo</span> </span></span><span style="display:flex;"><span>--- </span></span></code></pre></div><p>本地预览：</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>hexo server </span></span><span style="display:flex;"><span><span style="color:#75715e"># 或指定端口</span> </span></span><span style="display:flex;"><span>hexo server -p <span style="color:#ae81ff">4000</span> </span></span></code></pre></div><p>浏览器打开 <code>http://localhost:4000</code> 即可查看。</p> <h2 id="额外插件配置">额外插件配置</h2> <h3 id="自动部署插件">自动部署插件</h3> <p>Hexo 生成的静态文件需要部署到服务器或 Pages 服务。最方便的方式是使用 <code>hexo-deployer-git</code> 插件，直接推送到 GitHub Pages：</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>npm install hexo-deployer-git --save </span></span></code></pre></div><p>在 <code>_config.yml</code> 中添加：</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-yml" data-lang="yml"><span style="display:flex;"><span><span style="color:#f92672">deploy</span>: </span></span><span style="display:flex;"><span> <span style="color:#f92672">type</span>: <span style="color:#ae81ff">git</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">repo</span>: <span style="color:#ae81ff">git@github.com:chinazhouwy/chinazhouwy.github.io</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">branch</span>: <span style="color:#ae81ff">main</span> </span></span></code></pre></div><p>部署命令：</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>hexo clean <span style="color:#f92672">&amp;&amp;</span> hexo generate <span style="color:#f92672">&amp;&amp;</span> hexo deploy </span></span><span style="display:flex;"><span><span style="color:#75715e"># 简写：hexo clean &amp;&amp; hexo g &amp;&amp; hexo d</span> </span></span></code></pre></div><ul> <li><code>hexo clean</code>：清除缓存</li> <li><code>hexo g</code>：生成静态文件</li> <li><code>hexo d</code>：部署到远端</li> </ul> <h3 id="自动摘要插件不推荐已关闭">自动摘要插件（不推荐，已关闭）</h3> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>npm install hexo-excerpt --save </span></span></code></pre></div><p>这个插件会自动从文章正文截取摘要。但自动截取往往不够准确，不如手动在 Front-matter 中设置 <code>excerpt</code> 字段或使用 `</p>