使用Hugo搭建博客
把博客从hexo换成hugo.
hexo的 node_modules
目录下有 6k+ 文件, 多来几个站点真的是伤不起. 反正博客建好了也不一定会更新, 用啥都一样, hugo能节省几千个inode呢😂.
hugo 初探
hugo 搭建博客的方式和 hexo 差不多, 都是由 hugo/hexo 渲染 markdown 文档, 生成一系列的静态页面. 可以选择将生成的页面部署在 Github Pages 上面.
安装hugo
有多种安装方式:
- 下载预编译好的二进制文件, 解压即可使用.
- 从源代码编译, 需要安装 golang. 一开始我使用该方式, 然后发现 github 最近由于不可描述的原因, 相当慢, 只能挂代理.
- 使用发行版包管理器提供的包, 可以使用 bash 的 Tab 补全. 缺点是版本可能相对更旧一些.
- 使用 snap 包, 更新比发行版包管理器提供的包快. 但是发现 Windows 10 wsl 里面似乎没法使用 snap?
最后选择放弃自己编译, 使用 Ubuntu 18.04 仓库里面提供的包, 版本也不算太旧. 可能 Ubuntu 18.04 才出来的原因吧.
apt-get update
apt-get install hugo
快速上手
初始化站点
# 进入放网站源文件目录
cd /some/where
# 初始化一个网站
hugo new site migueltek.com
cd migueltek.com
在该文件夹下已经有一些必需的文件(夹)了.
配置一个主题
接下来配置一个主题, 配置主题前我先将网站加入到版本管理中, 方便后续的修改等.
这里使用 Mainroad 主题, 更多主题可以在 themes.gohugo.io 上查看.
# 将网站加入 git 版本管理
git init
# 下载主题
git submodule add https://github.com/vimux/mainroad themes/mainroad
如果不需要使用 git 版本管理可以直接到 github 上下载 zip 源码, 解压到 themes/
文件夹即可.
配置主题和 hugo
修改 config.toml
, 直接贴配置:
# 选择主题
theme = "mainroad"
# 语言
languageCode = "zh-cmn"
# 如果使用了中文, 设置下面的选项帮助 hugo 正确统计文章字数等
hasCJKLanguage = true
enableEmoji = true
baseURL = "/" # 网站的域名
title = "网站的标题"
paginate = "10" # 每页多少个主题
[Author] # Used in authorbox
name = "站长昵称"
bio = '个人经历'
avatar = "img/avatar.png" # 头像, 存放在 主题或者网站的 static/ 目录下
[Params]
subtitle = "网站的副标题" # Subtitle of your site. Used in site header
description = "Miguel's Personal blog about everything" # Description of your site. Used in meta description
opengraph = false # 不使用 FaceBook 的 OpenGraph
twitter_cards = false # 不显示 twitter 链接
readmore = true # 显示 "继续阅读按钮"
leftsidebar = false # 将侧边栏移动到左边
authorbox = true # 在页面底部显示站长信息
post_navigation = true # Show post navigation at bottom of pages if true
postSections = ["post"] # the section pages to show on home page and the "Recent articles" widget
#postSections = ["blog", "news"] # alternative that shows more than one section's pages
dateformat = "2006-01-02" # change the format of dates
[Params.widgets]
search = true # Enable "Search" widget
recent_articles = true # Enable "Recent articles" widget
recent_articles_num = 5 # Set the number of articles in the "Recent articles" widget
categories = true # Enable "Categories" widget
tags = true # Enable "Tags" widget
tags_counter = false # Enable counter for each tag in "Tags" widget (disabled by default)
# Enable "Social" widget, if any of "social_*" set a value
# social_facebook = "username"
# social_twitter = "username"
# social_linkedin = "username"
social_github = "GITHUB用户名"
social_email = "邮箱地址"
# social_google_plus = "profileid"
创建一个测试页面
在站点目录下运行:
hugo new post/hugo.md
注意: 这里官网写的文档是 hugo new posts/my-first-post.md
似乎 posts
是错误的? 还是主题影响的?
markdown 文件位于 content/post
目录下, 编写 markdown 文件, 写完后将头部的 draft: true
修改为 draft: false
.
运行 hugo 的测试服务器: hugo server -D
, 在浏览器中打开 http://localhost:1313 即可测试.
生成发布所需的静态站点
在站点目录下运行:
hugo --cleanDestinationDir
默认会将文件生成在 public/
文件夹中, 请注意根据需要配置你的 .gitignore
文件.
注意: 以下标签的文章不会被编译:
Content with a future publishdate value
Content with draft: true status
Content with a past expirydate value
自定义的静态文件可以存放在站点的 static/
目录下, 在生成站点时会将 static/
目录下文件全部复制到 public/
目录下, 该目录的优先级最高, 会替换主题的 static/
已有的文件.
魔改
修改主题的翻译
主题目录中有 i18n/en.yaml
将里面的短语翻译后另存为i18n/zh-cmn.yaml
即可, 自定义的 copyright 信息也可以在这里修改.
编辑 config.toml
, 添加:
DefaultContentLanguage = "zh-cmn"
替换 Google的CDN
主题的 layouts/partials/header.html
里面:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700">
这一行会导致国内打开页面奇慢无比. 几个解决方案:
- 替换 url 为国内的替代CDN.
- 直接删除/注释掉这一行, 使用浏览器默认的字体.
- 手工将这个 css 和其需要的 woff2 字体下载保存, 修改 css 的url, 由网站提供这些资源.
记得顺便将这两行删除/注释掉, 虽然不影响:
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//fonts.gstatic.com">
添加代码语法高亮
我博客中需要插入一些代码文本, 默认的显示不够漂亮, hugo 的语法高亮没测试, 我直接使用 highlight.js 库完成:
首先在 highlightjs.org 下载 highlight.min.js
, 保存到主题的 static/js/
目录.
然后在 github 下载一个合适的代码高亮主题, 保存到主题的 static/css/highlight.min.css
修改主题的 layouts/partials/header.html
, 在 <head>
标签中添加:
<link rel="stylesheet" href="/css/highlight.min.css">
编辑 layouts/partials/footer.html
, </body>
标签前添加:
<script type="text/javascript" src="/js/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
其他 hugo 的配置
permlink 配置, 修改 config.toml
:
[permalinks]
post = "/:year/:month/:day/:title/"
更多标签可以在 hugo 官网查看.
给主题添加菜单:
首先创建 about
页面并加入自己的联系方式:
hugo new about/_index.md
修改 config.toml
, 添加:
[menu]
[[menu.main]]
identifier = "categories"
name = "分类"
url = "/categories"
[[menu.main]]
identifier = "tags"
name = "Tags"
url = "/Tags"
[[menu.main]]
identifier = "about"
name = "联系我"
url = "/about/"
文章的 Tags 和分类:
在文章的头部加入:
categories:
- "分类1"
- "cata n..."
tags:
- "标签1"
- "标签2"
- "标签n"
文章的摘要:
在 markdown 正文中使用
<!--more-->
来分隔首页中显示的摘要的内容.
github CNAME配置:
在 hugo 站点 static
目录下创建 CNAME
文件, 内容是站点的域名.