https://qh.1357810.xyz/tags/baseurl/ Recent content in BaseUrl on Logan的博客 Hugo -- gohugo.io zh-cn logan Wed, 10 Apr 2024 00:00:00 +0800 https://qh.1357810.xyz/articles/with-hugo/hugo-baseurl/ Wed, 10 Apr 2024 00:00:00 +0800 https://qh.1357810.xyz/articles/with-hugo/hugo-baseurl/ <img src="https://logan.1357810.xyz/cover/pic_075.jpg" alt="Featured image of post hugo博客-配置baseUrl的坑" /><h1 id="hugo博客-配置baseurl的坑"> <a href="#hugo%e5%8d%9a%e5%ae%a2-%e9%85%8d%e7%bd%aebaseurl%e7%9a%84%e5%9d%91" class="header-anchor"></a> hugo博客 配置baseUrl的坑 </h1><h2 id="本地启动"> <a href="#%e6%9c%ac%e5%9c%b0%e5%90%af%e5%8a%a8" class="header-anchor"></a> 本地启动 </h2><ul> <li>不管配置文件怎么改，默认的<code>baseUrl</code>都为<code>localhost</code>，bind的ip为<code>127.0.0.1</code>;</li> <li>生成的public里的html中的url都不会是你配置文件里的<code>baseUrl</code></li> <li>-D包含草稿</li> </ul> <div class="logan-code-block"> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-0-1"><a class="lnlinks" href="#hl-0-1">1</a> </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo server -D</span></span></code></pre></td></tr></table> </div> </div> <div class="code-scroll" aria-label="代码块滚动工具栏"> <button class="code-scroll-left iconfont-logan icon-logan-circle-left-solid" aria-label="向左滚动"></button> <button class="code-scroll-right iconfont-logan icon-logan-circle-right-solid" aria-label="向右滚动"></button> </div> <div class="code-tools" aria-label="代码块工具栏"> <div class="copy-text">Copied!</div> <button class="copy-code-button iconfont-logan icon-logan-copy-round3" aria-label="复制"></button> <button class="my-code-fold iconfont-logan icon-logan-circle-chevron-down-solid expand1" aria-label="折叠"></button> </div> </div> <h2 id="除非在后面加上-baseurl"> <a href="#%e9%99%a4%e9%9d%9e%e5%9c%a8%e5%90%8e%e9%9d%a2%e5%8a%a0%e4%b8%8a-baseurl" class="header-anchor"></a> 除非在后面加上 &ndash;baseURL </h2> <div class="logan-code-block"> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-1-1"><a class="lnlinks" href="#hl-1-1">1</a> </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo server -D --baseURL http://www.xxx.com/</span></span></code></pre></td></tr></table> </div> </div> <div class="code-scroll" aria-label="代码块滚动工具栏"> <button class="code-scroll-left iconfont-logan icon-logan-circle-left-solid" aria-label="向左滚动"></button> <button class="code-scroll-right iconfont-logan icon-logan-circle-right-solid" aria-label="向右滚动"></button> </div> <div class="code-tools" aria-label="代码块工具栏"> <div class="copy-text">Copied!</div> <button class="copy-code-button iconfont-logan icon-logan-copy-round3" aria-label="复制"></button> <button class="my-code-fold iconfont-logan icon-logan-circle-chevron-down-solid expand1" aria-label="折叠"></button> </div> </div> <h2 id="启动局域网连接"> <a href="#%e5%90%af%e5%8a%a8%e5%b1%80%e5%9f%9f%e7%bd%91%e8%bf%9e%e6%8e%a5" class="header-anchor"></a> 启动局域网连接 </h2> <div class="logan-code-block"> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-2-1"><a class="lnlinks" href="#hl-2-1">1</a> </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo server -D --bind<span class="o">=</span>0.0.0.0 --port<span class="o">=</span><span class="m">1313</span></span></span></code></pre></td></tr></table> </div> </div> <div class="code-scroll" aria-label="代码块滚动工具栏"> <button class="code-scroll-left iconfont-logan icon-logan-circle-left-solid" aria-label="向左滚动"></button> <button class="code-scroll-right iconfont-logan icon-logan-circle-right-solid" aria-label="向右滚动"></button> </div> <div class="code-tools" aria-label="代码块工具栏"> <div class="copy-text">Copied!</div> <button class="copy-code-button iconfont-logan icon-logan-copy-round3" aria-label="复制"></button> <button class="my-code-fold iconfont-logan icon-logan-circle-chevron-down-solid expand1" aria-label="折叠"></button> </div> </div> <ul> <li>所以本地开发测试时，不需要关心<code>baseUrl</code>，server启动时就一定是<code>localhost</code></li> </ul> <h2 id="本地或服务器打包"> <a href="#%e6%9c%ac%e5%9c%b0%e6%88%96%e6%9c%8d%e5%8a%a1%e5%99%a8%e6%89%93%e5%8c%85" class="header-anchor"></a> 本地或服务器打包 </h2><ul> <li>打包时，hugo会严格按照配置文件中的<code>baseUrl</code>创建静态页面，与<code>--environment</code>无关</li> <li><code>--gc</code>构建站点时会自动执行垃圾回收;<code>--minify</code>对输出的 HTML、CSS 和 JavaScript 进行压缩和优化</li> </ul> <div class="logan-code-block"> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-3-1"><a class="lnlinks" href="#hl-3-1">1</a> </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo -D --gc --minify</span></span></code></pre></td></tr></table> </div> </div> <div class="code-scroll" aria-label="代码块滚动工具栏"> <button class="code-scroll-left iconfont-logan icon-logan-circle-left-solid" aria-label="向左滚动"></button> <button class="code-scroll-right iconfont-logan icon-logan-circle-right-solid" aria-label="向右滚动"></button> </div> <div class="code-tools" aria-label="代码块工具栏"> <div class="copy-text">Copied!</div> <button class="copy-code-button iconfont-logan icon-logan-copy-round3" aria-label="复制"></button> <button class="my-code-fold iconfont-logan icon-logan-circle-chevron-down-solid expand1" aria-label="折叠"></button> </div> </div> <h2 id="服务器多环境打包"> <a href="#%e6%9c%8d%e5%8a%a1%e5%99%a8%e5%a4%9a%e7%8e%af%e5%a2%83%e6%89%93%e5%8c%85" class="header-anchor"></a> 服务器多环境打包 </h2><p>我的博客，同一套代码在<code>github pages</code>和<code>vercel</code>上都有部署,分别是不同的域名，所以就需要区分两个环境的<code>baseUrl</code>,我是这样做的：</p> <ul> <li>把原本的<code>hugo.yaml</code>当作是<code>vercel</code> 的配置，复制原本的配置为<code>hugo-git.yaml</code>当作<code>github pages</code>的配置</li> <li>两个文件只有<code>baseUrl</code>不同</li> <li>在启动Hugo打包的时候，需要加具体的配置文件名参数</li> </ul> <div class="logan-code-block"> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-4-1"><a class="lnlinks" href="#hl-4-1">1</a> </span><span class="lnt" id="hl-4-2"><a class="lnlinks" href="#hl-4-2">2</a> </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo -D --gc --minify --config hugo.yaml <span class="c1"># 在vercel上使用，默认为vercel</span> </span></span><span class="line"><span class="cl">hugo -D --gc --minify --config hugo-git.yaml <span class="c1">#在github action中使用</span></span></span></code></pre></td></tr></table> </div> </div> <div class="code-scroll" aria-label="代码块滚动工具栏"> <button class="code-scroll-left iconfont-logan icon-logan-circle-left-solid" aria-label="向左滚动"></button> <button class="code-scroll-right iconfont-logan icon-logan-circle-right-solid" aria-label="向右滚动"></button> </div> <div class="code-tools" aria-label="代码块工具栏"> <div class="copy-text">Copied!</div> <button class="copy-code-button iconfont-logan icon-logan-copy-round3" aria-label="复制"></button> <button class="my-code-fold iconfont-logan icon-logan-circle-chevron-down-solid expand1" aria-label="折叠"></button> </div> </div>