Hugo（一）Github Pages 搭建个人博客

2020-06-05 约 915 字预计阅读 2 分钟次阅读

序言

Hugo 号称构建网站最快的框架，看过其他相关资料，hexo 在文章数量大的前提下，建站成静态文件的速度很慢，另外从主题（themes）这个角度去考虑，简单也是我的首选，于是从 hugo 下手自己的第一个博客网站。

安装

mac 安装 hugo

1

brew install hugo

确认安装成功，可用命令行检查版本号进行测试

1

hugo version

其他平台可用直接下载二进制包进行使用，无需编译

https://github.com/gohugoio/hugo/releases

构建 hugo 项目

新建博客站点

1

hugo new site MyBlogHugo

创建完站点后的文件结构

1
2
3
4
5
6
7
8
9


MyBlogHugo
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

添加 LoveIt 主题

Why choose it?

在 Hugo 主题市场挑了半天，还是决定用 LoveIt 这个主题。

这个 themes 简单好看，功能齐全，作者也一直在努力更新，还支持多语言版本，包括 seo、搜索等功能都有，可以参考 demo 地址。

将主题作为子模块

1
2
3


cd MyBlogHugo
git init
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt

启动 hugo server

启动 hugo 作为本地调试使用，在浏览器打开 http://localhost:1313/ 即可查看效果。
1

hugo server --disableFastRender
参数含义：

disableFastRender：实时将文章的内容更新到站点，不需要重启也能边修改边观看效果。
生成静态文件，会在MyBlogHugo 下面生成 public 的静态文件目录
1

hugo

我是使用 LoveIt 主题自带的 exampleSite 的 config.toml 来进行修改和配置的。

1
2


cd MyBlogHugo     
cp themes/LoveIt/exampleSite/config.toml .                

创建博客文章之前，我会使用example 的默认创建初始化详情来进行配置和修改.

1
2
3


cp themes/LoveIt/archetypes/default.md archetypes/
# 这样，你每次创建文章的时候，都会使用这里的默认配置进行创建
hugo new posts/test01.md

default.md 查看

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


\---
title: "{{ replace .TranslationBaseName "-" " " | title }}"
subtitle: ""
date: {{ .Date }}
lastmod: {{ .Date }}
draft: false #是否作为草稿，如果为 true，不会生产静态文件到 public 目录
author: "赵叔"
authorLink: ""
description: ""
   
tags: []
categories: []
   
hiddenFromHomePage: false
hiddenFromSearch: false
   
featuredImage: ""
featuredImagePreview: ""
   
toc:
  enable: true	#是 否展开右边目录栏
math:
  enable: false
lightgallery: false
license: ""
   
\---
   
<!--more-->
   
   

配置 Github Pages

登录 github，在设置那里创建个人 repo 仓库，一共 2 个，一个是 .github.io 作为个人站点 public 的静态文件，一个是 MyBlogHugo 作为除了 public 这个静态目录的所有文件的仓库。记得创建空repo，不要添加 README 文件哦。

初始化仓库 MyBlogHugo，public 目录要忽略，不上传

1
2
3
4
5
6
7
8


cd MyBlogHugo
echo "!public/" >> .gitignore 
git init
git remote add origin [email protected]:ZhaoUncle/MyBlogHugo.git
git add .
git commit -m "no public"
git pull --rebase origin master
git push -u origin master

初始化仓库 zhaouncle.github.io

1
2
3
4
5
6
7


cd public
git init
git remote add origin [email protected]:ZhaoUncle/zhaouncle.github.io.git
git add .
git commit -m "my blog hugo"
git pull --rebase origin master
git push -u origin master

之后就可以打开 http://<username>.github.io 进入到你的博客了。