使用Hugo来生成静态博客
文章目录
关于Hugo
Hugo是一个用Go语言编写的静态网站生成器,它使用起来非常简单,相对于Jekyll复杂的安装设置来说,Hugo仅需要一个二进制文件hugo(hugo.exe)即可轻松用于本地调试和生成静态页面。
- Hugo只有一个二进制文件(比如Windows里只是一个hugo.exe)
- Hugo可以将你写好的MarkDown格式的文章自动转换为静态的网页。
- Hugo内置web服务器,可以方便的用于本地调试。
Hugo官方主页
基础安装
- Git (需要安装)
- Hugo windows客户端 配置
- Hugo官网下载window客户端,下载后解压指任意目录
- 下载地址 https://github.com/gohugoio/hugo/releases
- windows环境变量 path 添加
hugo.exe
所在路径 - 安装配置完命令行输入
hugo --help
会有输出
- Github账号一枚,基本操作要会。
生成博客
- 新建一个文件夹用于保存hugo要生成的文件
- 上面的文件夹下执行命令行工具,在命令行中输入
shell $ hugo new site mysite
- 然后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
此博客目前仅用来备份一些资料文档,由于那啥*******,暂时当博客的备份吧!