[{"content":"流程圖 Preface 使用 Notion 一陣子後，漸漸不喜歡他複雜的排版，水平向的擴展也有限 越來越習慣使用 Markdown 寫筆記，大多數筆記已遷移至 Obsidian 想練習輸出，有什麼能夠直接使用 Markdown 語法上傳的呢？ Hugo 使用 Go 語言開發，以 Markdown 語法編寫內容，透過模板系統生成最終 HTML 頁面 此篇紀錄自己使用 Hugo + Github Page + Github Action 打造個人網站的流程 Local 安裝 Hugo macOS | Hugo (gohugo.io)，使用 homebrew 進行安裝 brew install hugo 創一個資料夾放置相關資料 ex. blog hugo new site \u0026lt;資料夾名稱\u0026gt; hugo new site \u0026lt;github帳號.github.io\u0026gt; #此處命名為github帳號，方便後續使用github page cd \u0026lt;資料夾名稱\u0026gt; cd \u0026lt;github帳號.github.io\u0026gt; git init Hugo 框架資料夾結構\nDirectory structure | Hugo (gohugo.io) my-site/ ├── archetypes/ (放置md文章的模板) │ └── default.md ├── assets/ ├── config/ \u0026lt;-- site configuration │ └── _default/ │ └── hugo.toml \u0026lt;-- site configuration ├── content/ (文章放置的位置) ├── data/ ├── i18n/ ├── layouts/ ├── public/ \u0026lt;-- created when you build your site ├── resources/ \u0026lt;-- created when you build your site ├── config.toml(or hugo.toml)/ (一些參數的設定檔) ├── static/ (靜態檔案放置的位置(如圖片檔)) └── themes/ (落格使用的主題放置的位置) 安裝 blog 主題\n使用PaperMod 主題(替換使用的第四個\u0026hellip;)\nPaperMod git submodule 方式安裝\ngit submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod 建立 config.yaml(recommend to use yaml over toml as it is easier to read.), 更改 theme to \u0026ldquo;PaperMod\u0026rdquo;，依據需求調整配置 theme = \u0026#34;PaperMod\u0026#34; 建立 Archives 頁面 建立 Search 頁面 啟動 Hugo 伺服器查看網站 hugo server #Press `Ctrl + C` to stop Hugo’s development server. 嘗試新增 content hugo new content posts/my-first-post.md #Hugo created the file in the `content/posts` directory +++ author = \u0026#34;\u0026#34; title = \u0026#34;\u0026#34; date = description = \u0026#34;\u0026#34; tags = [\u0026#34;\u0026#34;] series = [\u0026#34;\u0026#34;] categories = [\u0026#34;\u0026#34;] draft = true +++ archetypes/default.md 可在此調整文章樣版格式 部署時，刪去 draft = true，terminal 輸入hugo 產生部署使用的public資料夾\n新增留言功能\nHugo comments 使用 giscus 依照指示建立留言專用的 github 資料夾 將 giscus 產生的程式碼貼至 layouts/partials/comments.html Github Github pages Host on GitHub Pages | Hugo (gohugo.io) 設定 Github pages 在自己的 Github 新增名稱為\u0026lt;Github的名稱\u0026gt;.github.io的 repo 然後在本地端的 blog 目錄中加入這個 repo 的 remote 位址 git remote add origin \u0026lt;repo位址\u0026gt; 使用 Github pages 的網頁，網址會是.github.io，所以要修改 config.yaml，把 url 改成相對應的網址 將資料夾 commit 完後 push 至 Github git add . git commit -m \u0026#34;Test\u0026#34; git push origin Github action 至 GitHub repository 頁面，選取 Settings \u0026gt; Pages\n更改 Source 為 GitHub Actions\n在本機資料夾中創造一個空的資料夾.github\n.github/workflows/hugo.yaml 在 hugo.yaml 中貼上下方文字，根據需要修改分支名稱和 Hugo 版本 # Sample workflow for building and deploying a Hugo site to GitHub Pages name: Deploy Hugo site to Pages on: # Runs on pushes targeting the default branch push: branches: - main # Allows you to run this workflow manually from the Actions tab workflow_dispatch: # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages permissions: contents: read pages: write id-token: write # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. concurrency: group: \u0026#34;pages\u0026#34; cancel-in-progress: false # Default to bash defaults: run: shell: bash jobs: # Build job build: runs-on: ubuntu-latest env: HUGO_VERSION: 0.128.0 steps: - name: Install Hugo CLI run: | wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \\ \u0026amp;\u0026amp; sudo dpkg -i ${{ runner.temp }}/hugo.deb - name: Install Dart Sass run: sudo snap install dart-sass - name: Checkout uses: actions/checkout@v4 with: submodules: recursive fetch-depth: 0 - name: Setup Pages id: pages uses: actions/configure-pages@v5 - name: Install Node.js dependencies run: \u0026#34;[[ -f package-lock.json || -f npm-shrinkwrap.json ]] \u0026amp;\u0026amp; npm ci || true\u0026#34; - name: Build with Hugo env: HUGO_CACHEDIR: ${{ runner.temp }}/hugo_cache HUGO_ENVIRONMENT: production TZ: America/Los_Angeles run: | hugo \\ --gc \\ --minify \\ --baseURL \u0026#34;${{ steps.pages.outputs.base_url }}/\u0026#34; - name: Upload artifact uses: actions/upload-pages-artifact@v3 with: path: ./public # Deployment job deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest needs: build steps: - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v4 git commit Add workflow，將檔案 push 至 GitHub\n在 git hub 首頁點選 Actions ，會看到以下畫面，當部署完成燈號會由黃轉綠\n點 commit message 可以看到部署完成的網站，未來重新 push 變更時，GitHub 都會自動重新部署。\nReferences:\nCaching dependencies to speed up workflows - GitHub Docs GitHub Actions documentation - GitHub Docs ","permalink":"https://sweiihuang.github.io/posts/my-first-post/","summary":"流程圖 Preface 使用 Notion 一陣子後，漸漸不喜歡他複雜的排版，水平向的擴展也有限 越來越習慣使用 Markdown 寫筆記，大多數筆記已遷移至 Obsidian 想練習輸出，有什麼能夠直接使用 Markdown 語法上傳的呢？ Hugo 使用 Go 語言開發，以 Markdown 語法編寫內容，透過模板系統生成最終 HTML 頁面 此篇紀錄自己使用 Hugo + Github Page + Github Action 打造個人網站的流程 Local 安裝 Hugo macOS | Hugo (gohugo.io)，使用 homebrew 進行安裝 brew install hugo 創一個資料夾放置相關資料 ex. blog hugo new site \u0026lt;資料夾名稱\u0026gt; hugo new site \u0026lt;github帳號.github.io\u0026gt; #此處命名為github帳號，方便後續使用github page cd \u0026lt;資料夾名稱\u0026gt; cd \u0026lt;github帳號.github.io\u0026gt; git init Hugo 框架資料夾結構\nDirectory structure | Hugo (gohugo.io) my-site/ ├── archetypes/ (放置md文章的模板) │ └── default.","title":"使用 Hugo + Github Page + Github Action 打造個人網站"}]