Hugo是开源的静态网站生成器,用go语言编写,生成网站速度非常快。本文以Windows为例,介绍如何使用Hugo搭建博客

下载Hugo

  1. 在本地创建1个文件夹,如 D:\Program Files\Hugo,然后在Hugo文件夹下再创建2个子文件夹

    #存放Hugo可执行文件
    D:\Program Files\Hugo\bin
    #存放网站文件
    D:\Program Files\Hugo\Sites
    
  2. 前往官方下载地址Hugo下载,下载完成后解压到上一步创建的D:\Program Files\hugo\bin文件夹

  3. D:\Program Files\hugo\bin添加到系统变量path

  4. 验证Hugo安装,输入hugo version,出现如下提示说明安装成功,如果没有出现下列提示,请检查环境变量path是否配置正确

    > hugo version
    Hugo Static Site Generator v0.53-8FC339DC2529FF77E494A1C12CD1FF9FBCB880A4 windows/amd64 BuildDate: 2018-12-24T08:26:16Z
    

创建网站

安装完成后,接下来创建网站

  1. 进入Sites目录,输入hugo new site example.com,其中example.com是网站名,生成网站成功后会在路径Sites下创建example.com文件夹

    hugo new site example.com
    
  2. 进入网站文件夹D:\Program Files\Hugo\Sites\example.com,可以看到网站的目录

    > tree example.com
    D:\PROGRAM FILES\HUGO\SITES\EXAMPLE.COM
    ├─archetypes
    ├─content
    ├─data
    ├─layouts
    ├─static
    └─themes
    
    • archetypes 使用hugu new post生成新文章的模板,可以自定义里面的值
    • content 存放网站内容
    • data 存储Hugo在生成您的网站时可以使用的配置文件
    • layouts 以.html文件的形式存储模板,指定如何将内容的视图呈现到静态网站中
    • static 存储所有静态内容:图像,CSS,JavaScript等,当Hugo构建您的站点时,静态目录中的所有资产都将按原样复制
    • themes 存放主题
    • config.toml 配置文件

添加主题

下载主题

Hugo主题可以在Hugo官方主题中选择,进入某个主题的详情页会看到DOWNLOAD按钮,点击后跳转到Github页面,复制Github地址,可通过git submodule add命令或git clone命令下载,这里以even主题为例

  • 通过git submodule add以Git子模块的方式下载(推荐)

    进入网站文件夹,使用git init初始化后再下载主题

    cd example.com
    git init
    git submodule add https://github.com/olOwOlo/hugo-theme-even.git themes/even
    
  • 通过git clone下载(此方式下载的主题带有.git和网站本身的Git版本控制产生冲突)

    进入网站文件夹,使用git clone直接下载

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

复制主题的配置文件

下载完后,找到主题目录/themes/even/exampleSite下的配置文件config.toml,将该文件复制到网站文件夹下替换原来的config.toml,根据需求更改配置文件即可。也可以同时将/themes/even/exampleSite下的全部文件复制到网站目录下,/themes/even/exampleSite/content包含了一些示例文章可作参考

主题的选择

主题最好选择国人制作的,考虑到评论系统,社交分享,SEO优化等都更适合国内的情况,个人推荐的主题hugo-theme-evenhugo-theme-janehugo-nuohugo-theme-cactus-plus

创建一篇文章

创建文章前,可以将主题文件夹下D:\Program Files\Hugo\Sites\blog\themes\hugo-tranquilpeak-theme\archetypes的内容复制到网站根目录的archetypes文件夹下,这个是文章的模板文件

在网站目录下,创建一篇文章,其中my-first-post是文章名字,文章会保存在coneten/post目录下

hugo new post/my-first-post.md

由于archetypes文章模板的作用,生成的文章开头,会带有一些配置字段,可以按需要更改模板中的配置

title: "Hugo搭建博客"
date: 2019-01-20T20:50:33+08:00
categories:
- 其它
- 博客
tags:
- Hugo
- 博客
keywords:
- Hugo
- 博客
thumbnailImage: https://d33wubrfki0l68.cloudfront.net/d7c79b5c53384a57cfcf5bfb1a3f6f009a058b0b/16f81/images/gopher-hero.svg

注意: 有的主题打开网站后看不到网站中创建的文章,是由于主题默认的路径为posts而不是post,此时可将文件夹名称post改为posts,创建文章时命令改为hugo new posts/my-first-post.md,也可以修改配置文件config.toml中指向的文件夹路径

使用Markdown编辑文章my-first-post.md的内容,推荐Typora编辑器

启动Hugo服务

编辑完成后,需要本地预览,在网站目录下,使用hugo server -D启动,其中server参数表示在本地启动Hugo服务器,-D参数会把草稿文章,也就是draft值为false的文章也一起构建

hugo server -D

在浏览器输入http://localhost:1313/即可预览网站

Hugo 服务器会监控文件夹content,data,layouts,static,themesconfig.toml的变动,实时展示配置和文件的变化,不需要重新构建,可以一边编辑文章,一边预览效果。但是某些时候需要清除浏览器缓存

遇到一个问题,在更换主题的时候,有时候打开本地网页会报错,先执行Ctrl + C关闭本地Hugo服务器再执行hugo server -D重启服务就行了

不同主题下的文章一般不能共用,在启动Hugo Server 时可能会报错,需要删除content目录下其它主题的文章

配置

配置文件的具体说明可以参考主题官网,主题通常会自定义一些参数

根据需要对网站配置文件config.toml进行配置,发布网站时,需要将baseURL设置为自己的域名。当然,如果只是在本地服务器查看网站,则不需要设置

参考

Hugo quick-start