Hugo使用且部署GitHubPages

hugo的使用 20201121

Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。

安装Hugo

0.windows安装(releases)

下载地址:https://github.com/spf13/hugo/releases。

配置环境变量

验证测试是否安装成功

复制代码
hugo help

1. 二进制安装(推荐:简单、快速)

到 Hugo Releases 下载对应的操作系统版本的Hugo二进制文件(hugo或者hugo.exe)

Mac下直接使用 Homebrew 安装:

复制代码
brew install hugo

2. 源码安装

源码编译安装,首先安装好依赖的工具:

  • Git
  • Mercurial
  • Go 1.3+ (Go 1.4+ on Windows)

设置好 GOPATH 环境变量,获取源码并编译:

复制代码
$ export GOPATH=$HOME/go
$ go get -v github.com/spf13/hugo

源码会下载到 GOPATH/src 目录,二进制在 GOPATH/bin/

如果需要更新所有Hugo的依赖库,增加 -u 参数:

复制代码
$ go get -u -v github.com/spf13/hugo https://github.com/gohugoio/hugo.git

go get -u -v  github.com/gohugoio/hugo

生成站点

使用Hugo快速生成站点,比如希望生成到 /path/to/site 路径:

复制代码
$ hugo new site /path/to/site
这样就在 /path/to/site 目录里生成了初始站点,进去目录:

$ cd /path/to/site

创建站点成功

复制代码
提示:Congratulations! Your new Hugo site is created in xxx

站点目录结构:

复制代码
  ▸ archetypes/
  ▸ content/
  ▸ layouts/
  ▸ static/
    config.toml

创建文章

创建一个 about 页面:

复制代码
$ hugo new about.md

about.md 自动生成到了 content/about.md ,打开 about.md 看下:

复制代码
+++
date = "2015-10-25T08:36:54-07:00"
draft = true
title = "about"

+++

正文内容

内容是 Markdown 格式的,+++ 之间的内容是 TOML 格式的,根据你的喜好,你可以换成 YAML 格式(使用 --- 标记)或者 JSON 格式。

创建第一篇文章,放到 post 目录,方便之后生成聚合页面。

复制代码
$ hugo new post/first.md
打开编辑 post/first.md :

---
date: "2015-10-25T08:36:54-07:00"
title: "first"
 
---

### Hello Hugo

 1. aaa
 1. bbb
 1. ccc

安装皮肤

到 皮肤列表 挑选一个心仪的皮肤,比如你觉得 Hyde 皮肤不错,找到相关的 GitHub 地址,创建目录 themes,在 themes 目录里把皮肤 git clone 下来:

复制代码
# 创建 themes 目录
$ cd themes
$ git clone https://github.com/spf13/hyde.git

可以选择不同类型的皮肤使用,如:

复制代码
https://github.com/flysnow-org/maupassant-hugo

更多主题,请点击

运行Hugo

在你的站点根目录执行 Hugo 命令进行调试:

复制代码
$ hugo server --theme=hyde --buildDrafts

(注明:v0.15 版本之后,不再需要使用 --watch 参数了)

浏览器里打开: http://localhost:1313

关键第一步目前使用:

复制代码
hugo server --theme=maupassant-hugo --buildDrafts

部署

假设你需要部署在 GitHub Pages 上,首先在GitHub上创建一个Repository,命名为:hmx224.github.io (hmx224替换为你的github用户名)。

在站点根目录执行 Hugo 命令生成最终页面(关键第二步):

复制代码
$ hugo --theme=maupassant-hugo --baseUrl="http://hmx224.github.io/"

(注意,以上命令并不会生成草稿页面,如果未生成任何文章,请去掉文章头部的 draft=true 再重新生成。)

如果一切顺利,所有静态页面都会生成到 public 目录,将pubilc目录里所有文件 push 到刚创建的Repository的 master 分支。

复制代码
$ cd public
$ git init
$ git remote add origin https://github.com/hmx224/hmx224.github.io.git
$ git add -A
$ git commit -m "first commit"
$ git push -u origin master

浏览器里访问:http://hmx224.github.io/,即可使用hugo。

参考

相关推荐
SendTomo10 小时前
跨设备文件互传新方案
javascript·网络·webrtc·html5·p2p
我命由我1234520 小时前
CesiumJS 笔记 - 获取容器中心点、Cartesian3 clone 方法、修改 Cartesian3 对象的高度
前端·javascript·css·前端框架·html·html5·js
海天鹰4 天前
屏幕颜色检测
javascript·html5
芳心粽伙饭6 天前
HTML第一章 注释与快捷键
前端·html5
大鹏说大话9 天前
HTML5 地理定位 Geolocation:获取用户位置的“红线”与最佳实践
前端·html·html5
冷咖啡离 我的笨笨9 天前
通过(Node Js||.Net)基于HTML5的WebSocket实现实时视频文字传输(上)
javascript·.net·html5
并不喜欢吃鱼11 天前
一.前端web开发:零基础吃透 HTML5 核心知识
前端·html·html5
2601_9657984716 天前
Arrow Unlocker HTML5 Game Review: Keep Web Arcade Players Coming Back
前端·html·html5
梅孔立17 天前
Luckysheet 内网部署完整指南:从资源下载到 Vue3 集成
html5
软件开发技术深度爱好者18 天前
HTML5实现数学函数画图器
前端·javascript·html5