优麒麟2004 使用hugo+github搭建个人博客

title: "优麒麟2004 使用hugo+github搭建个人博客"
date: 2020-08-23T15:00:51+08:00
draft: false

1.安装 Hugo

sudo apt install hugo

2.建立hugo项目

hugo new site [project-name]
例如我的站点名称是 blog,创建命令如下：
hugo new site blog

3.添加主题

cd blog
git clone https://github.com/olOwOlo/hugo-theme-even themes/even

4.启动hugo

hugo server

5.配置主题

为了个人使用，需要修改 config.tom 文件，根据说明修改配置即可。
我的主题配置文件
https://github.com/nusr/blog/blob/master/config.toml
进入 blog/themes/even 文件夹，会发现文件结构与新建的 Hugo 项目的文件结构几乎是一样的。这样设置是为了用户的配置可以覆盖掉主题的配置。
比如我要自定义底部的显示，hugo-theme-even 底部配置由 blog/themes/even/layouts/partials/footer.html 控制。
为了覆盖掉主题的配置，在项目根目录下新建 blog/layouts/partials/footer.html 文件，填入自定义内容即可覆盖掉主题配置。其他文件的覆盖是一样的。
hugo-theme-even 使用了 Webpack 打包 js,css,并且文件名加入 hash 值，这种 css,js 是无法覆盖的，不过 hugo-theme-even 配置中有覆盖这种 css,js 的参数，详情参考我的文件配置

作者：nusr
链接：https://juejin.im/post/6844903831726194696
来源：掘金

6.添加新博客

添加新博客命令比较简单，命令如下：
hugo new post/my-first-blog.md
复制代码这个命令会使用模板创建文件，首先查找用户的模板文件，没有就会查找主题的模板文件。
hugo-theme-even 的模版文件 blog/themes/even/archetypes/default.md 比较复杂，新建 blog/archetypes/default.md 文件覆盖掉即可。
我的模板配置如下：

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: false
---

draft 参数控制网站上该页面是否显示。设置为 false 或者去掉该参数才显示。之前的内容会自动作为页面摘要。

7.打包

为了部署到线上，需要将 Markdown 文件打包成 HTML 文件。打包命令如下，even 是主题名：

hugo -t even

8.部署到 Github Pages

打包之后就是纯 HTML 文件，理论上所有支持部署静态页面的网站都是支持的。

我的部署命令如下，更多部署方式查看 gohugo.io/hosting-and…

#!/bin/bash
# 部署到 github pages 脚本
# 错误时终止脚本
set -e

# 删除打包文件夹
rm -rf public

# 打包。even 是主题
hugo -t even # if using a theme, replace with `hugo -t <YOURTHEME>`

# 进入打包文件夹
cd public

# Add changes to git.

git init
git add -A

# Commit changes.
msg="building site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

# 推送到githu
# nusr.github.io 只能使用 master分支
git push -f git@github.com:nusr/nusr.github.io.git master

# 回到原文件夹
cd ..

本文由博客一文多发平台 OpenWrite 发布！