使用Hugo搭建GitHub个人博客

主题概况

Hugo 是一个用 Go 语言编写的静态网站生成器。类似的静态网站生成器还有Jekyllhexo等等。以上生成器都使用过,但感觉要么环境麻烦,要么生成静态页面步骤繁琐以及生成缓慢。如果你正想在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:\GitHub\Hugo\bin\hugo.exe

D:\GitHub\Hugo\Sites

我已将下载下来的Hugo二进制程序重命名为hugo.exe并放进bin文件夹内了。

设置Windows系统环境变量,我的电脑右键-->属性-->高级系统设置-->在"高级"标签页中-->环境变量...,选中PATH变量,并编辑...,在编辑值中新添加hugo程序的路径即可,一张图说明:
设置Hugo系统环境变量

运行

安装并配置Hugo环境后,打开cmd命令行,可以直接使用hugo命令了。

$ hugo version

hugo version

创建本地网站

生成站点

之前创建的Sites就是用来存放创建的网站的,创建文件夹名为blog的网站:

$ hugo new site blog

hugo new site

创建的站点文件目录说明:

|- 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文件夹下。主题存放的路径为:Sites\blog\themes\hyde,包含以下文件:

|- 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项目中,并提交版本。

git提交

OK!至此你可以打开浏览器开始访问:https://ciey.github.io/ 你的博客了。

posted @ 2017-02-13 11:47  ciey  阅读(1502)  评论(0编辑  收藏  举报