手把手教你通过Hugo搭建个人博客

前言:

做为一枚立志成为武林高手的程序员,怎么可以没有属于自己的一片园子呢。

一直想搭建一个博客,但是始终没开始搞。近期没事,今天必须把这个事儿搞定。

HEXO+Github 快速、简洁且高效的博客框架
Jekyll+GitHub 将纯文本转换为静态博客网站
FarBox The Best Blog Platform for Humans
Hugo Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。

用过HEXO的部分人,现在都转用Jekyll。
用过Jekyll的人呢,现在又转用FarBox。
还有些用过Jekyll的兄弟们,现在转用Hugo
FarBox是需要自己掏点腰包,对于我个屌丝来说。暂不考虑。
那对于Hugo,是我最佳选择。

如果有兄弟想将Jekyll的文章迁移到HugoHugo可以一键迁移Jekyll


快速开始

使用默认的Ananke皮肤创建一个Hugo站点

在这个示例中使用macOS系统, 其它系统怎么进行快速开始,看安装

您还需要安装Git才能运行本教程。

第一步 导入Hugo

HomebrewmacOS的软件包管理器,可以从brew.sh安装。 如果您正在运行Windows等,请参阅安装

brew install hugo

验证您Hugo安装成功:

hugo version

第二步 创建一个新站点

在名为quickstart的文件夹中创建一个新的Hugo站点。

quickstart站点名字(建议起名字为yourName.com)

hugo new site quickstart

第三步 添加一个皮肤

请参阅themes.gohugo.io以查看需要考虑的主题列表。 这个快速启动使用美丽的Ananke皮肤。

cd quickstart;\
git init;\
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke;\

$ la themes/ananke #看下ananke库

total 48
-rw-r--r--   1 hunter  staff    41B Jul 31 23:40 .git
-rw-r--r--   1 hunter  staff   331B Jul 31 23:40 .gitignore
-rwxr-xr-x   1 hunter  staff   1.0K Jul 31 23:40 LICENSE.md
-rw-r--r--   1 hunter  staff   4.0K Jul 31 23:40 README.md
drwxr-xr-x   3 hunter  staff   102B Jul 31 23:40 archetypes
drwxr-xr-x   5 hunter  staff   170B Jul 31 23:40 exampleSite
drwxr-xr-x   4 hunter  staff   136B Jul 31 23:40 images
drwxr-xr-x  10 hunter  staff   340B Jul 31 23:40 layouts
-rwxr-xr-x   1 hunter  staff   500B Jul 31 23:40 package.json
drwxr-xr-x   8 hunter  staff   272B Jul 31 23:40 src
drwxr-xr-x   4 hunter  staff   136B Jul 31 23:40 static
-rwxr-xr-x   1 hunter  staff   521B Jul 31 23:40 theme.toml
注意看:

ananke目录下有个示例站点exampleSite。我们用人家的库,当然得按人家的示例来操作。

在下面,第四步 装饰你的站点 直接把示例站点中的staticcontent文件夹和config.toml文件,与自己站点中的staticcontent文件夹,和config.toml文件进行替换。

static文件夹:存放图片
content文件夹:存文章(xxxx.md)

第四步 装饰你的站点

cp -R /Users/hunter/HaiTeng-Wang.com/themes/ananke/exampleSite/static ./ 
cp -R /Users/hunter/HaiTeng-Wang.com/themes/ananke/exampleSite/content ./
cp /Users/hunter/HaiTeng-Wang.com/themes/ananke/exampleSite/config.toml ./

关于cp,命令这里不多说。

你可以用命令行,将ananke的示例站点exampleSite下的文件,替换成自己的站点文件。当然,如果你愿意,可以手动替换。

替换完毕后,你的站点下的staticcontent文件夹终于不是空的了。

你的配置文件config.toml可不再只有几行命令,而是这样

title = "Notre-Dame de Paris"
baseURL = "https://example.com"
languageCode = "en-us"
theme = "gohugo-theme-ananke"
themesDir = "../.."

MetaDataFormat = "yaml"
DefaultContentLanguage = "en"
SectionPagesMenu = "main"
Paginate = 3 # this is set low for demonstrating with dummy content. Set to a higher number
googleAnalytics = ""
enableRobotsTXT = true

[sitemap]
  changefreq = "monthly"
  priority = 0.5
  filename = "sitemap.xml"

[params]
  description = "The last theme you'll ever need. Maybe."
  facebook = ""
  twitter = "https://twitter.com/GoHugoIO"
  instagram = ""
  youtube = ""
  # choose a background color from any on this page: http://tachyons.io/docs/themes/skins/ and preface it with "bg-"
  background_color_class = "bg-black"
  featured_image = "/images/gohugo-default-sample-hero-image.jpg"

注意:
你需要删除这行: themesDir = "../.."

你需要查看你的theme,theme = "ananke"

然后,在你的站点根目录执行 Hugo 命令进行调试:

hugo server -D

浏览器里打开:http://localhost:1313

目前为止: 你的站点已经创建完毕。

关于装饰你的站点,自己随便改一改站点下的staticcontent文件,和config.toml配置文件看看发生了什么改变。

第五步 部署 Host on GitHub

如果你需要部署在 GitHub Pages 上。

首先在GitHub上创建一个Repository,命名为:coderzh.github.io (coderzh替换为你的github用户名)。

然后修改config.toml

publishDir = "docs"

baseURL = "https://haiteng-wang.github.io/"

然后,在你的站点根目录执行 Hugo 命令进行调试:

hugo

$ la
你会发现你的站点下多了个docs文件夹

-rw-r--r--@  1 hunter  staff   6.0K Aug  1 01:12 .DS_Store
drwxr-xr-x  12 hunter  staff   408B Aug  1 01:17 .git
-rw-r--r--   1 hunter  staff   108B Jul 31 23:40 .gitmodules
drwxr-xr-x   2 hunter  staff    68B Jul 31 23:38 archetypes
-rw-r--r--   1 hunter  staff   838B Aug  1 01:16 config.toml
drwxr-xr-x   8 hunter  staff   272B Jul 31 21:55 content
drwxr-xr-x   2 hunter  staff    68B Jul 31 23:38 data
drwxr-xr-x  15 hunter  staff   510B Aug  1 01:17 docs
drwxr-xr-x   2 hunter  staff    68B Jul 31 23:38 layouts
drwxr-xr-x   4 hunter  staff   136B Aug  1 01:12 static
drwxr-xr-x   4 hunter  staff   136B Jul 31 23:44 themes

然后继续在你的站点根目录执行git 命令,添加远程仓库。

git remote add origin https://github.com/coderzh/coderzh.github.io.git
git add -A
git commit -m "first commit"
git push -u origin master

然后设置你的github-pages


Go to Settings → GitHub Pages
From Source, select “master branch /docs folder”. If the option isn’t enabled, you likely do not have a docs/ folder in the root of your project.
部署成功

点击生成的url看看博客是不是已经生成好了,注意如果没生成好,你可以查看站点下的URL是否对应

baseURL = "https://haiteng-wang.github.io/HaiTeng-Wang.github.io-/"

若没有对应,你需要修改你站点下的baseURL。

以下步骤以后修改站点内容,同样的操作。

修改config.toml文件

baseURL = "https://haiteng-wang.github.io/HaiTeng-Wang.github.io-/"

然后在站点根目录执行Hugo命令

Hugo

接下来执行git命令

git add .  
git commit -m "fix:BaseUrl"
git push 

好了,再来查看你的博客地址https://haiteng-wang.github.io是不是生成好了?


(文章语言,没有采用中性词语,且很多大白话。半夜两点了实在困傻了。原谅我没有好好整理。)

后续:

如果成功生成GitHub Pages,但是生成后是这样的

woho! 我们没得选择,默认让我在master分支上工作

那我们就直这样喽

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

如果,您发现文章中,有待梳理,写的不清除的地方,或有更好的补充建议。欢迎评论我,或联系我。

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

推荐阅读更多精彩内容