hugo-最好用的静态网站生成器
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-最好用的静态网站生成器的更多相关文章
- 利用git+hugo+markdown 搭建一个静态网站
利用git+hugo+markdown 搭建一个静态网站 一直想要有一个自己的文档管理系统: 可以很方便书写,而且相应的文档很容易被分享 很方便的存储.管理.历史记录 比较方面的浏览和查询 第一点用M ...
- jekyll 将纯文本转化为静态网站和博客 静态网站生成器
jekyll 将纯文本转化为静态网站和博客 静态网站生成器 这个貌似对windows 支持不是很好~ 但是有支持,官方说不建议使用
- 关于开箱即用的文档静态网站生成器VuePress
关于VuePress 一个由Vue驱动的静态文档网站生成框架,具有开箱即用的优点. 给项目添加.gitignore .gitignore是git用来排除目录的清单,我们把以下目录加入其中,以便每次操作 ...
- 使用 Java 和 Maven (JBake) 生成静态网站
使用 JBake("mvn generate-resources")构建您的静态网站或博客.使用布局.宏和数据文件. 我们迁移了整个www.optaplanner.org网站(13 ...
- 静态内容生成器——Wyam
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:今天继续静态网站的话题,介绍我选用的一个使用.NET开发的静态内容生成器--Wyam. ...
- Gatsby上手指南 - 让你的静态网站用react来高逼格的写
注意:Gatsby V2版本安装及使用问题请移步<Gastby V2安装过程中常见问题>,此文较旧,主要针对V1版Gatsby而介绍 前言 一直以来都是用之前比较流行的静态网站生成器Hex ...
- [技术翻译]使用Nuxt生成静态网站
本周再来翻译一些技术文章,本次预计翻译三篇文章如下: 04.[译]使用Nuxt生成静态网站(Generate Static Websites with Nuxt) 05.[译]Web网页内容是如何影响 ...
- ECS7天实践进阶训练营Day1:使用阿里云ECS,快速搭建、管理VuePress静态网站
一.概述 VuePress是2018年由尤雨溪发布的一个全新的基于Vue的静态网站生成器,它是一个非常轻量级的静态网站生成器.VuePress主要用于生成技术文档,其类似于Gitbook,我们可以用于 ...
- [tools]hugo&github构建静态网站/百度统计
hugo/github构建网站基本原理 1.hugo是一个静态化的工具,你写md,然后他把md转换成对应样式的html, 2.并给html嵌入百度统计的script.然后你将html放到github上 ...
随机推荐
- JavaScript Patterns 3.2 Custom Constructor Functions
When you invoke the constructor function with new, the following happens inside the function: • An e ...
- 【转】JAVA CAS原理深度分析
java.util.concurrent包完全建立在CAS之上的,没有CAS就不会有此包.可见CAS的重要性. CAS CAS:Compare and Swap, 翻译成比较并交换. java.uti ...
- 堆栈 & Stack and Heap
What's the difference between a stack and a heap? The differences between the stack and the heap can ...
- hdu 2583 permutation
permutation Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...
- android使用微软雅黑字体
android使用微软雅黑字体,需要下载字体 ttf文件 下载地址:http://download.csdn.net/detail/xiaoliu123586/9049815 放在assert,然后引 ...
- 形如(function(){}).call()的js语句
研究新浪微博的自动登陆流程,其中涉及到它的加密算法脚本,其中有一段如下形式的代码: (function(){...}).call(name) 其中红色的....是函数的内部各种实现,name为一个对象 ...
- Regarding learning
when you learn something, just like learn computer language. if you just learn some basic usage, not ...
- MIT jos 6.828 Fall 2014 训练记录(lab 5)
源代码参见我的github: https://github.com/YaoZengzeng/jos File system perliminaries 我们开发的是一个单用户的操作系统,只提供了足够的 ...
- 【Android UI设计与开发】10:滑动菜单栏(二)SlidingMenu 动画效果的实现
其实就是在显示菜单栏时,有个动画的效果.代码比较简单,下面进行说明. 1.效果图如下,手机上查看效果更佳 2.代码实现,这里只讲解动画效果的实现,具体代码可在源代码中查看 <1> 先定义一 ...
- readonly与const
readonly与const 在C#中,readonly 与 const 都是定义常量,但不同之处在于:readonly 是运行时常量,而 const 是编译时常量. ; public void Te ...