Hugo 搭建 Blog 全攻略

December 14, 2018

Hugo 可以搭各种网站, 可以搭建个人 blog, 关键内容是基于 Markdown 的静态文本, 非常棒!

完全适合构建自已的知识系统中基于文本的知识库管理, 于是从 ink 转移到这里.

基础

参看Hugo跟着教程安装即可. 而后到 https://themes.gohugo.io/ 选择一个样式.

new site 时生成的站点数据我开源了出来, 到 hugo_blog 可以自行获取和修改.

效果在 http://www.bigzhu.net 可以看到

样式

Hugo 的样式不仅仅是样式, 而是决定了你是个什么样的网站. 配置项这些也会完全不同.

不像别的系统, 样式仅仅是个皮而已.

内容和配置

content 里的内容会被渲染, blog 通常是放在 posts 目录里.

文本内容的开头里需要配置最基础的一些属性:

---
title: "Hugo 搭建 Blog 全攻略"
date: 2018-12-14T13:36:18+08:00
draft: false
---

一看就懂, 我就不逐一说明了. draft 为 true 时候不会被渲染为 html, 这样一些私密的内容我也可以放在知识库里.

另外还有 tags category 等一些可选项.

和 vim 整合

我的 neovim 的配置, 我也在这里开源了, 可以比对和取用.

先说下这几行配置的作用:

let g:md_path='~/hugo_blog/content/posts/'
map <c-f> :execute 'silent cd' md_path<cr>:SearchMD 
nmap <c-g> 0v$<esc>:execute "silent ! hugo new ".g:md_path."'".getline("'<").".md'"<cr>: execute "e ".getline("'<").".md"<cr>

md_path 定义了我放置 Markdown 文件的位置.

第二行是用 ctrl+f 调用自己写的一个 python 脚本, 根据文件名快速搜索 Markdown 文件.

第三行是当按下 ctrl+g 时候, 新建光标所在那行的关键词的 MD 文件. 针对 hugo 做了一些修改调用了 hugo new , 如果是新建, 那个文件自动帮你生成了配置属性信息

ftplugin/markdown.vim 里面也有一些配置

map <buffer> <f1> i---<cr>title: "<c-r>=expand('%:r')<cr>"<cr>date: <c-r>=strftime("%FT%T%z")<cr><cr>draft: false<cr>---<cr><esc>

这一行的作用也是帮你插入那个配置信息

其他也就是标准的 vim 针对 Markdown 的支持, 没什么可以说的

自动部署

部署很简单, nginx 当静态文件发布出去就完了. 配置文件在这里 https://github.com/bigzhu/hugo_blog/blob/master/www.bigzhu.net.conf

mac 下装一个 brew install fsevents-tools

运行这个脚本

#! /bin/bash
notifyloop ~/Dropbox/hugo_content ./sync.sh

忘记说了, content 我是放在 Dropbox 下自动备份的. 只是建立了一个链接到 hugo 的 content, 所以这里监视的是真实的文件夹目录.

sync.sh 调用 hugo 生成 public 下的 html, 使用 rsync 同步到服务器, 完成自动部署.

也就是我在写文章时候, 每保存一次, 服务器也就更新了.


comments powered by Disqus