静态博客Hugo安装及使用教程

一、安装

下面时windows10的安装教程，Linux和MAC去看官方教程

1、下载

最新版下载地址：https://github.com/gohugoio/hugo/releases

下载 Windows-64bit.zip

2、新建本地目录

D:\Hugo
D:\Hugo\bin
D:\Hugo\Sites
盘符和目录都可以自定义，但bin和Sites要固定

将下载的安装包里面的hugo.exe解压到D:\Hugo\bin下面

3、配置环境

我的电脑→右键→高级→环境变量→系统变量→Path，增加D:\Hugo\bin

也可以命令执行：set PATH=%PATH%;D:\Hugo\bin

4、安装完成

验证

hugo version //查看版本
hugo help //帮助文档

能正常输出即安装成功，如果输出错误，则需要重启电脑后再试

二、新建网站

在D:\Hugo\Sites下面打开cmd，或其他命令工具

hugo new site simple.com

新建simple.com 网站名自定义

回车创建成功！
然后在D:\Hugo\Sites下面就会新建一个simple文件夹

三、编写内容

1、目录说明

archetypes/ 创建页面的原型文件，比如标题时间等，可以自定义
content/ markdown原文件存储目录
layouts/ 样式自定义时需要
static/ 静态文件
themes/ 主题会安装在这儿
config.toml 配置文件

2、创建页面

在网站目录下面执行命令

hugo new about.md

自动在当前网站下的content目录下生成about.md文件

3、创建文章

hugo new post/hello-world.md

自动在content/post下面生成hello-world.md文件

新生成的文件自动会有三个字段(这儿的模板可以在archetypes里面的文件修改)：

title: "Hello world" //文件名称
date: 2020-11-03T16:58:08+08:00  //创建日期
draft: true   //草稿，默认开启

4、安装主题

在官方主题库中找到喜欢主题，按照教程安装

https://themes.gohugo.io/

例如： https://themes.gohugo.io/hugo-papermod/

当前博客用的就是这个主题
按照主题教程安装即可，建议使用主题推荐的config配置文件 papermod配置

config.yml

baseURL: "https://aixin.me"
title: Aixin.me
paginate: 5
theme: PaperMod
#defaultContentLanguage: zh
enableRobotsTXT: true
buildDrafts: false
buildFuture: false
buildExpired: false

minify:
  disableXML: true
  minifyOutput: true

outputs:
  home:
    - HTML
    - RSS
    - JSON # necessary for search

params:
  env: production # to enable google analytics, opengraph, twitter-cards and schema.
  title: Aixin.me
  description: "With love in your heart, you will meet your better self!"
  keywords: [Blog, aixin, love]
  author: Aixin.me
  # author: ["Me", "You"] # multiple authors
  images: ["<link or path of image for opengraph, twitter-cards>"]
  DateFormat: "January 2, 2006"
  defaultTheme: auto # dark, light
  disableThemeToggle: false

  ShowReadingTime: true
  ShowShareButtons: false
  ShowPostNavLinks: true
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: true
  ShowWordCount: true
  ShowRssButtonInSectionTermList: true
  UseHugoToc: true
  disableSpecial1stPost: false
  disableScrollToTop: false
  comments: false
  hidemeta: false
  hideSummary: false
  showtoc: false
  tocopen: false
  math: true #先配置好math然后在这儿开启

  assets:
    # disableHLJS: true # to disable highlight.js
    # disableFingerprinting: true
    favicon: "/images/favicon.ico"
    favicon16x16: "<link / abs url>"
    favicon32x32: "<link / abs url>"
    apple_touch_icon: "<link / abs url>"
    safari_pinned_tab: "<link / abs url>"

  label:
    text: "Aixin.me"
    #icon: "/images/logo.png"
    iconHeight: 35

  # profile-mode
  profileMode:
    enabled: false # needs to be explicitly set
    title: ExampleSite
    subtitle: "This is subtitle"
    imageUrl: "<img location>"
    imageWidth: 120
    imageHeight: 120
    imageTitle: my image
    buttons:
      - name: Posts
        url: posts
      - name: Tags
        url: tags

  # home-info mode
  homeInfoParams:
    Title: "Welcome to Aixin.me ❤️"
    Content: Animal instinct → Self-reflection → Emotion control © → Unity of knowledge and action → Concentration and selflessness → Altruism → Enlightenment and awakening

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

  # for search
  # https://fusejs.io/api/options.html
  fuseOpts:
    isCaseSensitive: false
    shouldSort: true
    location: 0
    distance: 1000
    threshold: 0.4
    minMatchCharLength: 0
    keys: ["title", "permalink", "summary", "content"]
menu:
  main:
    - identifier: about
      name: About
      url: /about/
      weight: 10
    - identifier: archives
      name: Archives
      url: /archives/
      weight: 10
    - identifier: tags
      name: Tags
      url: /tags/
      weight: 20
    - identifier: search
      name: Search
      url: /search/
      weight: 30
# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
pygmentsUseClasses: true
markup:
  highlight:
    noClasses: false
    # anchorLineNos: true
    # codeFences: true
    # guessSyntax: true
    # lineNos: true
    # style: monokai

设置多语言 config.yml

defaultContentLanguage: zh
languages:
    # en:
    #     languageName: "English"
    #     weight: 2
    #     menu:
    #         main:
    #             - name: Archive
    #               url: archives
    #               weight: 5
    #             - name: Search
    #               url: search/
    #               weight: 10
    #             - name: Tags
    #               url: tags/
    #               weight: 10
    #             - name: Categories
    #               url: categories/
    #               weight: 10
    zh:
        languageName: "中文"
        weight: 1
        menu:
            main:
                - name: 标签
                  url: tags/
                  weight: 1
                - name: 存档
                  url: archives
                  weight: 2
                - name: 搜索
                  url: search/
                  weight: 3
                
                #- name: 分类
                #  url: categories/
                #  weight: 10
                - name: 关于
                  url: about/
                  weight: 5

修改主题：

// 首页欢迎内容高度：
// /assets/css/common/post-entry.css
.first-entry {
    min-height: 120px;//修改这儿的高度即可
}

// 修改字体大小
// themes\hugo-PaperMod-6.0\assets\css\core\reset.css
body{
  font-size: 15px;
}

// 底部版权
// /layouts/partials/footer.html

支持数学公式

// https://adityatelange.github.io/hugo-PaperMod/posts/math-typesetting/

// 第一步：创建文件
主题/layouts/partials/math.html
// 粘贴以下内容
// https://katex.org/docs/autorender.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css" integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js" integrity="sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
          // customised options
          // • auto-render specific keys, e.g.:
          delimiters: [
              {left: '$$', right: '$$', display: true},
              {left: '$', right: '$', display: false},
              {left: '\\(', right: '\\)', display: false},
              {left: '\\[', right: '\\]', display: true}
          ],
          // • rendering keys, e.g.:
          throwOnError : false
        });
    });
</script>
// 第二步：打开主题/layouts/partials/extend_head.html，并添加以下代码
{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}

// 第三步：打开主题/config.yml，并添加以下代码
params:
    math: true #开启
// 以上是全局模式，也可以在文章中单独开启，math: true

5、本地运行

网站根目录执行：

hugo server

最后，必须将文章的draft: true改成draft: false才可以在网站上显示出来
当然，也可以使用hugo server --theme=hyde --buildDrafts，可以指定主题，也可以编译draft: true的文件

四、发布网站

网站根目录执行：

hugo --baseURL=https://aixin.me/

// 简写
hugo -b=https://aixin.me/

然后就会将博客发布到public目录下面

将pubic目录下的文件发布到git上即可

https:simple.com 是目标网址，也可以是simple.github.io
–baseURL是将config文件里面的baseURL修改为生产环境的地址

以上全部完毕，只写了基本的用法，更详细的教程请查看官方教程，也可以使用hugo help命令查看帮助文档

常用命令

//本地预览：http://localhost:1313/
D:\Hugo\Sites\simple.com> hugo server

//生成静态文件
D:\Hugo\Sites\simple.com> hugo

//push到github
D:\Hugo\Sites\simple.com\public> git push origin master

一、安装#

1、下载#

2、新建本地目录#

3、配置环境#

4、安装完成#

二、新建网站#

三、编写内容#

1、目录说明#

2、创建页面#

3、创建文章#

4、安装主题#

5、本地运行#

四、发布网站#

常用命令#