https://calee0219.github.io/tag/hugo/HugoHugoBlox Kit (https://hugoblox.com)en-us©Sun, 21 Jun 2020 22:13:15 +0800https://calee0219.github.io/media/icon_hu_da05098ef60dc2e7.pnghttps://calee0219.github.io/tag/hugo/https://calee0219.github.io/blog/deploy_hugo/Sun, 21 Jun 2020 22:13:15 +0800https://calee0219.github.io/blog/deploy_hugo/<p>Hugo + Academic theme + github pages 個人網頁</p> <p>Academic 官網建議使用 Netlify 方式部署，方法可見 </p> <h2 id="安裝-hugo">安裝 HUGO</h2> <ul> <li> <p>macOS</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">brew install hugo </span></span></code></pre></div></li> <li> <p>Ubuntu</p> </li> </ul> <h2 id="下載-hugo-academic">下載 Hugo Academic</h2> <p>這裡建議直接用 修改，原因是 academic 要新增的 config 頗多，直接修改會比較簡單</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">git clone https://github.com/sourcethemes/academic-kickstart.git </span></span><span class="line"><span class="cl"><span class="nb">cd</span> academic-kickstart </span></span><span class="line"><span class="cl">git submodule update --init --recursive </span></span></code></pre></div><p>用以下指令跑起 server 確認是否下載成功</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">hugo server -D </span></span></code></pre></div><p>到網頁 <code>http://localhost:1313</code> 觀看執行結果，另外 <code>hugo server -D</code> 會動態修改，所以可以放著給它跑</p> <h2 id="調整內容">調整內容</h2> <h3 id="設定">設定</h3> <ul> <li> <p>刪除教學導覽</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">rm content/home/demo.md </span></span></code></pre></div></li> <li> <p>修改網頁 metadata</p> <p> <figure > <div class="flex justify-center "> <div class="w-full" ><img src="https://calee0219.github.io/img/hugo-metadata.png" alt="" loading="lazy" data-zoomable /></div> </div></figure> </p> </li> <li> <p>修改 title icon</p> <p>更改 <code>assets/images/icon.png</code>，將此檔案修改成需要的 icon</p> </li> <li> <p>修改 <code>/config/_default/params.toml</code>，這份檔案擁有幾乎所有網站的參數，確實將需要的填入</p> <p>特別需要注意，其中 <code>address</code>, <code>address_format</code> 跟 <code>[address_format]</code> 需要互相配合 (格式有的欄位都要有)，不然之後如果有需要用來產生 address 可能會出現問題</p> <p>另外 <code>main_menu = {align = &quot;r&quot;, show_logo = true}</code> 個人習慣 align 都靠右，會有 navbar 靠右的效果</p> </li> </ul> <h3 id="header">header</h3> <ul> <li>修改 <code>/config/_default/menus.toml</code>，其中 <code>weight</code> 參數的大小會決定這個 tag 放置前後，weight 越小，排越前面</li> </ul> <h3 id="內容">內容</h3> <ul> <li> <p>將不需要的 block 隱藏，選擇 <code>content/home/</code> 下的 .md 檔案，將不需要的 md 內，<code>active = false</code>，需要的 <code>active = true</code></p> <p> <figure > <div class="flex justify-center "> <div class="w-full" ><img src="https://calee0219.github.io/img/hugo-active.png" alt="" loading="lazy" data-zoomable /></div> </div></figure> </p> </li> <li> <p><code>about.md</code> 需要另外修改，他是使用 link 到 admin author (預設是 admin，你也可以改成其他人)</p> <p>需要去 <code>content/authors/admin/_index.md</code> 修改使用者資料</p> </li> <li> <p>icon: 像是 <code>skills.md</code> 頁面或其他會需要用到 icon，academic 預設有連動 <code>font awesome</code> 跟 <code>jpswalsh</code> 的 icon，更多的需要自行匯入 svg 檔到 <code>/assets/images/icon-pack/</code> 內，然後使用時填寫如下，其中 icon 部分填寫檔名 (.svg 之前的內容)</p> <p> <figure > <div class="flex justify-center "> <div class="w-full" ><img src="https://calee0219.github.io/img/hugo-custom-icon.png" alt="" loading="lazy" data-zoomable /></div> </div></figure> </p> <p>Ref: </p> </li> </ul> <h2 id="部署-github-pages">部署 GitHub Pages</h2> <h3 id="產生-source-html">產生 source (html)</h3> <p>用 <code>hugo</code> 指令不加參數會生產 html file，但是 default 會 generate 在 <code>/public</code> 資料夾下面</p> <p>如果有特別需求 (等下會用到)，可以在 <code>config/_default/config.toml</code> 裡面新增一個參數 <code>publicDir = &quot;/docs&quot;</code> 指定 generate 的 folder</p> <h3 id="部署上-github">部署上 GitHub</h3> <h4 id="github-pages">GitHub Pages</h4> <p>GitHub 提供兩種 GitHub Pages 可以使用，一種是 <code>http(s)://&lt;user&gt;.github.io</code>，而另外一種是 <code>http(s)://&lt;user&gt;.github.io/&lt;repository&gt;</code>，可以參考 ，建議視是否為自己主頁做考量，因為當別人在 GitHub 想查詢你這個使用者時，常常會試著看看是否有 <user>.github.io 這個 repo，因此如果你希望被看到，可以考慮第一種方法</p> <p>如果是使用方法一，需要在 GitHub 上開一個 <user>.github.io 的 repo，<user> 填入自己的 GitHub account，其他的 repo 名稱都無法，至於後續的設定兩種方法都一樣</p> <p>使用方法二好處是可以一直開專案，專案名稱自訂。開好專案後直接將 code 連同 html source 一起推上去，由於 GitHub Pages 只提供兩種來源讀 html source，一個是從專案的 root，另外一個是從專案的 <code>/docs</code> 讀，又個人不建議直接把 html source 放在 root 會變得很亂，因此推薦把 html source 統一編進 <code>/docs</code> 資料夾內，編完推 code 後，到 Setting 頁往下滑，看到 <code>GitHub Pages</code>，如圖設定即可</p> <p> <figure > <div class="flex justify-center "> <div class="w-full" ><img src="https://calee0219.github.io/img/GitHub_Pages.png" alt="" loading="lazy" data-zoomable /></div> </div></figure> </p> <h4 id="github-actions">GitHub Actions</h4> <p>另外一種部署方法是使用 CD 來做，官方建議用 netlify，也可以使用 GitHub Actions 來部署，用這種方法就不需要推 src 上 repo 裡面</p> <p>參考 與 兩份文件</p>