Hugo+Github搭建个人博客

July 9, 2020

Hugo是基于Go语言编写的静态博客框架，利用它结合Github Pages可以很容易的搭建出个人博客。

Hugo安装 #

Windows系统下安装步骤如下：

1.打开网站 https://github.com/gohugoio/hugo/releases
2.下载 hugo_x.xx.x_Windows-64bit.zip
3.解压然后安装到某文件夹内
4.将 hugo.exe 所在文件夹添加至Path环境变量
5.hugo version 验证是否安装成功

问题：因为众所周知的原因可能下载不成功。

其它问题等请参考 Hugo官网

hugo命令 #

使用方法:
  hugo
  hugo [flags]
  hugo [command]
  hugo [command] [flags]

节选的 command:
  new         为你的站点创建新的内容
  server      一个高性能的web服务器

节选的 flags:
  -D, --buildDrafts                包括被标记为draft的文章
  -E, --buildExpired               包括已过期的文章
  -F, --buildFuture                包括将在未来发布的文章

举几个栗子:
  hugo -D                          生成静态文件并包括draft为true文章
  hugo new post/new-content.md     新建一篇文章
  hugo new site mysite             新建一个称为mysite的站点
  hugo server -D       启动服务器并包括draft为true文章

建立站点 #

将会在运行此命令的位置新建一个名为myblog的站点：

hugo new site myblog

生成的站点目录及作用是：

.
├── archetypes     储存.md的模板文件default.md
├── content        存放所有的博客文章（.md文件）
├── data           储存数据文件供模板调用
├── layouts        存放的是站点的模板文件
├── static         存放js/css/img等静态资源
├── themes         存放站点的主题
└── config.toml    配置文件

注意： 此处archetypes、layouts和static文件夹的优先级高于主题下的同名文件夹。当需要稍稍修改主题时，复制到根目录下的对应文件夹再修改，则日后无git冲突问题。

此外，执行hugo命令后，还会生成一个用于储存生成静态文件的public文件夹。

添加主题 #

hugo主题非常多，如站点使用的是even主题，在博客根目录下执行：

$ git clone https://github.com/olOwOlo/hugo-theme-even themes/even

每个主题都会有不同的参数配置，将 themes/even/exampleSite/config.toml 复制到博客根目录下进行自定义配置。

新建文章 #

新建文章的代码为：

hugo new post/my-first-post.md

可通过 front-matter 针对每一篇文章单独进行设置，themes/even/archetypes/default.md 文件陈列了所有可用的参数，通常将该文件复制到站点根目录archetypes文件夹下并根据需要配置。如本站点的 front-matter 为：

---
title: "{{ replace .TranslationBaseName "-" " " | title }}"
date: {{ .Date }}
draft: true
description: ""
tags: []
categories: []
---
摘要部分
<!--more-->

PS: Hugo的配置文件和文章中引用图片都是从static作为根目录的。

运行站点 #

hugo server -t even --buildDrafts
or
hugo server --theme=even --buildDrafts
or
hugo server -D

PS: 若config.toml指定了theme可省略参数，–buildDrafts参数目的是指定编译draft为true的文章。

在站点根目录下运行此命令后，即可通过http://localhost:1313/访问博客站点。

发布到Github #

首先要创建一个Github仓库且名字为IDName.github.io，然后执行以下命令生成静态网站（public文件夹下）：

hugo --theme=even --baseUrl="https://IDName.github.io" --buildDrafts

PS: 若config.toml指定了theme或baseUrl参数则此处可省略。

然后依次执行以下命令：

cd public
git init
git add .
git commit -m "我的hugo博客第一次提交"
#关联远端仓库
git remote add origin https://github.com/IDName/IDName.github.io.git
git push -u origin master

注意这里有个问题是当每次本地写完博客后都需要提交至远程仓库，特别繁琐。故可以创建deploy.bat批处理文件自动执行：

::表示进入E盘
e:

cd E:\GoLang\myblog

hugo --theme=even --baseUrl="https://IDName.github.io" --buildDrafts

cd public
::git init 注释
git add .
git commit -m "updated"
git push

cd ..
pause

针对自己博客源地址进行相应修改即可。

PS: linux系统可编写makefile文件自动执行脚本。有条件的也可购买云服务器部署博客。

绑定个人域名 #

首先得有自己的域名，有了域名之后进行CNAME解析至https://IDName.github.io;
点击IDName.github.io仓库，在settings下的GitHub Pages中填写自己域名并保存，或直接在code页面中创建CNAME文件并填写自己域名。

PS：这里有个问题，当在本地public文件夹下git push出错时可能是由于修改了远程github仓，此时可以先git pull，然后在重新生成public并执行deploy.bat文件。

本文参考： olOwOlo的个人博客 HUGO主题book HUGO中文文档