Hugo搭建博客(一)— 基本设置
1 安装Hugo
我在windows和ubuntu下安装过hugo,简要介绍下我的安装过程,其他方式可以参考官方文档 。
1.1 windows下安装
Hugo的安装方式有两种,一种是直接下载编译好的Hugo二进制文件。另一种方式是获取Hugo的源码,自己编译。
如windows使用二进制安装:
- 下载Hugo二进制文件 ,下载下来后,解压,将解压后的文件夹名称和文件夹里面的.exe文件都改为同一个名称,否则hugo无法运行。
- 配置计算机环境变量,右击计算机-属性-高级系统设置-高级-环境变量-系统变量,找到path,添加hugo路径。
- 在终端进行
hugo version
进行验证是否安装正确。
1.2 ubuntu下安装
第一种方式:从Github 下载deb文件,然后使用dpkg命令安装,这样可以自由选择版本,我使用的是这种方法。
过程如下:
1 2 |
wget https://github.com/gohugoio/hugo/releases/download/v0.69.0/hugo_0.69.0_Linux-64bit.deb dpkg -i hugo_0.69.0_Linux-64bit.deb |
---|
第二种方式:
1 |
sudo apt-get install hugo |
---|
但是版本比较老,官方也不推荐使用
其他方式可以参考官方文档
2 建站
2.1 创建项目
1 2 |
hugo new site my_website cd my_website |
---|
然后hugo会自动生成这样一个目录结构:
▸ archetypes |
default.md为模板 |
▸ content |
放的是你写的markdown文章 |
▸ layouts |
网站的模板文件 |
▸ static |
图片、css、js等资源 |
▸ config.toml |
网站的配置文件 |
这样就建立了新的站点。但此时我们的新站点无法启动,需要安装主题。
2.2 安装主题
可以从官方主题库中 选择,里面有上百种主题。我使用的主题是LoveIt ,感觉风格简约,并且功能齐全。
安装方式有两种,第一种:
直接把这个主题克隆到 themes
目录:
1 |
git clone -b master https://github.com/dillonzq/LoveIt.git themes/LoveIt |
---|
或者, 初始化项目目录为 git 仓库, 并且把主题仓库作为网站目录的子模块:
1 2 |
git init git submodule -b master add https://github.com/dillonzq/LoveIt.git themes/LoveIt |
---|
第二种方式:下载主题的 最新版本 .zip 文件 并且解压放到 themes
目录.特别适合在国内的我们,因为Github下载clone速度太慢了,尤其对于大文件。
2.3 基础配置
在根目录中 config.toml
进行配置,填写主题名称
1 2 3 4 |
baseURL = "http://example.org/" languageCode = "zh-CN" title = "My New Hugo Site" theme = "LoveIt" |
---|
注意:在key:和值之间,有且只有一个空格,参考front-matter 。
2.4 创建博客
创建第一篇博客
1 |
hugo new posts/first_blog.md |
---|
Hugo 允许在文章内容前面添加 yaml
, toml
或者 json
格式的前置参数。
注意
默认情况下, 所有文章和页面均作为草稿创建. 如果想要渲染这些页面, 请从元数据中删除属性 draft: true
, 或者设置属性 draft: false
.
2.5 在本地启动网站
1 |
hugo server |
---|
也可以在启动server时应用主题。
1 |
hugo server --theme=LoveIt --watch |
---|
参数说明:
1 2 3 |
* --theme 用于选择主题,如果在配置文件中选择了主题,这里就不需要使用了 * --buildDrafts 用于是否显示草稿文章 * --watch 用于实时监控变化,方便调试 |
---|
访问:http://localhost:1313/
2.6 构建网站
在项目根目录下直接使用 hugo
命令,会生成 public 目录,该目录下都是关于我们的 markdown 编译完成的 html 静态页面。博客安装好之后,就该进行部署了,可以部署到自己的网站,也可以部署到Git Page。我使用的是Git Page,可以参考我的另一篇文章Hugo+Github Pages搭建博客
3 配置相关问题(常见坑总结)
3.1 图片路径
如下面的config.toml文件,截取了部分
1 2 3 4 5 6 7 |
# 文章页面配置 [params.home] # 主页信息设置 [params.home.profile] enable = true # 主页显示头像的 URL avatarURL = "/images/avatar.png" |
---|
图片的路径都是相对于baseurl而言的,以static为根目录,所以这里的/images/avatar.png,是在static文件夹下。当初我就被这个坑了,的确是需要注意的。
3.2 本地和站点图片路径不一致
在 Typora 中编辑文章插入图片能够显示,而发布后网页中的图片不能正常显示(路径错误)。或者使用站点根目录(/
)引用图片可以正常加载显示,但是无法在 Typora 编辑器中显示图片。
有以下几种方法解决。
- 可以设置uglyURLs 来解决,但是这样url就会以.html结尾,可以参考博文 。个人不是很喜欢,因此使用了下面这种方法。
- 更改Typora 设置
具体步骤:
- 设置Typora ,将插入文档中图片默认保存在hugo的“staticimages文章名称”文件夹下
- 在博客文章的前置参数中加入typora-root-url,如: 1 2 3title: "typora test" draft: false typora-root-url: ../../static
- 设置图片根目录”既可以设定为绝对路径,也可以设置为相对路径,这里建议使用相对路径,便于跨系统的迁移后也能够重现结果。进行上述的设定后,任何新插入的图片默认都会保存在“staticimages文章名称”文件夹下,“Typora”会使用“static”作为根目录,在文章内使用相对于根目录的路径连接插入进来的图片。
- 此外还看到过一种方法,在github上开一个repository,专门用于存放图片,然后网站引用地址。不过我没有尝试,大家有兴趣可以试下。
3.3 评论区的设置
评论区我使用的是Valine,是一款快速、简洁且高效的无后端评论系统。具体可以参考valine配置 。这步重点是将自己的appId,appKey写入到config.toml中。
还有最重要的一点是,要更改环境。我就被这个坑惨了,当上面的配置都好之后,却发现然后没有评论区,搜索了很多,终于找到了关键。因为使用的是development环境。hugo server 的默认环境是 development,hugo 的默认环境是 production。
解决方法:
- 设置
HUGO_ENV=production
- 本地启动时:
hugo --environment production server
3.4 分类问题
需要自定义分类,比如我想再首页增加一个分类栏目,增加关于栏目。
首先需要知道的是,Hugo默认会产生 tags 和 categories 的分类,如果只需要这两个,可以不用在 config.toml 中声明。
其他的类别,需要在config.toml中增加配置,如series:
1 2 3 4 |
[taxonomies] tag = "tags" series = "series" category = "categories" |
---|
以及增加配置,只列举了一个,如下:
1 2 3 4 5 6 7 |
[[menu.main]] identifier = "categories" pre = "" name = "分类" url = "categories" title = "" weight = 3 |
---|
3.5 增加关于界面
关于界面只有一个页面,与上面的分类有所不同。
步骤:
1.新建了一个about.md文件在post同级目录下。
1 |
hugo new about.md |
---|
2.在config.toml中增加配置。
1 2 3 4 5 6 7 |
[[menu.main]] identifier = "about" pre = "" name = "关于" url = "about" title = "" weight = 4 //weight控制它在菜单栏的前后位置,根据情况设置 |
---|
注意:about因为只是单个页面,所以,不能添加到[taxonomies](网站所有的分类标签)目录中,要不然就不会显示。
- WPF中的MatrixTransform
- kvm虚拟化管理平台WebVirtMgr部署-虚拟化环境安装-完整记录(0)
- ruby学习笔记(3)--语法层面的先见之明
- jQuery操作Select
- ruby学习笔记(11)--symbol与hash参数
- zabbix监控-基本原理介绍
- OpenStack构架知识梳理
- mysql操作命令梳理(4)-grant授权和revoke回收权限
- 问未来
- ruby on rails + mysql 开发环境搭建
- CentOS 7.2下安装Mono 5.0
- ROR学习笔记(1):Rails 2快速创建GRUD应用
- API网关Ocelot 使用Polly 处理部分失败问题
- 使用GoogleAPI加载各种js框架
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法