使用Hugo来生成静态博客

关于Hugo

Hugo是一个用Go语言编写的静态网站生成器,它使用起来非常简单,相对于Jekyll复杂的安装设置来说,Hugo仅需要一个二进制文件hugo(hugo.exe)即可轻松用于本地调试和生成静态页面。

  1. Hugo只有一个二进制文件(比如Windows里只是一个hugo.exe)
  2. Hugo可以将你写好的MarkDown格式的文章自动转换为静态的网页。
  3. Hugo内置web服务器,可以方便的用于本地调试。

Hugo官方主页

https://gohugo.io/

基础安装

  1. Git (需要安装)
  2. Hugo windows客户端 配置

    • Hugo官网下载window客户端,下载后解压指任意目录
    • 下载地址 https://github.com/gohugoio/hugo/releases
    • windows环境变量 path 添加 hugo.exe 所在路径
    • 安装配置完命令行输入 hugo --help 会有输出
  3. Github账号一枚,基本操作要会。

生成博客

  1. 新建一个文件夹用于保存hugo要生成的文件
  2. 上面的文件夹下执行命令行工具,在命令行中输入
$ hugo new site mysite
  1. 然后hugo会自动生成这样一个目录结构:
▸ archetypes/
▸ content/
▸ layouts/
▸ static/
config.toml

config.toml目录是hugo博客的配置文件,所有的全局配置都要放在这个文件中。接下来创建内容,

$ cd mysite
$ hugo new about.md

执行完后在content目录下会出现about.md文件。打开about.md文件,在文件上面可以看到这么几行:

---
title: "About"
date: 2017-07-28T20:54:37+08:00
draft: true
---

单篇博客的配置在+++内配置。title就是博客的标题,draft=true表示这是一篇草稿,Hugo默认是不会渲染草稿状态的博客的,完成博客后使用

$ hugo undraft content/about.md

命令可以改变博客的draft状态,或者手动到文件中修改。

正文的内容写在+++区域的下面,使用markdown的语法。比如:

## 我是一个标题
放一些内容

一般为了便于管理,不会直接将posts放在content文件下,可以在content目录内新建一个post目录:

hugo new post/first.md

可以看到在content/post/下产生了一个first.md文件。

安装主题

接下来安装主题,我们直接使用Hugo推荐的一些主题。比如说我使用的是blackburn这个主题:

git clone https://github.com/olOwOlo/hugo-theme-even.git themes/even

将主题git clone到themes/even目录下,在config.toml中配置:

theme = "even"

这样主题就安装好了。

启动Hugo

终于到了看实际效果的时候了,在博客的项目根目录下运行:

hugo server --buildDrafts --theme=even

如果在配置文件中已经配置了theme的话就不需要再指定 - -theme 参数了, - -buildDrafts 参数的意思是渲染所有的post包括 draft=true状态的。

打开浏览器,在地址栏中输入: http://localhost:1313, 就可以看到我们的博客了。

更改配置

主题地址,可参考 https://github.com/olOwOlo/hugo-theme-even/blob/master/README-zh.md

  • 一般来说使用默认的配置就可以了,但是要注意配置baseurl参数:

    baseurl = "http://这里是你的域名/"
  • 当我们把博客部署到服务器上的时候注意要把配置中的baseurl改成自己的域名。

主题的配置参数也是在config.toml中配置,各个主题的配置不尽相同,需要参考主题的文档。

关于部署

假设你需要部署在GitHub Pages上,首先在GitHub上创建一个Repository,命名为:sinnerliu.github.io(sinnerliu替换为你的github用户名)。
并且要在该Repository的setting里面,GitHub Pages部分设置一下

在站点根目录执行 Hugo 命令生成最终页面:

$ hugo --theme=blackburn --buildDrafts --baseUrl="https://sinnerliu.github.io/"

如果一切顺利,所有静态页面都会生成到 public 目录,将pubilc目录里所有文件 push 到刚创建的Repository的 master 分支。

$ cd public
$ git init
$ git remote add origin git@github.com:sinnerliu/sinnerliu.github.io.git
$ git add -A
$ git commit -m "first commit"
$ git push -u origin master

浏览器里访问:https://sinnerliu.github.io/ 就可以访问你的博客了

使用总结

日常操作总结

--新建博客markdown文件,并编辑博客内容(文件名为 **.md )
hugo new post/useGit.md
--生成静态页面
hugo --theme=blackburn --buildDrafts --baseUrl="https://sinnerliu.github.io/"
---发布
cd public 
git add .
git commit -m "new blog added"
git push origin master

博主资料备份静态博客

由于网络"抽风",github经常不能访问,博主使用的是Coding Pages

地址为:https://blog.gofinall.com

此博客目前仅用来备份一些资料文档,由于那啥*不允许博客评论,博客也就没有意思了;暂时当博客的备份吧!

此处评论已关闭