Contents

Hugo+Github Pages搭建个人博客

Hugo 初体验

hugo是什么?

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

hugo 中文官方文档

hugo 英文官方文档

why hugo?

比较流行的静态blog生成方案包括:

  • jekyll 需要ruby支持,也是gihhub上支持最好的方案。
  • Octopress 基于jekyll的增强方案。
  • hexo 基于nodejs,也是我之前一直在折腾的方案。
  • pelican 基于python。
  • hugo 基于Go语言的静态网站生成工具。

wordpress是一个非常笨重的系统(虽然也很强大),相比于hexo或hugo等方案用wordpress写blog,需要自己经常去看一下主机的情况,而且修改主题复杂的要命。

hexo解决了哪些问题呢?

  • 不需要主机的经费支出
  • 基于nodejs,技术栈相对友好,易于二次开发

但hexo在实际问题中也存在一些问题:

首先是版本更新,每次hexo发个大版本,更新的时候99.5%都会报错,然后无法渲染页面,这时候就需要到google上去找解决方案,可能需要重构主题。

其次是渲染问题,因为静态blog需要本地渲染,所以所有要写作的设备上都需要装一遍hexo(以及npm还有一大堆的包),然后你还得 祈祷 这些hexo的版本是一致的,这样渲染出来的页面才不会报错。

为什么选择hugo尼?

hugo超级轻量,平台随意安装,没有包管理的问题(就是说你呢,npm

hugo没有任何主题依赖,安装好之后里面真的 什么都没有

/images/2021-09-14-Hugo+GithubPages搭建个人博客/image-20210923094812886.png

你会发现这几个文件夹里几乎全是空的。

hugo速度超快,对于大概有十几篇文章的blog,每次生成全站的速度都不超过10ms,也能做到实时修改预览,真是爽快!

hugo安装

  1. Binary (Cross-platform)

    Hugo Releases下载适合您平台的版本。下载解压后,二进制文件可以从任何地方运行。可以将其加入到你的环境变量里,方便运行。

  2. Docker

    目前没有Docker的官方镜像,但有最新的发行版: https://hub.docker.com/r/klakegg/hugo/

  3. Homebrew (macOS)

    如果您使用的是 macOS 并使用Homebrew,则可以使用以下命令安装 Hugo:

    1
    
    brew install hugo
    
  4. MacPorts (macOS)

    如果您使用的是 macOS 并使用MacPorts,则可以使用以下命令安装 Hugo:

    1
    
    port install hugo
    
  5. Homebrew (Linux)

    如果您在 Linux上使用Homebrew,则可以使用以下命令安装 Hugo:

    1
    
    brew install hugo
    

    Linux 上的 Homebrew 安装指南可在他们的网站上找到。

  6. Chocolatey (Windows)

    如果您在 Windows 机器上并使用Chocolatey进行包管理,则可以使用以下命令安装 Hugo:

    1
    
    choco install hugo -confirm
    

    或者,如果您需要“扩展”Sass/SCSS 版本:

    1
    
    choco install hugo-extended -confirm
    
  7. Scoop (Windows)

    如果您在 Windows 机器上并使用Scoop进行包管理,则可以使用以下命令安装 Hugo:

    1
    
    scoop install hugo
    

    或者使用以下命令安装扩展版本:

    1
    
    scoop install hugo-extended
    

hugo安装是否成功

通过检查版本号的方式,确认 hugo 安装是否成功

1
hugo version

/images/2021-09-14-Hugo+GithubPages搭建个人博客/image-20210918165215417.png

hugo搭建个人博客

初始化网站项目

安装好之后,便可以初始化一个 hugo 项目,输入

1
hugo new site demosite # 命令格式,hugo new site <项目名称>

就创建好了文件夹,里面包括了以下的文件结构:

  • content 用来放文本和页面内容的地方
  • archetypes 用来放 .md 文件的模板
  • data 用来放特殊定义的数据(json yaml之类的)
  • layouts 用来放页面模板,也是我们后面会魔改的地方
  • static 存放源代码的静态资源文件(图片、css、js等)。渲染时,会直接将static目录的文件直接复制到public目录,不做任何渲染
  • themes 主题
  • public 用来存放渲染出来的静态文件

此时输入

1
hugo server 

会在本地启动一个服务器,可以访问 http://localhost:1313 看一眼。

当然这个链接里面完全是空的,什么都没有,毕竟文件夹里全部都是空的,没有内容也没有主题。

下载一个 hugo 主题

hugo 主题可以理解为是一种网站样式,你可以在该页面选择自己心仪的 hugo 主题。我当前使用的是 LoveIt 这个主题,集成了很多插件,很好用很方便的一个中文博客模板。

LoveIt 主题的仓库是: https://github.com/dillonzq/LoveIt.

进入该目录,初始化 git 项目,并且把主题仓库作为你的网站目录的子模块:

1
2
3
cd demosite
git init # 初始化 git 项目
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt #下载主题
  1. 博客会采用 git 项目方式管理,所以需要初始化 git 项目
  2. 采用 submodule 的方式管理主题库 theme,方便及时更新和管理

你也可以下载主题的 最新版本 .zip 文件 并且解压放到 themes 目录。

另外, 也可以直接把这个主题克隆到 themes 目录:

1
git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt

更多关于LoveIt主题官方网页文档

Tip

除非打算提交PR,否则不建议在主题的文件夹内直接进行修改,不然会给日后更新主题带来很多的麻烦。推荐把主题内需要修改的文件复制到站点根目录对应位置内(例如:/themes/LoveIt/layouts/partials/single/footer.html -> /layouts/partials/single/footer.html)之后进行修改。hugo在生成站点的时候,会优先使用根目录下的同名文件覆盖主题文件。

配置主题

使用 LoveIt 的标准配置文件模板,将项目根目录中config.toml文件替换为LoveIt中的config.toml文件。

1
cp themes/LoveIt/exampleSite/config.toml .

需要修改一下主题路径 themesDir 配置,将其注释掉

/images/2021-09-14-Hugo+GithubPages搭建个人博客/image-20210918170910245.png

创建文章

创建一篇空文章

1
hugo new posts/demo.md

另外,需要将生成文章头部的draft=true修改为draft=false,否则并不会生成草稿页面。

/images/2021-09-14-Hugo+GithubPages搭建个人博客/image-20210918180334832.png

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
---
title: "Hugo+Github Pages+Netlify搭建个人博客"
subtitle: ""
date: 2019-01-28T00:00:00.000Z
lastmod: 2019-01-28T00:00:00.000Z
draft: false
author: "Leslie Shang"
authorLink: ""
description: "Build a personal blog through Hugo, Github Pages and Netlify."

tags: [Blog, Hugo, Netlify, Github Pages]
categories: [Blog]
---

<!--more-->
Hello Hugo!

启动hugo服务器

启动 hugo 服务器,进入 http://localhost:1313/ 预览页面

1
hugo server -D

页面预览如下:

/images/2021-09-14-Hugo+GithubPages搭建个人博客/image-20210918180206100.png

如果出现git信息报错是因为还未提交分支至github上,可先在config.toml文件里把是否使用git信息设置为false

/images/2021-09-14-Hugo+GithubPages搭建个人博客/image-20210918181158649.png

构建静态页面

若要将博客托管在 github 上,需要上传静态页面。所以,需要使用 hugo 构建静态页面,构建命令如下:

1
hugo -D

Github Pages

GitHub Pages 是一项静态站点托管服务,它直接从 GitHub 上的仓库获取 index.html、HTML、CSS 和 JavaScript 文件,也可以通过构建过程运行文件,然后发布网站。

GitHub Pages 可以识别指定分支根目录或者/docs 目录下的静态站点,具体可以在个人站点的 setting 中配置。

/images/2021-09-14-Hugo+GithubPages搭建个人博客/image-20210922184007401.png

创建 Github Pages 项目

创建一个新的 github 项目,项目名称需要是<username.github.io>格式,如下图样例:

/images/2021-09-14-Hugo+GithubPages搭建个人博客/image-20210922184459517.png

hugo 生成静态页面

生成静态页面之前需要修改 config.toml 文件中的 baseURL 配置,将其修改为个人站点<username.github.io>,比如我的就是 leslie-shang.github.io

前面我们知道hugo -D可以生成静态页面,但该命令会默认将静态页面生成到 public 目录下,而 Github Pages 仅支持/根目录或者/docs 目录,所以我们需要将静态页面生成到 docs 目录下

1
hugo -d docs

上传 github pages 项目

静态页面生成完成后,便可以将整个静态页面以及本项目其他文件上传到 github 项目中。先使用git remote命令添加远端仓库,将文件提交(git add+git commit),最后推送到 Github Pages 项目中

1
2
3
4
5
6
git remote add origin git@github.com:Leslie-Shang/Leslie-Shang.github.io.git # 将本地 git 项目与 github 项目相关联
git fetch origin # 拉取 github 项目
git checkout main # 切换到主分支 main
git add . 
git commit -m "init github pages"
git push origin

当然,这里也可以采用git clone <YOUR-PROJECT-URL> && cd <YOUR-PROJECT>拉取项目、上传文件(git add/commit/push) 的方式,上传 github 项目。

之后即可通过username.github.io访问个人博客网站页面。