使用Hugo搭建GitHub个人博客

2023-07-22 13:05:46

主题概况

Hugo 是一个用 Go 语言编写的静态网站生成器。类似的静态网站生成器还有Jekyll、hexo等等。以上生成器都使用过，但感觉要么环境麻烦，要么生成静态页面步骤繁琐以及生成缓慢。如果你正想在GitHub上搭建个静态的博客，搜索一大堆都是关于Jekyll和hexo的相关文章，使用Hugo的相关文章却很少，但是我认为使用Hugo方便一点。本着学习分享的原则，下面整理下如何使用Hugo。

Hugo官方主页：https://gohugo.io/

安装指南

安装Hugo

在 Hugo Releases上下载最新版的Release程序。没错，下下来就是一个二进制的程序。

配置环境

本例以Widows为例设置Hugo运行环境变量，如需更详细的Windows/macOSX的步骤说明，请移步至官网：
Installation on OS X /
Installation on Windows

在本地电脑上建立以下文件目录：(文件路径随意)

D:\GitHub\Hugo\bin\hugo.exe

D:\GitHub\Hugo\Sites

我已将下载下来的Hugo二进制程序重命名为hugo.exe并放进bin文件夹内了。

设置Windows系统环境变量，我的电脑右键-->属性-->高级系统设置-->在"高级"标签页中-->环境变量...，选中PATH变量，并编辑...，在编辑值中新添加hugo程序的路径即可，一张图说明：

运行

安装并配置Hugo环境后，打开cmd命令行，可以直接使用hugo命令了。

$ hugo version

创建本地网站

生成站点

之前创建的Sites就是用来存放创建的网站的，创建文件夹名为blog的网站：

$ hugo new site blog

创建的站点文件目录说明：

|- archetypes ：存放default.md，头文件格式

|- content ：content目录存放博客文章（.markdown/.md文件）

|- data ：存放自定义模版，导入的toml文件（或json，yaml）

|- layouts ：layouts目录存放的是网站的模板文件

|- static ：static目录存放js/css/img等静态资源

|- config.toml ：config.toml是网站的配置文件

当前网站是没有任何内容的，需要下载个主题跑起来才有内容。

安装主题

这里暂时不使用git命令clone下载主题，我们通过手动下载方式进行下载。

Hugo官方主题：https://themes.gohugo.io/

Hugo官方主题GitHub：https://github.com/spf13/hugoThemes/

这里选取Hyde主题为例，从gitHub下载下来，将解压出的文件放到themes文件夹下。主题存放的路径为：Sites\blog\themes\hyde，包含以下文件：

|- archetypes ：存放default.md，头文件格式

|- layouts ：主题模板文件

|- static ：静态资源

|- theme.toml ：主题配置文件

运行Hugo Server

Hugo内置http server，在你的站点根目录执行hugo server命令，即可在浏览器里输入： http://localhost:1313访问网站。

$ hugo server --theme=hyde

（注明：需要指定主题，如果在config.toml中配置指定主题可以省略--theme参数）

发表文章

可以看到现在博客里没有文章，使用hugo new命令创建文章。

$ hugo new post/test.md

可以用文本文件或markdown编辑器打开文件 post/test.md ，并增加点内容。

+++
date = "2017-02-10T15:01:33+08:00"
title = "test"
draft = false

+++

Hello Hugo！测试内容

注意：默认创建的是草稿类型，需要将draft值改为false才能看到页面。

生成静态网站

$ hugo --theme=hyde --baseUrl="https://YOURNAME.github.io/"

所有静态页面都会生成到 public 目录下，生成静态网站后并push到你的GitHub Pages上，就能得到一个在线的个人博客了。

本文对GitHub如何使用不做详细介绍。请参考GitHub Pages在线帮助文档。

首先在GitHub上创建个Repository，命名为：YOURNAME.github.io(YOURNAME替换为自己的用户名)，然后用git 将刚才创建的YOURNAME.github.io项目clone下来。

将生成的 public 目录下所有文件拷贝到YOURNAME.github.io项目中，并提交版本。

OK！至此你可以打开浏览器开始访问：https://ciey.github.io/ 你的博客了。

码农公寓