使用Hugo搭建个人博客站点

阳光穿透心脏的1/2处 2022-07-16 12:19 588阅读 0赞

Hugo是个什么东东这里直接忽略，想了解的请查阅其他资料，我们直接上手操作。

## 安装Hugo ##

到 [Hugo Releases][] 下载对应的操作系统版本的Hugo二进制文件

![这里写图片描述][20161018154242294]

解压后得到 hugo\_0.17\_windows\_amd64.exe 可以将其改名为 hugo.exe

按理双击exe即可安装，不知为何在我这里不行

![这里写图片描述][20161018154649733]

于是改为其他方法：

C盘新建文件夹 hugo\\bin ,将hugo.exe放在bin目录下

`在path中设置环境变量 C:\hugo\bin;`

## 生成站点 ##

使用Hugo快速生成站点，进入到 C:\\hugo

$ hugo new site mysite

这样就在hugo目录里生成了初始站点，进去目录

$ cd mysite

站点目录结构为：

![这里写图片描述][20161018154659983]

简要介绍一下，config.toml是网站的总配置文件，content目录里放的是markdown文章，

layouts目录里放的是网站的模板文件，static目录里放的是一些图片、css、js等资源。

创建一篇日志文件

$ hugo new post/first.md

执行完后，会在content/post目录自动生成一个markdown格式的first.md文件：

可以简单修改一下里面的内容，比如：

+++
    draft = true
    date = "2016-10-18T13:36:45+08:00"
    title = "第一篇Hugo文章"
    
    +++
    
    ### 你好！Hugo！

## 安装皮肤 ##

到 [皮肤列表][Link 1] 挑选一个喜欢的皮肤，找到相应的Github地址，

以 `https://github.com/allnightgrocery/hugo-theme-blueberry-detox.git` 为例，将主题clone到themes目录下

$ cd themes
    $ git clone https://github.com/allnightgrocery/hugo-theme-blueberry-detox.git detox

## 本地预览 ##

在 \\mysite 目录下启动 hugo server

$ hugo server --theme=detox --buildDrafts --watch

浏览器访问：`http://localhost:1313/` 即可预览

![这里写图片描述][20161018154713024]

## 部署Github ##

首先在GitHub上创建一个Repository，命名为：`itbirds1900.github.io` (itbirds1900替换为你的github用户名)。

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

$ hugo --theme=detox --baseUrl="https://itbirds1900.github.io/"

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

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

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

浏览器里访问：[Hello Hugo][]

[Hugo Releases]: https://github.com/spf13/hugo/releases
[20161018154242294]: /images/20220716/cb86d4a98ac14e70a35a73971fdbe247.png
[20161018154649733]: /images/20220716/77ecd45106fd40149b6608a38696ac07.png
[20161018154659983]: /images/20220716/a03c0ca820ad414292c8b723b0908692.png
[Link 1]: http://www.gohugo.org/theme/
[20161018154713024]: /images/20220716/a0f6e373fb4845568eb16d2bad376ff4.png
[Hello Hugo]: https://itbirds1900.github.io/