资讯专栏INFORMATION COLUMN

Hugo入门详细教程

番茄西红柿 / 1367人阅读

摘要:这是一种格式,前面的文章说过,支持三种格式,除了,还支持,方式。至于喜欢哪种格式,可以在中进行配置,默认使用的是格式。

原文链接https://youendless.com/post/hugo_base/ ,主题 https://github.com/kingfsen/Mainroad

首先访问Github下载Hugo的应用程序,Hugo各版本release文件下载地址 https://github.com/gohugoio/hugo/releases , windows请选择下载hugo_0.xx.0_Windows-64bit.zip。 下载完成止之后解压文件至D:softhugo_0.54,然后把该路径添加到系统环境变量Path中,执行 hugo version 命令验证是否安装成功。

C:Userskingfsen>hugo version
Hugo Static Site Generator v0.54.0-B1A82C61 windows/amd64 BuildDate: 2019-02-01T09:42:02Z

通过执行 hugo –help 查看命令帮助

C:Userskingfsen>hugo --help
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
Copy

执行 hugo config查看hugo的默认配置信息,各配置参数可以通过在站点的全局配置文件config.toml中进行修改。

目录结构

在E盘新建目录website,然后通过Hugo把站点生成到E:/website下,比如我现在新建一个站点second-blog,执行如下命令

kingfsen@LAPTOP-M85G5JUT MINGW64 /e/website
$ hugo new site E:/website/second-blog
Congratulations! Your new Hugo site is created in E:websitesecond-blog.

Just a few more steps and youre 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 " command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new .".
3. Start the built-in live server via "hugo server".

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

命令执行成功之后查看E:/website/second-blog目录,查看文件目录结构。

│  config.toml
│
├─archetypes
│      default.md
│
├─content
├─data
├─layouts
├─static
└─themes
Copy
  • config.toml
    站点全局的参数配置文件
  • archetypes
    Hugo的markdown文件中前置数据Front Matter定义的结构,默认使用的是default.md文件,可以自定义,然后在config.toml中指定自定义的结构文件,打开default.md文件。

      ---
      title: "{{ replace .Name "-" " " | title }}"
      date: {{ .Date }}
      draft: true
      ---
    
    Copy

    这是一种yaml格式,前面的文章说过,Front Matter支持三种格式,除了yaml,还支持toml,json方式。

    toml

    +++
    title = "{{ replace .Name "-" " " | title }}"
    date = {{ .Date }}
    draft = true
    +++
    
    Copy

    json

    {
      "title":"{{ replace .Name "-" " " | title }}",
      "date":{{ .Date }},
      "draft":true
    }
    
    Copy

    至于喜欢哪种格式,可以在config.toml中进行配置,默认使用的是yaml格式。通过执行hugo new 命令生成的markdown文件,头部默认会有这段渲染之后的Front Matter,一般我们会把draft属性去掉,draft草稿的意思,有这个属性的md文件不会渲染输出, 当然通过hugo –buildDrafts可以强制输出。

  • content
    存放网页内容的目录,即我们编写的markdown文件都存放在此目录,此目录是Hugo的默认源目录,在E:/website/second-blog下执行命令 hugo new post/hugo_introduce.md之后, 则会在content目录下生成子目录post,post中有一个hugo_introduce.md文件。

  • data
    data目录用来存放数据文件,一般是json文件,Hugo提供了相关命令可以从data目录下读取相关的文件数据,然后渲染到HTML页面中,将业务数据与模板分离。

  • layouts
    存放自定义的模板文件,Hugo优先使用layouts目录下的模板,未发现再去themes目录下查找。

  • static
    存放静态文件,比如css、js、img等文件目录,Hugo在渲染时,会直接将static目录下的文件直接复制到public目录下,不会做任何渲染。

  • themes
    存放网站主题,可以下载多个主题,themes目录下的每个子目录代表了一个主题,可以通过在config.toml中通过参数theme指定主题,即theme目录下的子目录名字, 也可以在执行hugo命令渲染时通过增加flag参数–theme=xx指定。

配置主题

一个静态站点的布局外观离不开css样式,在Hugo中通过主题theme来管理样式,在Hugo的官方网站即可预览下载社区提供的很多主题,当然我们也可以 通过github下载对应的主题,点击这里可以获取Hugo的全部主题,大部分主题提供了图片预览或者Demo在线预览,自由选择下载即可。

这里我选择排在第一个的主题AllinOne,进入E:websitesecond-blogthemes,执行git clone命令下载主题。

kingfsen@LAPTOP-M85G5JUT MINGW64 /e/website/second-blog/themes
$ git clone https://github.com/orianna-zzo/AllinOne.git
Cloning into AllinOne...
remote: Enumerating objects: 962, done.
remote: Total 962 (delta 0), reused 0 (delta 0), pack-reused 962
Receiving objects: 100% (962/962), 24.18 MiB | 32.00 KiB/s, done.
Resolving deltas: 100% (357/357), done.

命令执行成功之后,在themes目录下则有主题目录AllinOne,这个主题中的Example中图片有点多,比较大。在github上可以查看该主题的基本介绍以及详细的参数设置,主题很多都是个人提供出来,可能参差不齐,自行判断。 我们也可以制作自己的主题,上传到github上,或者在github上fork一个主题分支,在别人的基础上进行开发定制。

站点调试

Hugo提供了liveload方式,在执行hugo命令时通过增加flag参数即可。服务启动之后,可以一边修改内容文件或者html模板,浏览器会马上刷新,实时展示最新结果,在本地调试开发非常方便。 进入站点根目录second-blog目录,新建一个md文件,就比如我当前这个页面hugo_introduce.md文件,markdown这种轻量型标记语言非常容易学会,花点时间看几遍其语法就能学会。

$ hugo new post/hugo_introduce.md
E:websitesecond-blogcontentposthugo_introduce.md created

文件创建成功之后,通过其他工具打开hugo_introduce.md文件丰富一下内容,我们可以在本地启动调试,这里我为了方便直接把md文件中的draft属性去掉了。

hugo server --watch --theme=AllinOne

命令执行之后,发现报了一堆错误,仔细一看就是在主题下的模板强制要求定义Site.Params.slidesDirPath等属性,打开config.toml配置文件增加参数即可,由于我这里没有准备图片, 暂时就用AllinOne自带的默认配置,后序准备好了图片直接放在站点根目录下的static即可,再替换路径即可。

baseURL = "http://example.org/"
languageCode = "en-us"
title = "Hugo入门详细教程"

[Params]
slidesDirPath = "themes/AllinOne/static/img/header-slides"  
slidesDirPathURL = "img/header-slides"

配置增加之后,记得点击保存,再次启动本地服务,命令执行成功之后,服务默认在localhost的1313端口,至于端口也可以自行在config.toml中配置, 不知道参数名是什么,直接执行hugo config命令查看。

$ hugo server --watch --theme=AllinOne
Building sites …
                   | EN
+------------------+-----+
  Pages            |   7
  Paginator pages  |   0
  Non-page files   |   0
  Static files     | 108
  Processed images |   0
  Aliases          |   0
  Sitemaps         |   1
  Cleaned          |   0

Total in 53 ms
Watching for changes in E:websitesecond-blog{content,data,layouts,static,themes}
Watching for config changes in E:websitesecond-blogconfig.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
Copy

服务启动之后,用浏览器访问 http://localhost:1313 ,此时没有文章内容,丰富一下hugo_introduce.md文件,推荐使用Notepad2编写markdown文件,非常简洁, 当然你喜欢通过第三方专业的markdown编辑软件也可以,不过个人感觉真没那个必要。

---
title: "Hugo构建静态站点入门"
date: 2019-03-31T12:54:26+08:00
description: "介绍Hugo生成静态网站的基础知识,让你快速入门,轻松部署属于自己的静态站点"
thumbnail: "img/hugo.png"
Tags: 
- hugo
Categories:
- hugo
---

首先访问Github下载Hugo的应用程序,Hugo各版本release文件下载地址 https://github.com/gohugoio/hugo/releases , windows请选择下载hugo_0.xx.0_Windows-64bit.zip。
下载完成止之后解压文件至D:softhugo_0.54,然后把该路径添加到系统环境变量Path中,执行 hugo version 命令验证是否安装成功。
Copy

查看页面,HTML已经实时渲染了,一边编写文章,一边查看页面效果是否与预期一致,非常方便,速度很快。

站点部署

通过直接执行hugo server命令在站点目录下不会生成输出目录public,这个目录是默认的输出目录,当然可以通过命令或者config.toml进行配置。

$ hugo --theme=AllinOne
Building sites …
                   | EN
+------------------+-----+
  Pages            |  14
  Paginator pages  |   0
  Non-page files   |   0
  Static files     | 108
  Processed images |   0
  Aliases          |   1
  Sitemaps         |   1
  Cleaned          |   0

Total in 129 ms
 
Copy

站点调试没问题之后,则可以部署到服务器上了。通过执行hugo命令会将渲染后的站点文件全部输出到站点目录下的public目录中, 然后可以把public目录中的东西直接提交到github上,或者以Github Pages方式发布,或者部署到自己服务器上,由于站点文件均是静态文件, 只需一个Nginx即可将站点运行起来,项目每次有更新,只需先执行 git pull,然后通过命令nginx -s reload重新加载即可。

本篇文章讲解了Hugo的基本入门操作,后面会讲解Hugo的运行机制以及详细的其他站点配置,请通过点击Tag中的hugo或者Category中的hugo阅读Hugo相关博文。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1028.html

相关文章

  • 深度学习如何入门

    摘要:同时推荐阅读由,和提供的深度学习教程,其中介绍略少一些。自然语言处理的深度学习,另一个斯坦福大学的学者的创始人也是一个很好的课程,可以解决与相关的所有最新的深入学习研究。 如果您具有数学和计算机科学方面的工程背景或相关知识的编码经验,只需两个月即可熟练掌握深度学习。 难以置信? 四步使它成为可能。 欲了解更多,请往下看 Step 1: 学习机器学习基础 (可选,但强烈推荐) 开始于An...

    wzyplus 评论0 收藏0
  • 深度学习如何入门

    摘要:同时推荐阅读由,和提供的深度学习教程,其中介绍略少一些。自然语言处理的深度学习,另一个斯坦福大学的学者的创始人也是一个很好的课程,可以解决与相关的所有最新的深入学习研究。 如果您具有数学和计算机科学方面的工程背景或相关知识的编码经验,只需两个月即可熟练掌握深度学习。 难以置信? 四步使它成为可能。 欲了解更多,请往下看 Step 1: 学习机器学习基础 (可选,但强烈推荐) 开始于An...

    Guakin_Huang 评论0 收藏0
  • 前端相关汇总

    摘要:简介前端发展迅速,开发者富有的创造力不断的给前端生态注入新生命,各种库框架工程化构建工具层出不穷,眼花缭乱,不盲目追求前沿技术,学习框架和库在满足自己开发需求的基础上,然后最好可以对源码进行调研,了解和深入实现原理,从中可以获得更多的收获随 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...

    BenCHou 评论0 收藏0
  • 从零开始搭建hexo静态博客

    摘要:后来网上看到了很多和搭建的静态博客,由于编辑器的实用性,及,等代码托管平台的免费特点,让很多人都转向了和。于是我也花了两三天的时间来研究搭建了自己的博客。 以前的博客(blog.duweibin.cn)是在学习thinkphp的时候自己做的一个小项目,模板也是网上找的,后台是自己用thinkphp框架写的,上一个博客搭建过程中让自己学会了thinkphp对MVC操作,(M层还没具体用过...

    venmos 评论0 收藏0
  • 整理一下学习微服务springboot+springcloud+vue以来用到的好的博客

    摘要:调用百度实现图像识别使用渲染导出的制作的超级炫酷的三维模型一个代码库本人本人浏览器调试及所有错误代码整合千峰超级好用的各种开发自学文档这是它对应的学习视频使用教程详细虚拟机安装系统详解版网易开源镜像站在线数据互转使 1.Java调用百度API实现图像识别 2.使用Three.js渲染Sketchup导出的dae 3.three.js制作的超级炫酷的三维模型 4.three.js - 一...

    gitmilk 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<