我的第一次Hugo博客搭建过程（超级详细）

最近希望搭建一个自己的技术博客，用来记录在学的一些知识和技术，在比较了一下几个目前较为流行的静态博客Jekyll、Hexo、Hugo之后，还是决定采用Hugo。

Hugo是基于Go语言的一款静态博客，编译之后只有一个二进制文件，相比于Hexo基于nodejs、jekyll基于ruby等解释型语言而言搭建过程简单且博客编译速度非常快，所以即使文章数量和标签等很多时，Hugo也可以在几秒钟完成更新。但是Hugo目前使用率不及Hexo，所以目前可用的主题较少，并且网上的相关问题解决也不多，大多时候需要自己摸索。后面会更新Hugo博客主题的配置文章，现在先进行Hugo安装以及部署到Github Page的介绍：

安装过程可参照Hugo中文官网：https://www.gohugo.org

1 Hugo安装

二进制安装（推荐：简单、快速）

到Hugo Releases下载对应的操作系统版本的Hugo二进制文件（hugo或者hugo.exe），我这里时解压到了D:\hugo目录下

上一步操作，可以看到我们把hugo.exe解压到了D:\hugo下面。所以hugo命令只能在该目录下才能识别。但是我们想要把博客目录建到其他目录下，这就需要配置环境变量，在此不再赘述。

2 生成站点

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

hugo new site /path/to/site

这样就在 /path/to/site 目录里生成了初始站点，进去目录：

cd /path/to/site

站点目录结构：

  ▸ archetypes/
  ▸ content/
  ▸ layouts/
  ▸ static/
    config.toml

3 生成文章

创建一个 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

注意当md文件中的第四行drafts=true时，该文件为草稿，不会生成文章。应把改行删掉或者改为drafts=false。

4 安装主题

在官网主题列表中选择主题进行安装，我的博客时采用icarus主题进行安装的，具体的主题配置按照该主题的说明文件进行配置。

# 创建 themes 目录
cd themes
git clone https://github.com/digitalcraftsman/hugo-icarus-theme.git

5 运行hugo

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

hugo server --theme=icarus --buildDrafts

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

6 将Hugo部署到Github Page

6.1 安装git

根据该博客链接进行git的下载安装和环境配置：

https://blog.csdn.net/huangqqdy/article/details/83032408

6.2 部署

假设你需要部署在 GitHub Pages 上，首先在GitHub上创建一个Repository，命名为：jchenTech.github.io （jchenTech替换为你的github用户名）。

在站点根目录执行 Hugo 命令生成最终页面：

hugo --theme=icarus --baseUrl="http://jchenTech.github.io/"

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

cd public
git init
git remote add origin https://github.com/jchenTech/jchenTech.github.io.git
git add -A
git commit -m "first commit"
git push -u origin master

当输入 git remote rm origin https://github.com/jchenTech/jchenTech.github.io.git提示：fatal: remote origin already exists.时，需要删除远程地址。

git remote rm origin

浏览器里访问：http://jchenTech.github.io

7 部署过程中遇到的问题

7.1 页面加载过程中请求了http资源

在我安装icarus主题的过程中，在将博客部署到github上时，会导致页面不能正常显示，在页面F12显示Https的页面加载了http的js和css，提示Mixed Content错误，阻止了加载。因此，需要在E:\hugo\jchenBlog\themes\icarus\layouts\partials\head.html文件中加入下语句，将会把http请求转化为https请求：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

7.2 出现博客首页无法加载出文章列表问题

困扰了很久的问题，这是因为在安装hugo时选择的是当前最新版本0.65，但是hugo icarus这个主题是之前发布的，在hugo进行版本更新后，从0.57版本后，该主题有一些不兼容，并且目前该主题没有像其他主题一样针对hugo版本进行更新，所以需要下载老版本，如今的版本号为0.54，下载该版本然后替换掉该路径下的hugo二进制文件即可。

文章目录