用Hugo快速搭建个人静态博客

最近心血来潮,想要重新折腾一番自己的博客。于是,发现了Hugo比之前使用的Jekyll更好用。本文是个人参照Hugo官网 搭建个人博客的记录。

Step 1. Install Hugo 下载、安装Hugo

下载地址:https://github.com/spf13/hugo/releases
根据自己的操作系统,下载对应的安装包。我的操作系统是Win7 64bit, 选择了hugo_0.19_Windows-64bit.zip

下载完成之后,解压的文件夹包含以下3个文件:

hugo_0.19_windows_amd64.exe
LICENSE.md
README.md

hugo_0.19_windows_amd64.exe 重命名为hugo.exe。在你的软件安装盘新增名为hugo的文件目录,在里面在新建一个bin子目录。然后将hugo.exe放到hugo\bin目录下。再将这个bin目录的路径添加到系统环境变量中。

完成以上步骤后,打开命令行输入

hugo help

如果得到如下信息,说明安装成功。

hugo is the main command, used to build your Hugo site.

Hugo is a Fast and Flexible Static Site Generator
built with love by spf13 and friends in Go.

Complete documentation is available at http://gohugo.io/.

Step 2. 创建一个名为blog的Hugo站点

我希望在E盘下创建站点,所以我先切换目录

cd e:
e:

然后输入命令:

hugo new site blog 

得到如下提示创建成功的信息:

Congratulations! Your new Hugo site is created in E:\blog.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
Choose a theme from https://themes.gohugo.io/, or
create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

进入该目录,可以看到自动生成了5个目录和一个配置文件config.toml

|-- archetypes
|-- content   #存放内容的目录
|-- data      
|-- layouts   
|-- static    #存放静态资源(图片,css,js)
|-- themes    #存放主题
|-- config.toml  #配置文件

Step 3. 添加内容

切换到该目录下,然后输入如下命令,会在content的目录下创建post目录,在post目录下创建名为test.md的文件。

cd blog
hugo new post/test.md

提示文件创建成功:

E:\blog\content\post\test.md created

用文本编辑器打开文件test.md文件
可以看到如下内容:

+++
date = "2017-01-02T17:45:06+08:00"  #创建文件的时间
title = "test"                      #文件的标题
draft = true                        # 是否为草稿

+++

上述内容为自动创建的与文章有关的内容。自己也可以在两个+++之间添加如下内容:

image = "hugo.png"            #指定图片。
category = "test"             #文章的类别
tags = ["Hugo", "intro"]      #文章的标签分类。
url = "new_start"             #该文章访问时的相对的url地址,默认为文件名。

更多的设置,可以参考官方文档

以后写博客文章就是这样创建markdown文件, 之后通过Hugo编译成静态的html文件。

Step 4. 添加主题

官方提供了多种主题可供选择,具体在 https://themes.gohugo.io/ 可以找到。

找到想要的主题后,切换到themes目录(该目录可以存放多个不同的主题)。

cd themes

由于需要使用到Git下载主题,以及版本管理和代码推送。需要事先下载安装好Git,关于如何安装和使用Git,可以参考我之前的一篇文章:Git学习笔记

把选定的主题下载到themes目录下。

git clone https://github.com/dim0627/hugo_theme_robust.git

Step 5. 启动服务,本地预览

先从themes目录下退回到blog目录, 然后启动服务。

cd ..
hugo server --theme=hugo_theme_robust --buildDrafts

在浏览器中打开 [http://localhost:1313/](https://themes.gohugo.io/)

Step 6. 修改配置文件config.toml

languageCode = "zh-cn"
title = "Frank Wang's Coding World"
baseurl = "http://www.wangxingfeng.com/"  

[Params]
    Author ="Frank Wang"

Step 7. 生成网站

1.改变文章draft(草稿)状态:

hugo undraft content/post/*.md

2. 启动hugo, 生成发布文件到public目录下。

hugo --theme=hugo-icarus-theme

Step 8. 托管到GitHub Pages

1. 使用Git来进行版本管理

git init
echo "/public/" >> .gitignore
echo "/themes/" >> .gitignore
git add --all
git commit -m "Initial commit"

2. 创建Git 远程仓库:

登录你的GitHub. 创建一个新的仓库,仓库名为Github用户.github.io
比如我的是frankwang0909.github.io.

3. 添加Git 远程仓库,并提交代码。

cd public
git init
git remote add origin git@github.com:frankwang0909/frankwang0909.github.io.git

git add --all
git commit -m "blog added"
git push -u origin master

4.以后有内容改动,提交代码.

(cd ..; hugo --theme=hugo_theme_robust)
git add --all
git commit -m "<some change message>"
git push -u origin master

本文首发于我的个人博客www.wangxingfeng.com,想要了解更多,请点击访问

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容