Hugo 搭建

Posted on
| 共 1234 字,阅读约 3 分钟,浏览了

来说说怎么用 Hugo 搭建一个网站吧。

先说下为什么选择了 Hugo,我搜了一些同类的产品,发现违反中国广告法的就这个 The world’s fastest framework for building websites | Hugo,于是就选了它。

安装 Hugo 很简单,正常情况下只需要一条命令。

brew install hugo

如果 brew install hugo 安装失败的话,那么可以采用手工的方式安装,先去 Releases | Hugo下载一份对应系统的安装包,这里你会看到 hugo_extended_0.89.4_macOS-64bit.tar.gz hugo_0.89.4_macOS-64bit.tar.gz 两个略有不同的下载包,如何下载自己需要的版本呢。在自己亲自使用过之后发现搭建过程中有些复杂的主题需要 hugo_extended 的版本才能运行,有些简单的则不需要。所以如果有自己改主题的需要那么建议安装 hugo_extended 的版本,一步到位。

版本包下载好后正常解压,然后 cd 切换到解压后的目录。 hugo_extended

当前目录下输入下列命令设定权限

chmod +x hugo

接着输入如下命令将 Hugo 的目录移动到 bin 下。

mv hugo /usr/local/bin/

最后验证下是否安装成功,hugo version,当界面出现完整的版本信息就说明 hugo 已经安装完毕,就可以进行下一步的配置了。


接下来就是必不可少搭建环节了。

首先找个需要放置项目的文件夹初始化,这个步骤枯燥但又有趣

hugo new site Mysite

hugo 会在当前目录下生成一个 Mysite 的目录,在 Mysite 里会自动创建如下文件

名称 含义
archetypes 定义配置属性,无论hugo new 命令在何时使用,这些属性都会添加到 post front matter
content 放置文章内容的目录,用来存放站点的的内容,可以创建子目录,相应的,站点会生成对应的sections。
data 用来存放用来生成站点时,使用的配置的文件
layouts 布局文件,存放 .html 布局模板文件,对应不同的内容页面的模板
static 储静态文件,比如 css、javascript、images等其它静态内容
themes 主题目录
config.toml 根目录下的配置文件

这时候一个基本的 Hugo 就搭建好了,接下来为了使网页有个好看的外表需要先安装下主题,这里有两种安装方式,一种方式是使用 Git 直接下载(保持 Mysite 目录不变)

git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

还有一种方式是直接到 https://themes.gohugo.io/ 下载主题包解压到对应目录。

主题下载完毕还需要在 config.toml 里加上一行,声明使用了此主题,敲命令的过程是枯燥的,但是选主题的过程是有趣的。

theme = "ananke"

到这一步主题就安装完毕,笔墨都准备好了,就差一张纸了。

仍然有两种方式创建文章,第一种是官方推荐的命令行方式

hugo new posts/my-first-post.md

第二种是用自己习惯的编辑器在 Mysite/content/posts/ 目录下新建一个 my-first-post.md

文件创建完毕后就可以开始书生意气,挥斥方遒了。在 hugo 里一个完整文章的 md 文件包含如下内容

---
我是 front matter
---
我是 summary
<!--more-->
我是点下继续阅读后,在内页才能看到的内容

Front Matter

Front Matter 是指用一定格式的头信息,来描述这个页面的一些属性,大概格式如下:

---
title: Hugo手把手安裝教學
date: 2021-11-30 00:00:00
tags:
  - Hugo
  - Host
  - Github
categories:
  - 示例-demo
  - 网页-Website
  - 教学-Tutorial
---

summary

summary 就是文章的主体,是真实世界以外的另外一种展示形式。


至此已经创建了一篇文章,下面就要通过 hugo 生成对应的网页,输入

hugo server -D
serverD

这时候在浏览器里输入 http://localhost:1313/ 就可以看到自己配置完主题生成后的页面,到这一步为止,一个利用 Hugo 搭建的网站就算完工了,剩下的就是在有限的日子里留下一些字迹。


写这篇文章的时候突然发现 Typora 收费了,一瞬间其实是有点不能接受,于是去找平替, 这个时候 Mark Text 就趁虚而入在我硬盘里买了房。

📝 评论
评论区加载中,请稍等