最近在用Hugo搭建了几个网站,整理下使用心得,分享给大家。

日常应用场景

Hugo在工作中用得最多的就是搭建各类文档站和博客:

  • 技术文档站点
  • 产品使用手册
  • 个人博客
  • 团队知识库
  • 公司官网
  • 活动落地页

由于生成的是静态网站,部署简单且加载速度快,特别适合一些对性能要求高的场景。

目前Hugo已经累计达到了79.8k star!可见其受欢迎的程度。

核心功能

1. 本地开发预览

写完内容后可以实时预览效果:

hugo server

2. 多语言支持

一份内容可以输出多个语言版本,方便做国际化:

content/  
├── _index.en.md      
├── _index.zh-cn.md  
└── posts/  
    ├── hello.en.md  
    └── hello.zh-cn.md

3. 内容管理

支持Markdown编写,可以设置草稿、发布时间等:

---  
title: "文章标题"  
date: 2023-01-01  
draft: true   
---

4. 主题系统

有大量开源主题可以直接使用,官网发布的有300+主题可供选择使用:

也可以自己开发:

theme = "papermod"

5. 资源处理

  • 图片压缩和处理
  • CSS/JS打包压缩
  • Sass编译
  • 支持CDN

安装使用

Windows安装

  1. 下载Hugo安装包

  2. 解压后添加到环境变量

  3. 验证安装:hugo version

Mac安装

brew install hugo

Linux安装

sudo apt install hugo

快速上手

1. 创建站点:

hugo new site myblog

2. 添加主题:

cd mybloggit submodule add https://github.com/theme.git themes/theme

3. 修改配置:

# config.tomltheme = "theme"

4. 创建文章:

hugo new posts/first.md

5. 本地预览:

hugo server -D

6. 生成网站:

hugo

示例:

响应式示例:

版权声明:
1、本网站名称:帝企吧
2、本站永久网址:https://www.diqiba.com
3、本网站的文章部分内容可能来源于网络及作者投稿,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报。
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
7、本站所有资源来源于互联网,仅用于学习及参考使用,切勿用于商业用途,如产生法律纠纷本站概不负责! 8、资源除标明原创外均来自网络转载,版权归原作者所有,若侵犯到您权益请联系我们删除,我们将及时处理! 9、若您需使用非免费的软件或服务,请购买正版授权并合法使用!