[置顶] hugo博客搭建 | PaperMod主题

个人博客代码已经上传至github，有需要的请到github拉取：
Title https://github.com/xyming108/sulv-hugo-papermod
hugo博客交流群：787018782

1.安装hugo

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

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

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

2.新建站点

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

3.下载主题

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

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

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

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

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

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

4.配置文件

站点配置文件推荐改成.yaml后缀的写法，因为更适合阅读，反正.toml的写法我是不习惯，详细的可以看 Title 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" #图片放在static/img/Q.gif
        imageTitle: 
        imageWidth: 150
        imageHeight: 150
        buttons:
          - name: 👨🏻‍💻技术
            url: posts/tech
          - name: 📕阅读
            url: posts/read
          - name: 🏖生活
            url: posts/life
      menu:
        main:
          - identifier: search
            name: 🔍搜索
            url: search
            weight: 1
          - identifier: home
            name: 🏠主页
            url: /
            weight: 2
          - identifier: posts
            name: 📚文章
            url: posts
            weight: 3
          - identifier: archives
            name: ⏱时间轴
            url: archives/
            weight: 20
          - 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: 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: "Sulv's Blog"
      #icon: "img/Q.gif"
      icon: "https://www.sulvblog.cn/Q.gif"
      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这个文件夹里

如果自己还定义了分类目录，如在content目录的posts目录下有blog、read、tech、life等文章分类，那么在用命令生成文章的时候，如果要把文章生成到指定目录，可以用命令：hugo new posts/tech/文章名称.md，这样就会把文章生成到tech目录下

生成的文章内部头部配置信息包括一些文章名称，时间之类的信息，可以事先在目录archetypes/default.md下使用模板，这样在用命令hugo new生成文章后会自动加上模板里的配置

我的模板如下（里面有一些字段是我自己自定义的，不是papermod默认带有的，直接使用该字段可能会无效，请酌情使用）:

（注意：这是PaperMod主题的配置，通用的请看 Title 官方文档的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: "" #图片路径：posts/tech/文章1/picture.png
    caption: "" #图片底部描述
    alt: ""
    relative: false
---

在文章里面使用本地图片的方式：

比如我在content/posts/tech/下有一篇文章叫做 golang_base.md，那么在和该文章同一目录下新建一个文件夹叫做 golang_base，里面放图片如叫做 picture.png 的图片，那么在golang_base.md里面调用的时候可以这样写: ![](picture.png)

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

1.安装hugo#

2.新建站点#

3.下载主题#

4.配置文件#

5.目录设置#

6.启动博客#

7.写文章#