hugo-最好用的静态网站生成器

简介: Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。 快速开始 安装Hugo 1. 二进制安装(推荐:简单、快速) 到 Hugo Releases 下载对应的操作系统版本的Hugo二进制文件(hugo或者hugo.exe) Mac下直接使用 Homebrew

Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。

快速开始

安装Hugo

1. 二进制安装(推荐:简单、快速)

Hugo Releases 下载对应的操作系统版本的Hugo二进制文件(hugo或者hugo.exe)

Mac下直接使用 Homebrew 安装:

brew install hugo

2. 源码安装

源码编译安装,首先安装好依赖的工具:

设置好 GOPATH 环境变量,获取源码并编译:

$ export GOPATH=$HOME/go
$ go get -v github.com/spf13/hugo

源码会下载到 $GOPATH/src 目录,二进制在 $GOPATH/bin/

如果需要更新所有Hugo的依赖库,增加 -u 参数:

$ go get -u -v github.com/spf13/hugo

生成站点

使用Hugo快速生成站点,比如希望生成到 /path/to/site 路径:

$ hugo new site /path/to/site

这样就在 /path/to/site 目录里生成了初始站点,进去目录:

$ cd /path/to/site

站点目录结构:

  ▸ archetypes/
  ▸ content/
  ▸ layouts/
  ▸ static/
    config.toml

创建文章

创建一个 about 页面:

$ hugo new about.md

about.md 自动生成到了 content/about.md ,打开 about.md 看下:

+++
date = "2015-10-25T08:36:54-07:00"
draft = true
title = "about"

+++

正文内容

内容是 Markdown 格式的,+++ 之间的内容是 TOML 格式的,根据你的喜好,你可以换成 YAML 格式(使用 --- 标记)或者 JSON 格式。

创建第一篇文章,放到 post 目录,方便之后生成聚合页面。

$ hugo new post/first.md

打开编辑 post/first.md

---
date: "2015-10-25T08:36:54-07:00"
title: "first"

---

### Hello Hugo

 1. aaa
 1. bbb
 1. ccc

安装皮肤

皮肤列表 挑选一个心仪的皮肤,比如你觉得 Hyde 皮肤不错,找到相关的 GitHub 地址,创建目录 themes,在 themes 目录里把皮肤 git clone 下来:

# 创建 themes 目录
$ cd themes
$ git clone https://github.com/spf13/hyde.git

运行Hugo

在你的站点根目录执行 Hugo 命令进行调试:

$ hugo server --theme=hyde --buildDrafts --watch

使用 --watch 参数可以在修改文章内容时让浏览器自动刷新。

浏览器里打开: http://localhost:1313

部署

假设你需要部署在 GitHub Pages 上,首先在GitHub上创建一个Repository,命名为:coderzh.github.io (coderzh替换为你的github用户名)。

在站点根目录执行 Hugo 命令生成最终页面:

$ hugo --theme=hyde --baseUrl="http://coderzh.github.io/"

如果一切顺利,所有静态页面都会生成到 public 目录,将pubilc目录里所有文件 push 到刚创建的Repository的 master 分支。

$ cd public
$ git init
$ git remote add origin https://github.com/coderzh/coderzh.github.io.git
$ git add -A
$ git commit -m "first commit"
$ git push -u origin master

浏览器里访问:http://coderzh.github.io/

这个网站 免费教程网 就是我使用hugo生成的。 这个网站模板是我自己写的(样式部分除外),大家如果有关于hugo的以及go 模板相关的问题可以问我。

目录
相关文章
|
9天前
|
JavaScript 前端开发 Windows
blog-engine-08-vuepress 以 Markdown 为中心的静态网站生成器
对比多个博客引擎如 Jekyll, Hugo, Hexo, Pelican, Gatsby, VuePress 和 Nuxt.js,文章提供了安装和入门指南。VuePress 是专为 Vue.js 爱好者设计的静态网站生成器,强调 Vue 集成、Markdown 编写、美观默认主题及插件系统。安装涉及 Node.js,通过全局安装 VuePress,然后创建、预览、构建和部署静态文件。适合技术文档和简单博客,但对非 Vue.js 用户有一定学习曲线。
|
12天前
|
JavaScript 开发者 UED
静态网站生成:使用VuePress建立静态文档网站
【4月更文挑战第24天】VuePress是一款基于Vue.js的静态网站生成器,适用于构建文档类网站,以其Markdown渲染和Vue组件支持深受喜爱。要使用VuePress搭建静态文档网站,首先确保安装Node.js和npm,然后全局安装VuePress。创建项目,编辑Markdown文件,自定义样式和配置,通过`vuepress dev`启动本地服务器预览,最后用`vuepress build`生成静态文件进行部署。VuePress简化了内容创建和网站定制,是开发文档网站的理想选择。
|
9月前
phpcms之 如何把自己做的静态单页面变成动态可发表形式
phpcms之 如何把自己做的静态单页面变成动态可发表形式
|
9月前
|
前端开发 JavaScript 开发工具
28款静态网站快速搭建生成器
28款静态网站快速搭建生成器
691 0
|
12月前
|
XML JavaScript 前端开发
【静态Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比
【静态Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比
|
12月前
|
XML JavaScript 前端开发
【Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比
【Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比
|
12月前
|
Python
Django框架开发004期 Python编程调用自定义Django框架template模板网页
Django框架开发004期 Python编程调用自定义Django框架template模板网页
|
12月前
|
前端开发 JavaScript 数据库
Django框架开发005期 Python调用template模板网页开发调用静态资源
Django框架开发005期 Python调用template模板网页开发调用静态资源
Hugo 网站优化(1): 渲染 Markdown 图片引用地址
搭建一个自己的博客系统, 优化图片展示, 让书写更简单
378 0
Hugo 网站优化(1): 渲染 Markdown 图片引用地址
|
应用服务中间件 定位技术 数据库
vuepress站点生成器的使用
vuepress,docker,docker-compose