首次搭建Hugo博客框架

March 23, 2020

2168 9 minutes and 51 seconds

好久没更新博客了，都是因为懒惰惹的祸~ 不过兴致来了开始更新博客，却因为想要升级一下hexo导致博客样式错乱了，so~~~~

What is Hugo

官方是这么描述Hugo的：

Hugo is a general-purpose website framework. Technically speaking, Hugo is a static site generator. Unlike systems that dynamically build a page with each visitor request, Hugo builds pages when you create or update your content. Since websites are viewed far more often than they are edited, Hugo is designed to provide an optimal viewing experience for your website’s end users and an ideal writing experience for website authors.

不过其实Hugo就是跟Hexo一样的静态网页生成器，能够帮助你在编辑Mardown格式的文档情况下，自动生成符合Github Pages的静态页面，本身是go编写的~~~

本质上其实跟Hexo是一致的

Why choose Hugo

下面说说具体为什么我把博客迁移到Hugo上，其实选择Hugo的原因主要有三点：

被npm的管理和Hexo的编写打败

其实最开始的时候我只是想升级一下hexo到最新的版本，然后将之前的hexo主题Next升级到官方最新，但是竟然出现了各种老版本兼容的问题。为了解决这个问题，花了我三天的时间，抓耳挠腮的想办法，各种百度、google教程，发现还是没办法把之前的样式完全还原回来，于是我放弃了我觉得世界上最乱的包管理工具npm，也顺便放弃了hexo这个博客利器吧，可能你是中文社区里面最好的博客系统，但是我用不习惯，我的问题~~~
Hugo的语法更类似Python web编程的template

之后找了很多其他的静态博客生成工具，然后比对了一番之后，还是决定选择Hugo作为新的博客生成工具，其实主要原因就是它是用go编写的，直接安装二进制就行，不需要依赖之前我烦的透顶的npm了，而且拜读了官网的说明，发现他的template语法跟Python的 Jinja2 其实很像，也很好记，油管的视频跟着学一遍很快就上手了，现在这个博哥样式就是基于人家的主题，自己修改的，这个入门门槛着实要低了不少，看到自己的博客跟千篇一律的Hexo NeXT拉开了差距，我像朱一旦一样的笑了起来~~~
个人感觉主题的样式要比jekyll更好看点

另外要说的一个原因就是在对比jekyll的时候出现的一个颜狗问题，没别的，jekyll依然是Github Pages领域顶尖的，但是实在是没找到好看的主题，所以放弃了~~~

Getting Started

Install Hugo

首先第一步就是进行Hugo的安装，由于Hugo是用Go编写的，所以它是编译成二进制的包，因此所有平台都是支持的，官方也提供了很多编译后的包自行下载就好：

macOS (Darwin) for x64, i386, and ARM architectures
Windows
Linux
OpenBSD
FreeBSD

在官方提供的以上编译包之外，只要是Go的编译工具能运行的地方，都可以clone源码进行编译安装。

macOS using Homebrew

brew install hugo

linux using APT

sudo apt install hugo

Windows using choco

choco install hugo --confirm

Windows using scoop

scoop install hugo

其实本质上就是将编译后的Hugo的二进制文件放到了你的/usr/bin目录下，或者是windows系统的path里面，不难理解，此外chocolate和scoop两个windows的命令行工具之后会有空再另写一篇博客来说~

Basic Usage

安装完成之后在你的命令行终端上就有了hugo的命令，具体你可以在你的终端中输入hugo help进行测试，如果出现以下内容，那么恭喜你，安装成功了~

Loading personal and system profiles took 1175ms.
 chenh@RYUCHEN-HOME-DE > E: > hugo help
hugo is the main command, used to build your Hugo site.

Hugo is a Fast and Flexible Static Site Generator
built with love by spf13 and friends in Go.

Complete documentation is available at http://gohugo.io/.

Usage:
  hugo [flags]
  hugo [command]

Available Commands:
  config      Print the site configuration
  convert     Convert your content to different formats
  deploy      Deploy your site to a Cloud provider.
  env         Print Hugo version and environment info
  gen         A collection of several useful generators.
  help        Help about any command
  import      Import your site from others.
  list        Listing out various types of content
  mod         Various Hugo Modules helpers.
  new         Create new content for your site
  server      A high performance webserver
  version     Print the version number of Hugo

有了上述命令后咱们生成一个新的博客目录 hugo new site /which/path/you/prefer

然后只需要了解三个命令你就可以开始你的博客编写了

启动本地hugo预览环境

hugo server
创建hugo的文档

hugo new post/xxxx.md
生成hugo的静态页面

hugo

之后会在你的目录下面生成一个public文件夹，将里面的内容push到你的Github Pages仓库就好了

其他细致的说明后续博客中会写到~~~

Directory Structure

然后就是Hugo博客的目录结构，这个是最基础的组织结构，能够有效地帮你组织你的博客内容分布，同时也是Hugo在帮你生成博客的时候会找寻文件的目录

.Your Site
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

archetypes

这里面的文件是当你进行hugo new xxx指令的时候，生成的模板文件

举个例子来说，就是当你每次编写post(就是博客主体，你一可以根据需要改名)的时候，总有一些内容是重复的也就是一些头信息，这个时候在这个目录下面写一个post.md文件，将头部信息的未填充内容的格式放在里面，下次生成的时候将自动带上这个内容。

content

这个目录就是博客文档目录了，你所有的博客文档内容都写在这个下面，可以按需分门别类的创建多级目录

data

数据类型的文件，hugo在生成文件的时候可以去读取里面的内容，属于高级一点用法了，前期一般用不到

layouts

编写html样式的目录，你的博客想长成什么样，全看这里写的好不好~~~

static

静态资源文件，可以放图片，然后当成图床使用，也放入一般的js和css

themes

主题目录，同大多数静态页面生成器一样，hugo的主题和内容不是捆绑的，可以有很多的主题，全看你的高兴

config.toml

这个就是总体的配置文件了，它决定了你的hugo博客的功能内容

总的来说这个Hugo还是蛮符合我的胃口的，下次有机会详细说说具体我是如何使用的，这次就先说的到这，本来也不想写个千篇一律的博客内容，这个总的来说就是总结一下自己学习的基础入门内容

推荐查看官方文档进行学习，然后就是找别人写的主题的源码好好看看：

官方文档内容 HugoDoc

官方油管视频 Youtube