如何用hugo搭建一个个人博客网站

准备工作

• 安装homebrew(可参考mac常用配置文章)

• 安装go环境(可通过homebrew安装)

• Github账号(用来托管静态页面)

环境的安装

安装Hugo

安装hugo有两种方式,二进制安装和源代码模式,这里推荐使用二进制模式,直接通过homebrew即可安装

brew install hugo

安装完成后通过以下命令查看

brew list 

如果有Hugo,即代表安装成功

生成一个站点

cd ~/  # 进入到个人目录下
hugo new site test-blog  # 生成一个名为test-blog的站点

1.png

如图进入test-blog目录,我们看到站点目录结构如下,我们只关注有注释的目录即可

>archetypes
>content    #静态页面目录
>data       
>layouts
>static     #静态文件目录
>thems      #主题目录
-config.toml#配置文件

创建页面

页面都必须生成在content目录下,如果有多个模块,可创建多个文件夹

这里举例生成两个模块

hugo new a/a.md
hugo new b/b.md

如下:

 我设置a/a.md title为test-A,内容随便写
---
title: "test-A"
date: 2019-11-26T17:48:47+08:00
draft: true
---
* a
* b
* c
................................................................
我设置b/b.md title为test-B,内容随便写
---
title: "test-B"
date: 2019-11-26T17:48:47+08:00
draft: true
---
1. a
2. b
3. c

安装主题

https://themes.gohugo.io/ 选择一款自己喜欢的主题

$ cd themes
$ git clone https://github.com/spf13/hyde.git

修改配置文件config.toml

baseURL = "http://example.org/"
languageCode = "zh-cn"
title = "My New Hugo Site"
theme = "hyde"              #theme即为刚下载的主题名称

测试运行

hugo server -D  
# 启动本地测试,

如图所示,即代表成功

2.png

我们可通过标示地址: localhost:1313进行本地预览

如下图即为运行结果

3.png

编译

hugo的编译相当快

hugo
#执行hugo命令,会看到目录下多了 public 目录,此即为生成的静态页面

发布

我们用Github Pages 来托管我们的静态页面,在github账号创建一个{username}.github.io,括号内为你的github用户名称,修改配置文件config.toml的baseURL为如下:

baseURL = "http://{username}.github.io"

将public内容推送到该目录即可

git init
git remote add origin https://github.com/{username}/{username}.github.io.git
git add -A
git commit -m "my blog"
git push -u origin master

接下来,即可使用 http://{username}.github.io 地址来访问你的个人博客了~

强制使用https

在github工程 Settings/GitHub Pages,勾选Enforce HTTPS 选项,即可启用https访问

ps:github的访问速度有些慢,国内的gitee pages也支持Hugo的托管,感兴趣的可以查看文档配置即可