Techyou labs
真正的爱应该超越生命的长度,心灵的宽度,灵魂的深度
常用标签

Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。虽然用了很久但现在版本大为不同,折腾多语言架构时顺便重新写个笔记.

安装Hugo

二进制安装(推荐:简单、快速)
Hugo Releases 下载对应的操作系统版本的Hugo二进制文件(hugo或者hugo.exe)

基本使用方法

在当前目录执行 hugo help 即可查看 Hugo 基本的使用方法


hugo is the main command, used to build your Hugo site.

Hugo is a Fast and Flexible Static Site Generator
built with love by spf13 and friends in Go.

Complete documentation is available at http://gohugo.io/.

Usage:
  hugo [flags]
  hugo [command]

Available Commands:
  config      Print the site configuration
  convert     Convert your content to different formats
  env         Print Hugo version and environment info
  gen         A collection of several useful generators.
  help        Help about any command
  import      Import your site from others.
  list        Listing out various types of content
  new         Create new content for your site
  server      A high performance webserver
  version     Print the version number of Hugo

Flags:
  -b, --baseURL string         hostname (and path) to the root, e.g. http://spf13.com/
  -D, --buildDrafts            include content marked as draft
  -E, --buildExpired           include expired content
  -F, --buildFuture            include content with publishdate in the future
      --cacheDir string        filesystem path to cache directory. Defaults: $TMPDIR/hugo_cache/
      --cleanDestinationDir    remove files from destination not found in static directories
      --config string          config file (default is path/config.yaml|json|toml)
      --configDir string       config dir (default "config")
  -c, --contentDir string      filesystem path to content directory
      --debug                  debug output
  -d, --destination string     filesystem path to write files to
      --disableKinds strings   disable different kind of pages (home, RSS etc.)
      --enableGitInfo          add Git revision, date and author info to the pages
  -e, --environment string     build environment
      --forceSyncStatic        copy all files when static is changed.
      --gc                     enable to run some cleanup tasks (remove unused cache files) after the build
  -h, --help                   help for hugo
      --i18n-warnings          print missing translations
      --ignoreCache            ignores the cache directory
  -l, --layoutDir string       filesystem path to layout directory
      --log                    enable Logging
      --logFile string         log File path (if set, logging enabled automatically)
      --minify                 minify any supported output format (HTML, XML etc.)
      --noChmod                don't sync permission mode of files
      --noTimes                don't sync modification time of files
      --path-warnings          print warnings on duplicate target paths etc.
      --quiet                  build in quiet mode
      --renderToMemory         render to memory (only useful for benchmark testing)
  -s, --source string          filesystem path to read files relative from
      --templateMetrics        display metrics about template executions
      --templateMetricsHints   calculate some improvement hints when combined with --templateMetrics
  -t, --theme strings          themes to use (located in /themes/THEMENAME/)
      --themesDir string       filesystem path to themes directory
      --trace file             write trace to file (not useful in general)
  -v, --verbose                verbose output
      --verboseLog             verbose logging
  -w, --watch                  watch filesystem for changes and recreate as needed

Additional help topics:
  hugo check   Contains some verification checks

Use "hugo [command] --help" for more information about a command.

快速新建站点

首先建立自己的网站,example.com是网站的路径,你本地的目录


renothing@desktop:~/myworks/xixin[master]$ hugo new site example.com
Congratulations! Your new Hugo site is created in /home/renothing/myworks/xixin/example.com.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

然后进入该路径,hugo已经自动生成了默认站点结构


example.com/
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

6 directories, 2 files

config.toml 是网站的配置文件,包括 baseurl , title , copyright 等等网站参数。
这几个文件夹的作用分别是:

  • archetypes:包括内容类型,也叫内容模板,在创建新内容时自动生成内容的配置
  • content:包括网站内容,全部使用markdown格式,
  • layouts:包括了网站的模版自定义部分,决定内容如何呈现
  • static: 网站静态文件目录,你可以理解为存放网站附件的地方
  • data : 网站数据目录, 在使用hugo自定义内容模型时使用
  • themes: 网站主题模板, 和你普通博客程序的主题皮肤作用一样.

    配置网站

Hugo附带了大量配置指令。 config目录是将这些指令存储为JSON,YAML或TOML文件的位置。 每个根设置对象都可以作为自己的文件并由环境构建。 设置最少且不需要环境感知的项目可以在其根目录下使用单个config.toml文件。

除了使用单个站点配置文件之外,还可以使用configDir目录(默认为config /)来维护更轻松的组织和环境特定设置。

我们这里就来扩展一下,让hugo支持多环境+多语言

  • 每个文件代表一个配置根对象,例如Params,Menus,Languages等......
  • 每个目录包含一组包含环境特有的设置的文件。
  • 也可以为特定语言设置单独的配置文件

    
    config
    ├── _default
    │   ├── config.toml
    │   ├── languages.toml
    │   ├── menus.en.toml
    │   ├── menus.zh.toml
    │   └── params.toml
    ├── staging
    │   ├── config.toml
    │   └── params.toml
    └── production
    ├── config.toml
    └── params.toml

    上面这个例子就是设置了两个环境 staging production ,并且为了维护方便,拆分了配置文件为多个,分别设置了中文和英文的菜单. 当运行 hugo --environment staging 时,Hugo将使用 config/_default 中的每个设置并在这些设置之上合并 staging 里的配置选项.
    相同选项优先级为

    
    staging|production > _default > config.toml
    
    默认情况下,使用 hugo server 会调用 development 环境, hugo 则调用 production 环境.

更多详细的配置选项请参考这里.

安装主题/皮肤

Hugo主题网站提供了很多主题,选择自己喜欢的下载,我选择了casper,在自己网站目录下创建themes目录,然后下载主题:


git clone https://github.com/matcornic/hugo-theme-learn.git themes/hugo-theme-learn/

添加内容

默认情况下,Hugo将创建至少包含日期,标题(从文件名推断)和draft = true的新内容文件。 这节省了时间并提高了使用多种内容类型的网站的一致性。 您也可以使用自定义预配置的前端字段字段创建自己的原型。

本地测试

Hugo自带服务器,默认跑在1313端口,可以用命令行启动:


hugo server

附上截图:
screeshot

暂无评论

添加新评论