Hugo初体验及个人博客搭建过程

安装Hugo

前两天在Mac上费了好大的劲装上了Homebrew, 一个十分方便的软件包安装工具,得以使用brew 在命令行里快捷安装:

$ brew install hugo

检查安装是否正确:

$ hugo version
Hugo Static Site Generator v0.65.3/extended darwin/amd64 BuildDate: unknown

Hugo的安装位置位于根目录下/usr/local/Cellar/hugo

具体安装可以参考Hugo项目官网

2. 搭建新网站

2.1 安装一个新主题

首先使用Hugo工具创建一个新的网页文件夹:

$ hugo new site myblog
Congratulations! Your new Hugo site is created in /Users/coffee/myblog.

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".

接着进入网页的根目录myblog/,并初始化git仓库:

$ cd myblog
$ git init
Initialized empty Git repository in /Users/coffee/myblog/.git/

使用git安装网页主题, 我使用了Hugo主题库中的Diary主题。

个人认为其界面简约,字体漂亮,且对中文兼容性好。

将主题文件下载到站点更目录下的themes/文件夹:

$ git submodule add https://github.com/AmazingRise/hugo-theme-diary.git themes/diary

更多主题参见Hugo主题库

2.2 新建博文

$ hugo new posts/my-first-post.md
/Users/coffee/myblog/content/posts/my-first-post.md created

我使用Typora对Markdown博文编辑,第一篇博文记录个人博客的搭建过程。

2.3 本地启动网站

注意要使用-t指定主题,否则会出现错误。

$ hugo server -t diary --buildDrafts

                   | EN  
-------------------+-----
  Pages            |  9  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 20  
  Processed images |  0  
  Aliases          |  4  
  Sitemaps         |  1  
  Cleaned          |  0  

Built in 794 ms
Watching for changes in /Users/coffee/myblog/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /Users/coffee/myblog/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

进入浏览器,访问http://localhost:1313/

注意该操作必须在--buildDrafts模式下才可以访问站点,也就是说本地server工作状态。在该模式下一旦本地文件改变,程序会自动重新build网页。一旦Ctrl+C退出后localhost停止工作,也就无法访问站点了。

2.4 小小的配置

页面的标题默认为"My New Hugo Site",我们可以通过修改config.toml文件来进行修改:

$ ls
archetypes  content     layouts     resources   themes
config.toml data        public      static
$ vim config.toml

进入vim编辑器:

baseURL = "http://example.org/"
languageCode = "en-us"
title = "Kevin Shi's Blog"
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                                                                                                                                                                                
"config.toml" 3L, 82C

title 修改为个性化的站点名字。

更多个性化configuration还有待学习添加。

3. 将站点部署到远端服务器

3.1 GitHub或Gitee上创建仓库

使用gitee个人免费仓库作为远端服务器。方便而且免费,可被公网访问。

登录gitee,创建新repository,注意新仓库名字是小写的用户名.gitee.io。

​ 例:kevin-shi.gitee.io

具体可参考Gitee Pages说明文档。

3.2 本地生成public/文件夹

$ hugo --theme=diary --baseURL="https://kevin990527.github.io/" --buildDrafts

                   | EN  
-------------------+-----
  Pages            |  9  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 20  
  Processed images |  0  
  Aliases          |  4  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 264 ms
$ ls
archetypes  content     layouts     resources   themes
config.toml data        public      static
$ cd public 
$ ls
categories  index.html  js          posts       sitemap.xml vendor
images      index.xml   page        scss        tags

进入public/目录,可以看到html文件,说明站点已经生成了。

3.3 将public/文件夹与远端关联

进入public/并创建git仓库:

$ git init
Initialized empty Git repository in /Users/coffee/myblog/public/.git/

将所有文件加入git仓库,然后commit:

$ git add .
$ git commit -m "First Hugo commit"
---output omitted---

为git仓库添加origin,实现与远端仓库关联:

$ git remote add origin https://gitee.com/kevin-shi/kevin-shi.gitee.io.git

注意最后的.git千万不能漏掉。

命令行查看remote:

$ git remote -v
origin  https://gitee.com/kevin-shi/kevin-shi.gitee.io.git (fetch)
origin  https://gitee.com/kevin-shi/kevin-shi.gitee.io.git (push)

证明已经实现关联。

接下来就要将仓库push到远端:

$ git push
Username for 'https://github.com': Kevin990527
Password for 'https://Kevin990527@github.com': 
---output omitted---

当然首次push之前会要求输入gitee用户名和密码。

这样的话站点就已经被push到远端,打开浏览器输入kevin-shi.gitee.io,就可以访问个人博客啦。


本文转载自我的个人博客kevin-shi.gitee.io

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

推荐阅读更多精彩内容