使用HUGO自动生成静态网页的方法

安装使用HUGO

  • 查看学习 https://gohugo.io/getting-started/quick-start/
  • 下载 https://github.com/gohugoio/hugo/releases 我下载的0.29 Win64，解压后只有一个hugo.exe
  • 进行命令行，cd 到解压后的 hugo.exe 所在目录
  • 执行 hugo new site XXXX 可创建一个日志工程
  • 从 https://themes.gohugo.io/ 这里下载个皮肤模板，我用的是 Mainroad
  • 解压缩刚下载的皮肤包，放置到 XXX 工程文件夹下的 themes 目录下
  • 拷贝hugo.exe到 XXX 工程文件夹下，和 config.toml 同一目录级别
  • 执行md进入 XXX 工程文件夹内，执行 hugo server –theme=YourThemeName –buildDrafts –watch
  • 打开浏览器，输入 http://localhost:1313 查看效果
  • 控制台按下 Ctrl + C 退出预览
  • 进入themes，进入你下载的皮肤包内，一般会有个exampleSite目录，将里面的资源拷贝到 XXX 工程文件夹对应目录内（包括Config.toml，将其覆盖掉）
  • 再次执行 hugo server –theme=YourThemeName –buildDrafts –watch
  • 打开浏览器，输入 http://localhost:1313 查看效果
  • 然后命令行执行 hugo ,会在 XXX 工程文件夹内生成一个public文件夹，就是最终发布网页了
  • 你的日志需要一个日志一个文件的方式放置到 XXX 工程文件夹下的 content/post 目录下(记得增删改日志后记得 hugo 重新生成一下发布版本)
  • 注意MD日志文件的格式

本皮肤的其他一些参数

    - metaAlignment: center
    - coverMeta: out
    - thumbnailImagePosition: "left"
    - thumbnailImagePosition: "top"
    - thumbnailImage: //d1u9biwaxjngwg.cloudfront.net/cover-image-showcase/city-750.jpg
    - coverImage: //d1u9biwaxjngwg.cloudfront.net/welcome-to-tranquilpeak/city.jpg
    - showTags: false
    - showPagination: false
    - showSocial: false
    - gallery:
        - //d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-31.jpg //d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-31.jpg "Mercedes"
        - //d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-9.jpg //d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-9.jpg "Lamborghini"
        - //d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-10.jpg //d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-10.jpg "Nissan"
        - //d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-27.jpg "Mercedes"
        - //d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-4.jpg "Ferrari"
        - //d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-26.jpg "Lamborghini"
        - //d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-18.jpg