安装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。
网友评论