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

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 模板相关的问题可以问我。

hugo-最好用的静态网站生成器的更多相关文章

  1. 利用git+hugo+markdown 搭建一个静态网站

    利用git+hugo+markdown 搭建一个静态网站 一直想要有一个自己的文档管理系统: 可以很方便书写,而且相应的文档很容易被分享 很方便的存储.管理.历史记录 比较方面的浏览和查询 第一点用M ...

  2. jekyll 将纯文本转化为静态网站和博客 静态网站生成器

    jekyll 将纯文本转化为静态网站和博客 静态网站生成器 这个貌似对windows 支持不是很好~ 但是有支持,官方说不建议使用

  3. 关于开箱即用的文档静态网站生成器VuePress

    关于VuePress 一个由Vue驱动的静态文档网站生成框架,具有开箱即用的优点. 给项目添加.gitignore .gitignore是git用来排除目录的清单,我们把以下目录加入其中,以便每次操作 ...

  4. 使用 Java 和 Maven (JBake) 生成静态网站

    使用 JBake("mvn generate-resources")构建您的静态网站或博客.使用布局.宏和数据文件. 我们迁移了整个www.optaplanner.org网站(13 ...

  5. 静态内容生成器——Wyam

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:今天继续静态网站的话题,介绍我选用的一个使用.NET开发的静态内容生成器--Wyam. ...

  6. Gatsby上手指南 - 让你的静态网站用react来高逼格的写

    注意:Gatsby V2版本安装及使用问题请移步<Gastby V2安装过程中常见问题>,此文较旧,主要针对V1版Gatsby而介绍 前言 一直以来都是用之前比较流行的静态网站生成器Hex ...

  7. [技术翻译]使用Nuxt生成静态网站

    本周再来翻译一些技术文章,本次预计翻译三篇文章如下: 04.[译]使用Nuxt生成静态网站(Generate Static Websites with Nuxt) 05.[译]Web网页内容是如何影响 ...

  8. ECS7天实践进阶训练营Day1:使用阿里云ECS,快速搭建、管理VuePress静态网站

    一.概述 VuePress是2018年由尤雨溪发布的一个全新的基于Vue的静态网站生成器,它是一个非常轻量级的静态网站生成器.VuePress主要用于生成技术文档,其类似于Gitbook,我们可以用于 ...

  9. [tools]hugo&github构建静态网站/百度统计

    hugo/github构建网站基本原理 1.hugo是一个静态化的工具,你写md,然后他把md转换成对应样式的html, 2.并给html嵌入百度统计的script.然后你将html放到github上 ...

随机推荐

  1. JavaScript Patterns 3.2 Custom Constructor Functions

    When you invoke the constructor function with new, the following happens inside the function: • An e ...

  2. 【转】JAVA CAS原理深度分析

    java.util.concurrent包完全建立在CAS之上的,没有CAS就不会有此包.可见CAS的重要性. CAS CAS:Compare and Swap, 翻译成比较并交换. java.uti ...

  3. 堆栈 & Stack and Heap

    What's the difference between a stack and a heap? The differences between the stack and the heap can ...

  4. hdu 2583 permutation

    permutation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  5. android使用微软雅黑字体

    android使用微软雅黑字体,需要下载字体 ttf文件 下载地址:http://download.csdn.net/detail/xiaoliu123586/9049815 放在assert,然后引 ...

  6. 形如(function(){}).call()的js语句

    研究新浪微博的自动登陆流程,其中涉及到它的加密算法脚本,其中有一段如下形式的代码: (function(){...}).call(name) 其中红色的....是函数的内部各种实现,name为一个对象 ...

  7. Regarding learning

    when you learn something, just like learn computer language. if you just learn some basic usage, not ...

  8. MIT jos 6.828 Fall 2014 训练记录(lab 5)

    源代码参见我的github: https://github.com/YaoZengzeng/jos File system perliminaries 我们开发的是一个单用户的操作系统,只提供了足够的 ...

  9. 【Android UI设计与开发】10:滑动菜单栏(二)SlidingMenu 动画效果的实现

    其实就是在显示菜单栏时,有个动画的效果.代码比较简单,下面进行说明. 1.效果图如下,手机上查看效果更佳 2.代码实现,这里只讲解动画效果的实现,具体代码可在源代码中查看 <1> 先定义一 ...

  10. readonly与const

    readonly与const 在C#中,readonly 与 const 都是定义常量,但不同之处在于:readonly 是运行时常量,而 const 是编译时常量. ; public void Te ...