Hugo搭建博客

[

Hugo是什么

Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。

为什么使用Hugo

版本兼容性更好

之前是有用过Jekyll，过了一段时间会有一些升级问题。配置过于复杂，不集中。

使用Hugo，你可以集成多个主题，主题之间的切换，只是在config.yaml / config.toml 里修改主题即可。

这是由于主题的原始文件是存放在themes，而内容与资源文件是有单独的位置存放。做到数据与模版隔离的

Hugo-File-Tree

怎样使用Hugo

以下的例子是使用以下主题作为例子 hugo-refresh

环境的安装

官方提供hugo的命令工具，我们可以使用以下的命令来安装hugo的命令工具

1
2
3
4
5
6
7
8
9
> brew install hugo

// 命令行会自动输出以下内容
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 2 taps (homebrew/core and homebrew/cask).
==> Downloading https://homebrew.bintray.com/bottles/hugo-0.54.0.mojave.bottle.tar.gz                                                                 
Already downloaded: /Users/bep/Library/Caches/Homebrew/downloads/ba894b1dba33feb6be39bf955a7e84f8f40dd8f558f5058e569a0bc21ecc5c19--hugo-0.54.0.mojave.
bottle.tar.gz

再者输入以下的命令，查看是否hugo的工具已经可以投入使用

1
> hugo version

创建你的博客工程项目

使用以下的命令，可以创建出一个博客工程项目。可以先用cd进入到你要存放的位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// vince的部分 类似一个文件夹名，你可以自定义自己的博客工程根目录名称
> hugo new site vince

// 以下是命令行的输出
Congratulations! Your new Hugo site is created in /Users/vince.zheng/Documents/github/Vince.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

安装主题

我们需要完成以下几步：

  1. 进入博客的根目录
  2. git初始化
  3. 添加主题的仓库到git的submodule里
  4. 添加主题设置到hugo工程的配置文件（博客的根目录有个config.yaml是博客的基本配置文件）
1
2
3
4
5
6
7
8
9
10
11
12
13
// 第一步：进入博客的根目录
cd vince【此处填写你自己博客工程的名称】

// 第二步：git初始化
git init

// 第三步：添加主题的仓库到git的submodule里
// 命令的是这样组装：git submodule add 【主题的git下载地址】 【最终存放主题的位置，`themes/`这个前缀是必须的，hugo会从`themes/`目录下寻找主题的文件】
git submodule add https://github.com/PippoRJ/hugo-refresh.git themes/hugo-refresh

// 添加主题设置到hugo工程的配置文件（博客的根目录有个config.yaml是博客的基本配置文件）
// 先普及：博客的配置文件存放（根目录/config.yaml)，主题的例子配置文件存放(根目录/themes/主题目录/exampleSite/config.toml or 根目录/themes/主题目录/exampleSite/config.yaml)
// 将主题里面的默认配置文件拷贝到博客的配置文件

创建第一篇文章

hugo提供一个命令可以执行创建文章的markdown

官方的Quick Start例子 
1
hugo new posts/my-first-post.md

此方法会导致如果想换总菜单的logo变得异常困难，yaml里面的路径的根目录是文章的名字再拓展的

建议采用以下的方式

1
> hugo new 一级目录(会在主页右上角展示，建议用于分大类上)/文章的标题(会自动创建成文件夹)/index.md

此时就会创建出你需要的markdown文件用于发布文章。存放在 Hugo工程目录/content/一级目录/文章标题/index.md

我的例子 比如我的一篇文章地址路径：vince/content/一级目录/文章标题/index.md

文章的进阶了解

一篇文章的文件存放目录

可能你会疑惑：下图中logo照片如何设置，请看YAML设置的例子

一篇文章的目录结构

YAML设置

YAML内供多种属性的设置。常用的属性有哪些呢？请看下方

YAML是什么，在哪里？ [YAML是什么可以点开此链接查看。](https://www.ruanyifeng.com/blog/2016/07/yaml.html) YAML所处的位置，在文章开头，被两行`---`所包围

YAML配置项目

YAML例子 
1
2
3
4
5
6
title: "Hugo搭建博客"
date: 2019-11-17T11:55:53+08:00
draft: true
tags: ["Hugo", ]
summary: "教你如何从0到1搭建hugo博客"
summaryImage: logo/hugo-logo.png

如何发布

发布到Github

使用你的github账号，创建一个工程。比如我在GitHub上的用户名叫jsonseng。那博客我需要创建一个叫 jsonseng.github.io 的工程。然后将此工程关联到本地目录的Repository

可以通过执行下面的命令

1
2
3
4
5
6
7
8
> cd Hugo工程目录
> git submodule add `Repository地址` public

// 执行发布操作，此时会把所有的文件导出到 public 目录
> hugo

> cd public
> // 执行git操作，把内容push到GitHub上

过几分钟后，可以打开你的博客地址（地址：https://你的用户名.github.io )