Hugo搭建博客(一)——搭建Hugo博客
Hugo是开源的静态网站生成器,用go语言编写,生成网站速度非常快。本文以Windows为例,介绍如何使用Hugo搭建博客
下载Hugo
-
在本地创建1个文件夹,如
D:\Program Files\Hugo
,然后在Hugo
文件夹下再创建2个子文件夹#存放Hugo可执行文件 D:\Program Files\Hugo\bin #存放网站文件 D:\Program Files\Hugo\Sites
-
前往官方下载地址Hugo下载,下载完成后解压到上一步创建的
D:\Program Files\hugo\bin
文件夹 -
将
D:\Program Files\hugo\bin
添加到系统变量path
中 -
验证Hugo安装,输入
hugo version
,出现如下提示说明安装成功,如果没有出现下列提示,请检查环境变量path
是否配置正确> hugo version Hugo Static Site Generator v0.53-8FC339DC2529FF77E494A1C12CD1FF9FBCB880A4 windows/amd64 BuildDate: 2018-12-24T08:26:16Z
创建网站
安装完成后,接下来创建网站
-
进入
Sites
目录,输入hugo new site example.com
,其中example.com
是网站名,生成网站成功后会在路径Sites
下创建example.com
文件夹hugo new site example.com
-
进入网站文件夹
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-even、hugo-theme-jane、hugo-nuo、hugo-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,themes
和config.toml
的变动,实时展示配置和文件的变化,不需要重新构建,可以一边编辑文章,一边预览效果。但是某些时候需要清除浏览器缓存
遇到一个问题,在更换主题的时候,有时候打开本地网页会报错,先执行Ctrl + C
关闭本地Hugo
服务器再执行hugo server -D
重启服务就行了
不同主题下的文章一般不能共用,在启动Hugo Server
时可能会报错,需要删除content
目录下其它主题的文章
配置
配置文件的具体说明可以参考主题官网,主题通常会自定义一些参数
根据需要对网站配置文件config.toml
进行配置,发布网站时,需要将baseURL
设置为自己的域名。当然,如果只是在本地服务器查看网站,则不需要设置