Hugo

官网 https://gohugo.io/

创建

直接下载 release 包。

新建站点

mkdir hexo-blog
cd hexo-blog
hugo new site .

配置

配置文件位于工程目录下的 config.toml,这里改为使用 YAML 格式的 config.yaml

修改下基本的站点设置。

baseURL: "https://lyincc.com/"
title: "lyincc' blog"
paginate: 5
theme: PaperMod
languageCode: 'zh-cn'
timeZone: 'Asia/Shanghai'

主题

在主题库里挑了一个简洁的主题 PaperMod。

git init .
git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod

主题配置

params:
  env: production
  description: "lyincc's blog - https://lyincc.com"
  author: lyincc

  defaultTheme: auto
  ShowShareButtons: true
  ShowReadingTime: true
  displayFullLangName: true
  ShowPostNavLinks: true
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: true
  ShowRssButtonInSectionTermList: true
  ShowToc: true

  profileMode:
    enabled: false
    title: PaperMod
    imageUrl: "#"
    imageTitle: my image
    buttons:
      - name: Archives
        url: archives
      - name: Tags
        url: tags

  homeInfoParams:
    Title: "Beautiful Wrold"
    Content: >
            Welcome.

  socialIcons:
    - name: github
      url: "https://github.com/lyincc"
    - name: RsS
      url: "index.xml"

  editPost:
    URL: "http://gitea.lyincc.com/lyincc/article-tech/issues"
    Text: "Issues"
    appendFilePath: true

静态资源

图片引用

由于旧的文章中,图片都是以相对路径引入的,这是为了方便一些 markdown 编辑器(如:VSCode)能够预览文章。

Hugo 对相对路径的图片资源支持并不是很好。为此增加一个拷贝脚本对资源路径进行转换,这样也可以将文章和 Hugo 工程分离开来。

建立 articles 目录用来存放分离开的文章,编写一个 powershell 脚本拷贝该目录中的文章和图片分别到 context 和 static 目录下。

$dirs = Get-ChildItem -Path .\articles
foreach($dir in $dirs)
{
    $dirName = $dir.Name

    # 拷贝文章
    $arts = $dirs.GetFiles()
    foreach($file in $arts)
    {
        $targetDir = ".\content\$dirName"
        if(-not (Test-Path $targetDir)) {
            New-Item -ItemType Directory -Path $targetDir
        }
        Copy-Item -Path $file -Destination $targetDir
    }

    # 拷贝资源
    $bundles = $dirs.GetDirectories()
    foreach($bundle in $bundles)
    {
        $sourceName = $bundle.Name
        $targetDir = ".\static\$dirName\$sourceName\$sourceName"
        if (-not (Test-Path $targetDir))
        {
            New-Item -ItemType Directory -Path $targetDir
        }
        $imgs = $bundle.GetFiles()
        foreach($img in $imgs)
        {
            $allowExt = ".png", ".jpeg", ".jpg"
            if ($img.Extension -in $allowExt)
            {
                Copy-Item -Path $img -Destination $targetDir
            }
        }
    }
}

使得资源路径和文章路径保持一致,hugo 就可以正常加载图片了。

服务

用于调试。

hugo server -D

发布

生成静态站点。

hugo 

生成的文件位于 public 目录,直接上传到服务器就可以了。