随便写写

使用hugo搭建个人blog

Tags:

简要记录一下搭建本 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 上即可对外提供访问

Menu