1.安装hugo

windows用户可以先去官网下载hugo框架,hugo官网地址

苹果用户有安装HomeBrew工具的话可以直接输入brew install hugo进行安装。

下载完成后检查是否安装成功,输入: hugo version,若出现版本信息则表示安装成功。

2.新建站点

输入hugo new site hugoblog ,就会在hugoblog文件夹内出现如下目录结构:

3.下载主题

先去 hugo主题官网 找到自己喜欢的主题,然后点击下载会跳转到主题的github,

把终端的路径调整到博客文件夹的themes目录下,输入:git clone https://github.com/adityatelange/hugo-PaperMod.git,比如我的主题是PaperMod,

然后在themes文件夹下会出现如下文件目录:

使用该主题的方法就是在站点文件夹下的配置文件里输入主题的名字:

theme: PaperMod # 主题名字,和themes文件夹下的一致

然后把主题文件夹里面的一些静态文件和配置文件复制到站点目录下,目的是为了可以自定义博客的样式,而不会改动主题文件夹里的样式,这样主题要更新的时候,直接在主题目录下git pull就可以,站点目录的修改会优先覆盖主题里的配置,所以可以实现平滑更新。

4.配置文件

站点配置文件推荐改成.yaml后缀的写法,因为更适合阅读,反正.toml的写法我是不习惯,详细的可以看hugo的官方文档,下面是我的配置:

(注意这是PaperMod主题的配置方法,一些基本配置所有主题都一样,还有一些是每个主题自定义的,推荐看每个主题的示例模板)

baseURL: https://www.sulvblog.cn
# baseURL: https://www.sulvblog.cn  # 绑定的域名
languageCode: zh-cn # en-us
title: Sulv's Blog
theme: PaperMod # 主题名字,和themes文件夹下的一致

enableInlineShortcodes: true
enableEmoji: true # 允许使用 Emoji 表情,建议 true
enableRobotsTXT: true # 允许爬虫抓取到搜索引擎,建议 true

hasCJKLanguage: true # 自动检测是否包含 中文日文韩文 如果文章中使用了很多中文引号的话可以开启

buildDrafts: false
buildFuture: false
buildExpired: false

#googleAnalytics: UA-123-45 # 谷歌统计
# Copyright: Sulv

paginate: 15    # 首页每页显示的文章数

minify:
    disableXML: true
    # minifyOutput: true

permalinks:
  post: "/:title/"
  # post: "/:year/:month/:day/:title/"

defaultContentLanguage: en # 最顶部首先展示的语言页面
defaultContentLanguageInSubdir: true

languages:
    en:
      languageName: "English"
      # contentDir: content/english
      weight: 1
      profileMode:
        enabled: true
        title: (〃'▽'〃)
        subtitle: "🧨学而时习之,不亦说乎?有朋自远方来,不亦乐乎?<br/>👏🏼欢迎光临素履(Sulv)的博客<br/>👇联系方式"
        imageUrl: "img/Q.gif"
        imageTitle: 
        imageWidth: 150
        imageHeight: 150
        buttons:
          - name: 👨🏻‍💻技术
            url: posts/tech
          - name: 📕阅读
            url: posts/read
          - name: 🏖生活
            url: posts/life
          # - name: 🌹素履的博客
          #   url: https://www.xyming108.top
      menu:
        main:
          - identifier: search
            name: 🔍搜索
            url: search
            weight: 1
          - identifier: home
            name: 🏠主页
            url: /
            weight: 2
          - identifier: posts
            name: 📚文章
            url: posts
            weight: 3
          # - identifier: tech
          #   name: 👨🏻‍💻技术文章
          #   url: posts/tech
          #   weight: 5
          # - identifier: life
          #   name: 🏖记录生活
          #   url: posts/life
          #   weight: 6
          - identifier: archives
            name: ⏱时间轴
            url: archives/
            weight: 20
          # - identifier: categories
          #   name: 🧩分类
          #   url: categories
          #   weight: 30
          - identifier: tags
            name: 🔖标签
            url: tags
            weight: 40
          - identifier: about
            name: 🙋🏻‍♂️关于
            url: about
            weight: 50
          - identifier: links
            name: 🤝友链
            url: links
            weight: 60

outputs:
    home:
        - HTML
        - RSS
        - JSON

params:
    env: production # to enable google analytics, opengraph, twitter-cards and schema.
    # description: "这是一个纯粹的博客......"
    author: Sulv
    # author: ["Me", "You"] # multiple authors

  
    defaultTheme: auto  # defaultTheme: light or  dark 
    disableThemeToggle: false
    DateFormat: "2006-01-02"
    ShowShareButtons: true
    ShowReadingTime: true
    # disableSpecialistPost: true
    displayFullLangName: true
    ShowPostNavLinks: true
    ShowBreadCrumbs: true
    ShowCodeCopyButtons: true
    hideFooter: false # 隐藏页脚
    ShowWordCounts: true
    VisitCount: true

    ShowLastMod: true #显示文章更新时间

    ShowToc: true # 显示目录
    TocOpen: true # 自动展开目录

    comments: true
    
    socialIcons:
        - name: github
          url: "https://github.com/xyming108"
        - name: twitter
          url:  "img/twitter.png"
        - name: facebook
          url: "https://www.facebook.com/profile.php?id=100027782410997"
        - name: instagram
          url: "img/instagram.png"
        - name: QQ
          url: "img/qq.png"
        - name: WeChat
          url: "img/wechat.png"
        # - name: Phone
        #   url: "img/phone.png"
        - name: email
          url: "mailto:1931559710@qq.com"
        - name: RSS
          url: "index.xml"

    # editPost:
    #     URL: "https://github.com/adityatelange/hugo-PaperMod/tree/exampleSite/content"
    #     Text: "Suggest Changes" # edit text
    #     appendFilePath: true # to append file path to Edit link

    # label:
    #     text: "Home"
    #     icon: icon.png
    #     iconHeight: 35

    # analytics:
    #     google:
    #         SiteVerificationTag: "XYZabc"

    assets:
        favicon: "img/Q.gif"
        favicon16x16: "img/Q.gif"
        favicon32x32: "img/Q.gif"
        apple_touch_icon: "Q.gif"
        safari_pinned_tab: "Q.gif"

    # cover:
    #     hidden: true # hide everywhere but not in structured data
    #     hiddenInList: true # hide on list pages and home
    #     hiddenInSingle: true # hide on single page

    fuseOpts:
        isCaseSensitive: false
        shouldSort: true
        location: 0
        distance: 1000
        threshold: 1
        minMatchCharLength: 0
        keys: ["title", "permalink", "summary"]

    twikoo:
      version: 1.4.11

taxonomies:
    category: categories
    tag: tags
    series: series

markup:
    goldmark:
        renderer:
            unsafe: true # HUGO 默认转义 Markdown 文件中的 HTML 代码,如需开启的话
    highlight:
        # anchorLineNos: true
        codeFences: true  
        guessSyntax: true
        lineNos: true
        # noClasses: false
        # style: monokai
        style: darcula

        # codeFences:代码围栏功能,这个功能一般都要设为 true 的,不然很难看,就是干巴巴的-代码文字,没有颜色。
        # guessSyntax:猜测语法,这个功能建议设置为 true, 如果你没有设置要显示的语言则会自动匹配。
        # hl_Lines:高亮的行号,一般这个不设置,因为每个代码块我们可能希望让高亮的地方不一样。
        # lineNoStart:行号从编号几开始,一般从 1 开始。
        # lineNos:是否显示行号,我比较喜欢显示,所以我设置的为 true.
        # lineNumbersInTable:使用表来格式化行号和代码,而不是 标签。这个属性一般设置为 true.
        # noClasses:使用 class 标签,而不是内嵌的内联样式

privacy:
    vimeo:
        disabled: false
        simple: true

    twitter:
        disabled: false
        enableDNT: true
        simple: true

    instagram:
        disabled: false
        simple: true

    youtube:
        disabled: false
        privacyEnhanced: true

services:
    instagram:
        disableInlineCSS: true
    twitter:
        disableInlineCSS: true
        

5.目录设置

注意:content里每个文件夹内都要添加一个 _index.md文件,该文件里面可以加 Front Matter用来控制标题或其它的展示

posts下的_index.md,注意:后面要加空格

blog下的_index.md

life下的_index.md

read下的_index.md

tech下的_index.md

6.启动博客

在终端直接输入hugo server -D就可以在本地预览了,本地预览网址为 localhost:1313

输入hugo就可以生成public文件夹,这个文件夹可以部署到云服务器或者托管到github上,

注意:输入hugo的生成方式只会往public文件夹里添加内容,但是不会删除外部已经不存在而public里面还存在的文件,

所以我一般用hugo -F --cleanDestinationDir命令,表示每次生成的public都是全新的,会覆盖原来的。

7.写文章

输入hugo new 文章名称.md就会在content目录下的到 “文章名称.md” 形式的文件,所有文章都是放在content这个文件夹里,

文章内部的头部配置信息我的如下:

(注意:这是PaperMod主题的配置,通用的请看 官方文档的Front Matter配置 或各个主题自己的配置)

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
lastmod: {{ .Date }}
author: ["Sulv"]
categories: 
- 分类1
- 分类2
tags: 
- 标签1
- 标签2
description: ""
weight: # 输入1可以顶置文章,用来给文章展示排序,不填就默认按时间排序
slug: ""
draft: false # 是否为草稿
comments: true
showToc: true # 显示目录
TocOpen: true # 自动展开目录
hidemeta: false # 是否隐藏文章的元信息,如发布日期、作者等
disableShare: true # 底部不显示分享栏
showbreadcrumbs: true #顶部显示当前路径
cover:
    image: ""
    caption: ""
    alt: ""
    relative: false
---

这里有一些功能每个主题不一定有,需要根据具体情况做一些适配,仅供参考。