Leslie Shang's Blog
Posts Tags Categories Links About
Leslie Shang's Blog

Contents

Hugo+Github Pages build a personal blog

Leslie Shang included in Blog
   431 words   3 minutes    views  

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访问个人博客网站页面。

Updated on 2021-09-14
Read Markdown
 Blog, Hugo, Github Pages
Back | Home