一、前言介紹

Hugo是一個(gè)個(gè)人博客靜態(tài)框架，相比于Hexo更加輕量生成更加快速。結(jié)合GitHub.io可以快速的搭建生成屬于自己的博客，并且有豐富的主題和插件支持。

二、搭建過程

這里主要闡述Mac上搭建的過程，Window的過程基本類似，唯一的不同就是Hugo本地環(huán)境的搭建。這個(gè)官網(wǎng)基本都有教程可以自己去官網(wǎng)查看。

1、Hugo本地環(huán)境的搭建

使用brew命令直接按照官網(wǎng)最新的Hugo版本

brew install hugo

運(yùn)行以下命令，有版本輸出則本地環(huán)境搭建完畢

hugo version

guohanlin@guohanlindeMacBook-Pro RmondJone.github.io % hugo version
hugo v0.89.4+extended darwin/amd64 BuildDate=unknown

2、GitHub創(chuàng)建io倉庫并使用Hugo Action

創(chuàng)建IO倉庫
必須按照以下格式創(chuàng)建：<userName>.github.io，userName就是你的GitHub名稱

image.png

創(chuàng)建Hugo Action
訪問你剛剛創(chuàng)建的倉庫 Settings > Pages. 你將會(huì)看到以下選項(xiàng)：

image.png

image.png

.github/workflows/hugo.yaml

# 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: "pages"
  cancel-in-progress: false

# Default to bash
defaults:
  run:
    shell: bash

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    env:
      HUGO_VERSION: 0.111.3
    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 \
          && sudo dpkg -i ${{ runner.temp }}/hugo.deb          
      - name: Install Dart Sass Embedded
        run: sudo snap install dart-sass-embedded
      - name: Checkout
        uses: actions/checkout@v3
        with:
          submodules: recursive
          fetch-depth: 0
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v3
      - name: Install Node.js dependencies
        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
      - name: Build with Hugo
        env:
          # For maximum backward compatibility with Hugo modules
          HUGO_ENVIRONMENT: production
          HUGO_ENV: production
        run: |
          hugo \
            --gc \
            --minify \
            --baseURL "${{ steps.pages.outputs.base_url }}/"          
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        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@v2

3、拉取Git倉庫本地Hugo調(diào)試

創(chuàng)建默認(rèn)站點(diǎn)
進(jìn)入到Git工程目錄，執(zhí)行以下命令

hugo new site .

執(zhí)行完命令之后會(huì)生成以下目錄結(jié)構(gòu):

.
├── archetypes
│   └── default.md
├── assets
├── config.toml
├── content
├── data
├── layouts
├── public
├── static
└── themes

設(shè)置想要的主題
Hugo的主題有很多，可以去官網(wǎng)的主題目錄挑選合適的主題。我這里使用的主題是hugo-papermod,以這個(gè)主題為例。首先進(jìn)入themes目錄，然后git clone下來。

cd themes

git clone git@github.com:adityatelange/hugo-PaperMod.git

然后在config.yaml里theme: 'hugo-PaperMod'配置默認(rèn)主題即可。config.toml我使用不習(xí)慣，所以這里我直接改成的yaml寫法，直接更改后綴即可，這里直接展示我的yaml配置。

#基礎(chǔ)配置
baseURL: 'http://rmondjone.github.io'
languageCode: 'zh-CN'
title: '郭翰林的博客'
theme: 'hugo-PaperMod'
enableInlineShortcodes: true
enableRobotsTXT: true
buildDrafts: false
buildFuture: false
buildExpired: false
enableEmoji: true

#配置菜單
menu:
  main:
    - name:  搜索
      url: search/
      weight: 10
    - name: 分類
      url: tags/
      weight: 10
    - name: 關(guān)于我
      url: about/
      weight: 10
    - name: 首頁
      url: /
      weight: 10

#主題配置參數(shù)
params:
  defaultTheme: auto
  homeInfoParams:
    Title: "技能樹"
    Content: >
      XXXXXXXXXX你要顯示內(nèi)容
  socialIcons:
    - name: Github
      url: "https://github.com/RmondJone"
    - name: Email
      url: about/

生成文章
生成文章主要就是使用hugo new xxxx.md這個(gè)命令去生成文章即可，執(zhí)行完命令之后，會(huì)自動(dòng)生成md文件在content目錄。如果使用hugo new post/xxx.md，則會(huì)在content目錄下多生成一個(gè)post目錄。以此類推。

關(guān)于Markdown的圖片引用
markdown中使用圖片引用，需要在static目錄下新建一個(gè)images文件夾，當(dāng)然目錄名稱隨便你取，我這里只是舉個(gè)例子。然后把圖片放到images文件夾里。在markdown里像如下寫法引用：

![](/images/weixin.jpg)

本地調(diào)試
直接使用命令hugo server -D即可，執(zhí)行完命令之后，會(huì)有以下輸出，直接點(diǎn)擊鏈接預(yù)覽即可。

guohanlin@guohanlindePro RmondJone.github.io % hugo server
Start building sites … 
hugo v0.111.3+extended darwin/amd64 BuildDate=unknown

                   | EN  
-------------------+-----
  Pages            | 17  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  1  
  Processed images |  0  
  Aliases          |  4  
  Sitemaps         |  1  
  Cleaned          |  0  

Built in 30 ms
Watching for changes in /Users/guohanlin/Documents/GitHub/RmondJone.github.io/{archetypes,content,static,themes}
Watching for config changes in /Users/guohanlin/Documents/GitHub/RmondJone.github.io/config.yaml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

遠(yuǎn)程部署
本地調(diào)試如果沒有問題，直接使用命令hugo -D生成靜態(tài)文件即可。然后提交到git上，如果本地不執(zhí)行命令也沒有關(guān)系，前面配置的git action會(huì)幫你自動(dòng)執(zhí)行一遍。然后通過https://<userName>.github.io即可訪問你的博客