hugo，静态页面编辑神器，外行人的福音（一文详解）

首语

之前做那个程序监控的程序，苦于不会前端，最后只能用模板生套，十分费劲，后来在看开源项目的时候注意到hugo，感觉自己还可以拯救一下。

HUGO简介

hugo是一个通用网站框架，从技术上来说，Hugo是一个静态站点生成器。也就是说，不像WordPress，Ghost和Drupal之类的系统，会奢侈地为每一次访问都生成一次新页面，在你创造出内容时Hugo就已经把页面建好了。由于站点被访问的次数远远大于被编辑的次数，Hugo优化了网站访问的同时，提供了优异的写作体验。

使用Hugo建站极其快速且非常安全。Hugo站点可以部署在任何地方，包括Heroku、GoDaddy、DreamHost、GitHub Pages、Google Cloud Storage、Amazon S3和CloudFront，也能在CDN群上工作的很好。Hugo站点的运行不依赖昂贵的运行环境，如Ruby、Python或者PHP，也不依赖任何数据库。

我们想让Hugo作为网站的创建工具。近乎秒建的速度，能够随时重新生成被修改的地方，Hugo为此提供了一个非常快的反馈环路。此反馈环路当你设计网站时非常简便，而当创建内容时也非常实用。

安装

官网：https://gohugo.io/
Git地址：https://github.com/gohugoio/hugo
发行版快速链接：https://github.com/gohugoio/hugo/releases

我下载的windows版的，解压，配置环境变量，或者放到配置过环境变量的文件夹中，golang大法好，光秃秃的执行文件真香。

在任意cmd中执行，表示安装成功

hugo version
Hugo Static Site Generator v0.62.0-6608F155 windows/amd64 BuildDate: 2019-12-23T10:26:18Z

基本用法

任意目录下执行这个命令

//hugo new site [name]  新建一个名字为博客的站点
hugo new site blog

会在当前目录下生成这个blog目录，结构后如下图

content 目录是放置内容的目录，通常是网页显示的东西，为markdown文件，
staitc 目录放静态文件，
themes 放主题模块

同时在命令行中还会出现如下提示

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".

意思是

1. 下载或者新建一个主题
2. 添加一些内容
3. 运行这个服务

首先可以去hugo的官网下载一些主题，网址：https://themes.gohugo.io/
选择一个主题下载，主题页也一般会说明使用方法，注意事项。
将下载好的主题解压，放到前面截图的themes目录中

拷贝themes/xxx你下载的主题xxxx/exampleSite目录下的内容到blog目录
命令行cd blog 在blog目录下执行命令，启动服务

hugo server
Error: module "introduction" not found; either add it as a Hugo Module or store it in "D:\\hugo\\project\\test\\blog\\themes".: module does not exist

这里报错，错误是说theme目录下的hugo-theme-introduction-4.0文件夹名字错误，将其改为introduction，然后在命令行中重新输入hugo server

PS D:\hugo\project\test\blog> hugo server
Building sites … WARN 2020/01/01 16:07:12 Page.RSSLink is deprecated and will be removed in a future release. Use the Output Format's link, e.g. something like:
    {{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}

                   | ES | DE | EN
+------------------+----+----+----+
  Pages            | 28 | 28 | 28
  Paginator pages  |  0 |  0 |  0
  Non-page files   |  7 |  7 |  7
  Static files     | 49 | 49 | 49
  Processed images | 16 | 18 | 18
  Aliases          |  1 |  0 |  0
  Sitemaps         |  2 |  1 |  1
  Cleaned          |  0 |  0 |  0

Built in 54 ms
Watching for changes in D:\hugo\project\test\blog\{archetypes,content,data,layouts,static,themes}
Watching for config changes in D:\hugo\project\test\blog\config.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 //localhost:1313/ (bind address 127.0.0.1)

站点启动成功。
在浏览器中输入 127.0.0.1:1313 就可以访问到站点

Markdown简单用法

我这里使用vscode ，下载markdownlint插件
经常写博客应该对markdown语法非常熟悉，具体的联系方法就是
注册一个csdn账号，点写博客，点markdown编辑器，点帮助，
然后勤加练了就可以了，我这里就不细讲了。

未完待续。。。