安装hugo

以windows和linux为操作系统安装编译好的hugo

hugo采用编译好了的二进制文件,和go源码两种方式安装,支持windows、linux、OS X系统。我们安装编译好了的hugo,无需去管go的各种编译环境和包管理环境。给出源码就意味着它是一个开放源码的项目,您可以自己下载源码修改。

安装步骤

以下文字叙述为windows的操作,为桌面操作; 命令 操作为 linux (ubuntu 64位)操作,OS X实在高大上用不起,请自行脑补!

下载

https://github.com/spf13/hugo/releases

下载对应系统和版本的已编译压缩包。386为32位的,amd64为64位的,目前最新版本为0.14。

最新的下载地址和文件包以最新的为准,linux 采用通用的安装包,推荐安装在“ /usr/local/bin ”。如果您要从源码编译开始,请参阅官方安装文档。

命令

sudo wget https://github.com/spf13/hugo/releases/download/v0.14/hugo_0.14_linux_amd64.tar.gz

解压

在C盘下,建立一个文件夹“hugo”,再在文件下里面建立“bin”和“site”两个文件夹。bin用来放置程序,site是我们的站点,您可以在site下面建立很多很多个站点。

从下载包里面直接拖出exe文件(个人习惯)到bin下面,然后重命名它为“hugo.exe”。这样做可以省去今后输入命令的长度,当然没有冲突,您可以更名为“h.exe”更为简洁。

命令

sudo tar -xzvf hugo_0.14_linux_amd64.tar.gz
sudo mv hugo_0.14_linux_amd64/hugo_0.14_linux_amd64 hugo
sudo rm -rf hugo_0.14_linux_amd64
sudo rm hugo_0.14_linux_amd64.tar.gz

更改系统变量

以windows7为例:右击“计算机”,选择“属性”,“高级系统设置”,“高级”,“环境变量”,然后在“系统变量”里面找到“path”(如果没有就建立一个),编辑,在“path”的变量值的最后面(千万记住是最后面哦,不是完全的修改)添加“ ;C:\hugo\bin ”,然后依次确定。

在linux系统中,我们的二进制文件存放于“/usr/local/bin”下面,并且重命名为hugo,无需设置系统变量,即可使用hugo。

建立站点

  1. 打开命令行。按“win+R”键打开运行,输入“cmd”打开“cmd”窗口,输入“hugo help”,出现帮助信息,表明安装成功。
  2. 基本命令“hugo new”建站。简单吧,看了就懂,这就是新建的命令。我们进入到站点目录(cd命令,成功后闪烁的小光标前面变成了当前的路径,说这些是为了照顾没用过命令行的小伙伴们)“cd C:\hugo\site”,然后建立一个新站点“hugo new site sina”,第一次接触hugo命令,简单吧,翻译过来就是“胡搞,给我建立一个新站点,名字叫sina”。
  3. 成功后会在site目录下建立一个新的站点,名字为sina。里面有设置好了的目录结构,这个我们后面再细说。

代码:

hugo help
cd C:\hugo\site
hugo new site sina

特别注意:

  1. 因为老外的原因,没有考虑咱中国人,这里特别提醒,从一开始就提醒各位,我们的配置文件、md数据文件等必须使用“UTF-8”编码,而非默认的ANSI编码。否则您的中文之路将是一片乱码。现阶段的方法是:使用Notepad++打开每个文件准备写中文的时候,改掉编码为“UTF+8”。
  2. hugo自带了一个服务器,它使用“localhost:1313”或者“127.0.0.1:1313”访问,需要注意端口是否被占用,您不用安装IIS或者其他的服务器了。这么优雅华丽的hugo,为什么不用1314端口呢,一生一世多么浪漫……
  3. linux下的站点假设在“/usr/local/site”,详细命令不再复述,linux下的命令比windows的多,且好用,今后以windows作为命令示例。

你好世界

所有的入门都有这个,咱hugo也不能例外啊,毕竟到这里,下载、解压、输入了几个命令,我们根本不知道这货能干啥,怎么个干法。

  1. 模板是核心。在hugo里面,能控制各个参数输出和流程的是模板,没有模板就没有任何的输出,仅仅是几个配置文件和md文件而已,您不会愿意把您的md文件放在GitHub解析的。
  2. 新建个空主题。“cd sina”进入到sina站点里面,以后对于所有的站点都要在这个目录下面输入命令,否则,呵呵,胡搞到百度去怎么办。“hugo new theme aaa”,这样我们就建立了个名叫aaa的主题,位置位于“themes\aaa”,当然,一样的,里面会有些文件,再次提醒特别注意事项“UTF-8”。
  3. 您好世界。在不出你好世界,我不鸟这货了,那么复杂。好吧,打开aaa\layouts\文件下的index.html文件(使用编辑器而不是浏览器哦!),里面空空如也,先改了编码为“UTF-8”无BOM格式编码,在里面输入“你好世界!”并保存,当然,您可以输入“你好静静”,请随意!
  4. 打开服务,查看结果。“hugo server -w -t aaa”,好了,打开浏览器,输入“localhost:1313”,您就看到了“您好世界!”几个大字在欢迎您了。

代码:

cd sina
hugo new theme aaa
hugo server -w -t aaa

这里再index.html模板文件中直接输入了“你好世界!”几个字直接输出,并没有html代码包裹,也没有go模板标签,不太符合编程的先设置变量,后输出的标准”你好世界“的教程法典。管他呢,我喜欢,这是我的自由!这就是hugo精神!

总结

我们都干了什么:我们建了个sina的站点在site下面,我们建立了个叫做aaa的模板主题,我们使用hugo的服务器来预览我们的站点。

下面讲讲“hugo server -w -t aaa”这个命令。其实它干了三件事儿:第一就是hugo本身,它也是一个命令,它把md文件通过模板渲染生成html文件(在本例中我们没有md文件,但它确实渲染了模板),server开取本地的服务器,也就是您可以从浏览器看到html文件。当然就html文件而言,有没有服务器不重要,您可以直接打开文件看结果嘛。那就是接下来的神奇之处“-w”了,-w使hugo监视sina站点下面的一举一动,您改了模板,浏览器立马刷新(都不用您手动刷新的),您建立了md文档,更改了css,都立在保存的时候立马渲染出来,方便吧?快捷吧?最后一个“-t aaa”就是使用我们建立的aaa主题来渲染了。如果要结束这个命令,您得按 键盘的“ctrl+c” ,不然您无法输入下一个命令。

初探hugo(胡搞)的特点:

  1. hugo自带实时渲染的服务器;
  2. hugo就一个二进制文件;
  3. hugo从cmd(linux叫终端)上面运行;
  4. hugo没有UI界面;
  5. hugo有一套默认的规则;
  6. hugo可以同时生成管理多个站点;
  7. 在hugo里面一个站点可以有多套主题。