Showing Posts From

Hugo

如何在 Hugo 中安裝 Disqus 系統，以 PaperMod 主題為例

如何在 Hugo 中安裝 Disqus 系統，以 PaperMod 主題為例

這邊記錄一下如何在 Hugo 中安裝 Disqus 評論系統，佈景主題為 PaperMod。 安裝步驟在 Disqus 註冊帳號並創建一個新的網站。在 Disqus 的網站設定中，找到 Shortname，這是用來識別你的網站的。在你的 Hugo 網站的 config.toml 或 config.yaml 中添加以下配置： [params] disqusShortname = "your_disqus_shortname" comments = true或者如果你使用的是 YAML 格式： params: disqusShortname: your_disqus_shortname comments: true確保你的 Hugo 佈景主題支持 Disqus。PaperMod 佈景主題已經內建支持 Disqus，所以只需要確保上述配置正確即可。複製 themes/PaperMod/layouts/partials/comments.html 到 layouts/partials/comments.html 確認 Disqus 的代碼已經包含在內。 如果沒有，你可以手動添加以下代碼到你的 layouts/partials/comments.html： {{- /* Comments area start */ -}} <div class="disqus markdown"> {{ partial "disqus.html" . }} </div> {{- /* Comments area end */ -}}建立 layouts/partials/disqus.html 檔案，並添加以下內容： {{ if .Site.Params.disqusShortname }} <div id="disqus_thread"></div> <script> var disqus_config = function () { this.page.url = '{{ .Permalink }}'; // Replace PAGE_URL with your page's canonical URL variable this.page.identifier = '{{ .File.Path }}'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable }; (function() { // DON'T EDIT BELOW THIS LINE var d = document, s = d.createElement('script'); s.src = 'https://{{ .Site.Params.disqusShortname }}.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); </script> <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> {{ end }}在 local 確認是否有完成

使用 Hugo 架設 Blog

使用 Hugo 架設 Blog

架設 Hugo 起手式環境： Mac OS Sequoia 15.3 Terminal: iTerm2安裝 Hugo brew install hugoHUGO 指令測試 安裝完成後，在 Terminal 輸入以下指令，確認是否安裝成功。 hugo version建立新 Blog hugo new site blog建立新文章 為了方便管理，我會將文章放在 posts 資料夾中。 hugo new posts/2025/2025.md啟動 HUGO 伺服器 -D 參數可以讓草稿文章也顯示在網頁上。 hugo server -D開啟 http://localhost:1313/ 即可看到 Hugo 預設的網頁。 安裝佈景主題 進入 Hugo Themes 選擇一個喜歡的主題，將它加入到 Blog 中。 這邊選擇 PaperMod 主題。 透過官方推薦的將 submodule 加入到專案中。 git init git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod git submodule update --init --recursive # needed when you reclone your repo (submodules may not get cloned automatically)修改 hugo.toml # 新增 theme theme = 'PaperMod'Local Build 出可以部署的檔案 ## --gc: 執行完後清除 cache ## --minify: 壓縮檔案 hugo --gc --minify部署到 Github Pages 在 Github 上建立一個新的 Repository，名稱為 {你的 Github id 名稱}.github.io。## Git init git branch -M main## 新增 remote git remote add origin https://github.com/{你的Github id 名稱}/{你的 Github id 名稱}.github.io.git## 將檔案加入到 git git add . git commit -m "Hugo 首次 commit"## 將檔案推到 Github git push -u origin main接著進入 https://{你的 Github id 名稱}.github.io 即可看到你的 Blog。