主题概况
Hugo 是一个用 Go 语言编写的静态网站生成器。类似的静态网站生成器还有Jekyll、hexo等等。以上生成器都使用过,但感觉要么环境麻烦,要么生成静态页面步骤繁琐以及生成缓慢。如果你正想在GitHub上搭建个静态的博客,搜索一大堆都是关于Jekyll和hexo的相关文章,使用Hugo的相关文章却很少,但是我认为使用Hugo方便一点。本着学习分享的原则,下面整理下如何使用Hugo。
Hugo官方主页:https://gohugo.io/
安装指南
安装Hugo
在 Hugo Releases上下载最新版的Release程序。没错,下下来就是一个二进制的程序。
配置环境
本例以Widows为例设置Hugo运行环境变量,如需更详细的Windows/macOSX的步骤说明,请移步至官网:
Installation on OS X /
Installation on Windows
在本地电脑上建立以下文件目录:(文件路径随意)
D:GitHubHugoinhugo.exe
D:GitHubHugoSites
我已将下载下来的Hugo二进制程序重命名为hugo.exe
并放进bin
文件夹内了。
设置Windows系统环境变量,我的电脑右键-->属性-->高级系统设置-->在"高级"标签页中-->环境变量...,选中PATH变量,并编辑...,在编辑值中新添加hugo程序的路径即可,一张图说明:
运行
安装并配置Hugo环境后,打开cmd命令行,可以直接使用hugo命令了。
$ hugo version
创建本地网站
生成站点
之前创建的Sites
就是用来存放创建的网站的,创建文件夹名为blog的网站:
$ hugo new site blog
创建的站点文件目录说明:
|- archetypes :存放default.md,头文件格式
|- content :content目录存放博客文章(.markdown/.md文件)
|- data :存放自定义模版,导入的toml文件(或json,yaml)
|- layouts :layouts目录存放的是网站的模板文件
|- static :static目录存放js/css/img等静态资源
|- config.toml :config.toml是网站的配置文件
当前网站是没有任何内容的,需要下载个主题跑起来才有内容。
安装主题
这里暂时不使用git命令clone下载主题,我们通过手动下载方式进行下载。
Hugo官方主题:https://themes.gohugo.io/
Hugo官方主题GitHub:https://github.com/spf13/hugoThemes/
这里选取Hyde主题为例,从gitHub下载下来,将解压出的文件放到themes
文件夹下。主题存放的路径为:Siteslog hemeshyde
,包含以下文件:
|- archetypes :存放default.md,头文件格式
|- layouts :主题模板文件
|- static :静态资源
|- theme.toml :主题配置文件
运行Hugo Server
Hugo内置http server,在你的站点根目录执行hugo server
命令,即可在浏览器里输入: http://localhost:1313
访问网站。
$ hugo server --theme=hyde
(注明:需要指定主题,如果在config.toml
中配置指定主题可以省略--theme
参数)
发表文章
可以看到现在博客里没有文章,使用hugo new
命令创建文章。
$ hugo new post/test.md
可以用文本文件或markdown编辑器打开文件 post/test.md ,并增加点内容。
+++
date = "2017-02-10T15:01:33+08:00"
title = "test"
draft = false
+++
Hello Hugo!测试内容
注意:默认创建的是草稿类型,需要将draft
值改为false才能看到页面。
生成静态网站
$ hugo --theme=hyde --baseUrl="https://YOURNAME.github.io/"
所有静态页面都会生成到 public
目录下,生成静态网站后并push到你的GitHub Pages
上,就能得到一个在线的个人博客了。
本文对GitHub如何使用不做详细介绍。请参考GitHub Pages在线帮助文档。
首先在GitHub上创建个Repository,命名为:YOURNAME.github.io(YOURNAME替换为自己的用户名),然后用git
将刚才创建的YOURNAME.github.io
项目clone下来。
将生成的 public
目录下所有文件拷贝到YOURNAME.github.io
项目中,并提交版本。
OK!至此你可以打开浏览器开始访问:https://ciey.github.io/ 你的博客了。