使用hugo搭建github个人博客站点
Thu, May 18, 2017做静态网站是很多年前的事了,随着技术的发展,制作静态网站也会有这么多的花样。从最初的做成自我展示的个人网站,到后来一些博客服务的提供,再到各种在线笔记的提供,对于个人知识管理与分享方面真是越来越多样化了。 最近了解一下通过Github发布个人博客的方式,有点意思。平时用git管理源程序,及一些MackDown文档。这些内容从利他的角度来说,除了给自己看,也应该分享出来。这儿也是我弄了这个博客的原因。
一、通过Hugo创建博客站点
Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。对于我来说选择它的原因只有一个,是采用Go语言开发的。
Hugo安装很简单。有两种安装方式:
1.1 二进制安装
到 Hugo Releases 下载对应的操作系统版本的Hugo二进制文件(hugo或者hugo.exe)
Mac下直接使用 Homebrew 安装:
brew install hugo
1.2 源码安装
在GO的开发环境下,通过获取源代码进行安装。
$ go get -v github.com/spf13/hugo
如果需要更新所有Hugo的依赖库,增加-u
参数:
$ go get -u -v github.com/spf13/hugo
二、生成站点
2.1 创建站点
使用Hugo快速生成站点,比如希望生成到 /gowork/site 路径:
$ hugo new site /gowork/site
这样就在 /gowork/site 目录里生成了初始站点,进去目录:
$ cd /gowork/site
站点目录结构:
|- archetypes :存放default.md,头文件格式
|- content :content目录存放博客文章(.markdown/.md文件)
|- data :存放自定义模版,导入的toml文件(或json,yaml)
|- layouts :layouts目录存放的是网站的模板文件
|- static :static目录存放js/css/img等静态资源
|- <config class="tom"></config>l :config.toml是网站的配置文件
2.2 安装主题
Hugo官方主题:https://themes.gohugo.io/
Hugo官方主题GitHub:https://github.com/spf13/hugoThemes/
$ cd themes/
$ git clone https://github.com/spf13/hyde.git
在config.toml文件中指定hyde作为默认主题。只需添加一行:
theme = "hyde"
主题存放的路径为:themes\hyde,包含以下文件:
|- archetypes :存放default.md,头文件格式
|- layouts :主题模板文件
|- static :静态资源
|- theme.toml :主题配置文件
2.3 运行Hugo Server
Hugo内置http server,在你的站点根目录执行hugo server命令,即可在浏览器里输入:http://localhost:1313访问网站
。
$ hugo server --theme=hyde --buildDrafts
三、内容维护
3.1 发表文章:
$ 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才能看到页面。
3.2 列表页概要处理
通常在博客首页显示多篇文章,都采用了摘要显示的方式。这儿需要修改某个主题下面layouts/index.html
文件
{{ range first 10 .Data.Pages }}
<div class="summary">
<h1><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
<span class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</span>
{{ .Summary }}
</div>
{{ if .Truncated }}
<div class="read-more-link">
<a href="{{ .RelPermalink }}">Read More…</a>
</div>
{{ end }}
{{ end }}
默认的.Summary
显示70字符,有的时候显示的内容并不是自己想要截取的内容,可以在.MD
文档内容里,直接使用
<!--more --> 把more后面的空格删除再用
四、生成Github静态网站
$ 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项目中,并提交版本。
现在你可以打开浏览器访问:https://xinjiayu.github.io/ 你的博客了。