Skip to content
0

hugo简介

hugo简介

image-20220503194500264

官网

https://gohugo.io/

image-20220503194500264

优点

当前的静态网站生成工具对环境依赖过多,性能较差,于是使用 Go 语言写了一个静态网站生成器 Hugo。不仅解决了环境依赖、性能较差的问题,还有使用简单、部署方便等诸多优点,通过 LiveReload 实时刷新,极大的优化文章的写作体验。

Hugo跟Wordpress和Hexo对比

🍀 hugo跟wordpress其他建站工具的对比

  1. wordpress 全球31%的网站使用wordpress,尽管他有各种主题和插件,但是也有非常多的缺点,安全性,seo不够友好,定制麻烦
  2. hugo hexo最快的静态生成工具,seo友好,静态更安全,方便定制模板,缺点没有插件如果要定制模板只能懂一点go的语法
  3. wordpress是动态的并且还需要托管数据库,所以托管费用比较昂贵
  4. hugo hexo是生成静态的页面,在本地生成后上传到服务器就可以了,托管费用非常便宜,可以直接用免费的github托管
  5. 国外网站技术对比 https://stackshare.io/stackups/hugo-vs-wordpress

🍀 wordpress vs hugo vs hexo

工具静态/动态托管安全性访问速度在线编辑markdown
wordpress动态复杂需要经常升级可以插件支持
hugo静态简单非常安全非常快不可以支持
hexo静态简单非常安全不可以支持
工具编程语言seo支持插件主题页面生成速度安装和使用生态
wordpressPHP不友好支持非常多不支持复杂
hugoGo友好不支持非常快简单生态会好些
hexonodejs友好很多非常多快(当文件很多,就特别慢了)稍微复杂

主题

官网主题

https://themes.gohugo.io/

image-20250805062354251

FixIt

文章链接:https://zhuanlan.zhihu.com/p/567278446 《分享一个简洁、优雅且高效的 Hugo 博客主题 - FixIt》

域名体验:https://fixit.lruihao.cn/zh-cn/

image-20250805061113788

image-20250805061955616

hugo-theme-kiwi

文章链接:https://mp.weixin.qq.com/s/wYdY_dBR-tA81Z7AAurLNQ 《一套由 Hugo 驱动的博客主题 hugo-theme-kiwi 开源啦》

域名体验:https://qiucode.cn/

image-20250805061747733

image-20250805061904617

hugo-theme-diaspora-master

2022年5月7日21:21:42

image-20220505195625912

hugo-theme-meme

下载地址 https://github.com/reuixiy/hugo-theme-meme

image-20220505195315916

image-20250805062024990

相册类型主题

Gallery

image-20250805091015193

Gallery

https://themes.gohugo.io/themes/hugo-theme-gallery/

image-20250805091311261

Gallery Deluxe

https://themes.gohugo.io/themes/gallerydeluxe/

image-20250805091356676

网站案例

优点知识的hugo博客

2023年9月3日采集

https://www.qikqiak.com/

image-20230901124056465

image-20230901124120645

image-20230901124140502

image-20230901124150926

image-20230903103241540

==cnych github仓库==

https://github.com/cnych/qikqiak.com

image-20230901123016714

image-20230901123113856

案例

案例:1w+的文档也是秒构建

2025年3月18日记录。

image-20250318204831502


  • 背景

image-20250318205508040

  • 案例:

image-20250318205246300

image-20250318205238855

案例:hugo真的快

image-20250804215610264

hugo目录结构

image-20220503192442079

bash
hg@LAPTOP-G8TUFE0T MINGW64 /d
$ cd hugoblog/

hg@LAPTOP-G8TUFE0T MINGW64 /d/hugoblog
$ ls
archetypes/  config.toml  content/  data/  layouts/  public/  static/  themes/
1. config.toml
  所有的hugo站点都有一个全局配置文件,用来配置整个站点的信息,hugo默认提供了跟多配置指令。
2. content
  站点下所有的内容页面,也就是我们创建的md文件都在这个content目录下面。
3. data
  data目录用来存储网站用到一些配置、数据文件。文件类型可以是yaml|toml|json等格式。
4. layouts
  存放用来渲染content目录下面内容的模版文件,模版.html格式结尾,layouts可以同时存储在项目目录和themes//layouts目录下。
5. static
  用来存储图片、css、js等静态资源文件。
6. themes
  用来存储主题,主题可以方便的帮助我们快速建立站点,也可以方便的切换网站的风格样式。
7. public
  hugo编译后生成网站的所有文件都存储在这里面,把这个目录放到任意web服务器就可以发布网站成功
8. archetypes  
  Hugo new 创建内容页面的时候预置的内容模板

hugo命令

💧 查看hugo版本

bash
PS D:\hugoblog> hugo version
hugo v0.98.0-165d299cde259c8b801abadc6d3405a229e449f6+extended windows/amd64 BuildDate=2022-04-28T10:23:30Z VendorInfo=gohugoio

💧 创建本地站点根目录

bash
$ hugo new site hugoblog
Congratulations! Your new Hugo site is created in D:\hugoblog.

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.


hg@LAPTOP-G8TUFE0T MINGW64 /d
$ cd hugoblog/

hg@LAPTOP-G8TUFE0T MINGW64 /d/hugoblog
$ ls
archetypes/  config.toml  content/  data/  layouts/  public/  static/  themes/

hg@LAPTOP-G8TUFE0T MINGW64 /d/hugoblog

💧 创建第一个测试文件

bash
hg@LAPTOP-G8TUFE0T MINGW64 /d/hugoblog
$ hugo new post/first.md
Content "D:\\hugoblog\\content\\post\\first.md" created

hg@LAPTOP-G8TUFE0T MINGW64 /d/hugoblog
$ echo "i love you,xyy hurt!" >> content/post/first.md

💧 本地预览

bash
$ hugo server -v -D
或者
$ hugo server

#备注
server      A high performance webserver
  -v, --verbose                    verbose output
      --verboseLog                 verbose logging
-D, --buildDrafts            include content marked as draft

image-20220503224411807

💧 构建数据

bash
$ hugo -D
或者
$ hugo

image-20220504131512246

声明

作者:One

版权:此文章版权归 One 所有,如有转载,请注明出处!

链接:可点击右上角分享此页面复制文章链接

上次更新时间:

最近更新