hugo博客搭建 | PaperMod主题

素履coder

发布于 2022-02-17 14:56:51

3.3K00

代码可运行

文章被收录于专栏：素履coder素履coder

运行总次数：0

代码可运行

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.启动博客

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

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

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

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

6.写文章

输入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
---

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-11-15，如有侵权请联系 cloudcommunity@tencent.com 删除

腾讯云开发者社区