使用Hugo搭建个人博客站点

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

安装Hugo

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

这里写图片描述

解压后得到 hugo_0.17_windows_amd64.exe 可以将其改名为 hugo.exe

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

使用Hugo搭建个人博客站点_第1张图片

于是改为其他方法:

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

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

生成站点

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

$ hugo new site mysite

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

$ cd mysite

站点目录结构为:

使用Hugo搭建个人博客站点_第2张图片

简要介绍一下,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!

安装皮肤

到 皮肤列表 挑选一个喜欢的皮肤,找到相应的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/ 即可预览

使用Hugo搭建个人博客站点_第3张图片

部署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)