使用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