使用Hugo搭建个人博客

Ruily Zhu

使用Hugo搭建个人博客

参考了Hugo中文文档、CoderZH Blog

前言

Hugo是一个静态网站生成器,使用起来非常方便简单.个人认为程序员必须要有一个自己的博客,不只是以后找工作有加分,最重要的是对自己的知识点、经验、爬坑的总结,理解是一回事,能写出来让大家理解又是另外一回事.

安装Hugo

本文章是针对mac系统的配置,其他系统仅供参考

Hugo Releases下载对应系统的二进制文件:hugo_0.14_darwin_amd64.zip
下载完解压将文件重命名为hugo
然后放入/usr/local/bin目录下

使用Hugo生成自己的站点

创建一个站点目录如/…/…/Documents/blog

$ hugo new site.../Documents/blog

然后Hugo会在blog目录下创建一个站点目录结构:

▸ archetypes/
▸ content/   //存放markdown文章
▸ layouts/   //存放网站模板文件
▸ static/    //存放静态图片
config.toml   //网站配置文件(可以配置baseurl、title、theme等)

cd到blog目录:

$ cd ../../Documents/blog

创建一个博文(最好放在content/post/目录下):

$ hugo new post/hello_Hugo.md

Hugo默认的是TOML格式的,至于其他格式,请自行了解

+++
date = "2015-10-25T08:36:54-07:00"
draft = true
title = "hello,Hugo"

+++

正文内容

date格式自行设置,title为文章标题

博客模板

点击模板列表自行挑选喜欢的模板,并复制对应git地址,如AIR主题
在上面创建的blog目录下创建themes目录

cd themes
git clone https://github.com/syui/hugo-theme-air.git

你可以在themes目录下针对模板的布局还有CSS样式进行自定义

开始你的博客之旅

在站点根目录执行命令:

$ hugo server --theme=hugo-theme-air --buildDrafts --watch

watch参数可以在你修改博客的时候保持实时刷新,执行命令后会有以下提醒:

Web Server is available at http://127.0.0.1:1313/
Press Ctrl+C to stop

打开对应的网址,就可以看到对应模板效果的博客

Github pages部署

在自己的github里创建个Repository,命名xxxx.github.io(xxxx为你的github用户名)

在站点根目录执行以下命令,会自动生成关于github路径的静态页面:

$ hugo --theme=hugo-theme-air --baseUrl="http://xxxx.github.io/"

Ok,这个时候你打开站点目录的public目录下,可以看到生成的所有静态页面

最后一步,把生成的静态页面push到github的master分支就可以了,推荐个mac git工具SourceTree,配置好路径,这样以后每次你写完文章直接push就可以了,以下为使用命令初始化、push

$ cd public
$ git init
$ git remote add origin https://github.com/xxxx/xxxx.github.io.git
$ git add -A
$ git commit -m "first commit for blog"
$ git push -u origin master

前言