使用hugo搭建个人blog
简要记录一下搭建本 blog 的过程。
下载 Hugo
从 github 上 hugo 项目的 release 下载适用自己电脑操作系统的 hugo 二进制文件
## 下载 hugo
$ curl -sL https://github.com/gohugoio/hugo/releases/download/v0.62.2/hugo_extended_0.62.2_macOS-64bit.tar.gz | tar zx
# 复制二进制文件到 PATH 包含的目录下
$ cp hugo_extended_0.62.2_macOS-64bit/hugo /usr/local/bin
生成 blog 项目
$ hugo new site blog
$ tree blog
blog
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
6 directories, 2 files
config.toml
是项目的配置文件,内容如下:
baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
根据自己的需要修改域名、语言代码和网站标题
安装主题
访问 hugo 主题网站,选择自己喜欢的主题,这里我选择了zen 将其复制到 blog/themes 下,并修改 blog/config.toml,增加以下内容:
theme = "zen"
创建 blog
$ hugo new posts/hello-world.md
会生成 content/posts/hello-world.md 文件,并且默认有以下内容:
---
title: "Hello World"
date: 2020-01-06T12:07:05+08:00
draft: true
---
draft: true
表明该文档还是起草阶段,不会生成静态文件
在 ---
下面写文章内容,格式为 Markdown
启动 hugo 预览服务
在写文章的时候,可以启动 hugo 的 HTTP 预览服务,监听本地 1313
端口:
# -D, --buildDrafts include content marked as draft
$ hugo server -D
hugo 通过 fsnotify 监视目录文件变化,即时读取和渲染修改后的 markdown 文件,并且通过 websocket 通知浏览器前端重新加载页面
排雷
刚开始下载的不是 extended 版本的 hugo,执行 hugo server -D
的时候报错:
Building sites … ERROR 2020/01/06 14:22:33 Transformation failed: TOCSS: failed to transform "sass/styles.scss" (text/x-scss): this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information
ERROR 2020/01/06 14:22:33 Transformation failed: TOCSS: failed to transform "sass/print.scss" (text/x-scss): this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information
Built in 11 ms
Error: Error building site: logged 2 error(s)
重新下载 hugo_extended_0.62.2_macOS-64bit.tar.gz
解决了问题
生成静态文件
在 blog 目录下运行以下命令生成静态文件
$ hugo
整个 blog 的静态文件在 public
目录下,将其托管到 web 上即可对外提供访问