Update @ 2018-04-27 10:44:05:

Hugo是一款静态网站搭建框架，用它搭建github page是个不错的选择。相比较于 Jekyll, Hugo 的本地调试环境更简洁。

i. 本地搭建步骤

1-本地环境搭建

在 Mac 下安装 Hugo 十分简洁，

1
brew install hugo

2-本地生成框架文件

创建 blog 文件夹，将包含 hugo 框架的代码文件

1
hugo new site blog

3-为博客选择主题

网站上有很多主题，可以选择合适的下载再对它进行修改。这里选择的是 mainroad。下载主题后将压缩包解压后的文件夹放到以下文件夹下 ~/mygithub/blog/themes/mainroad。 PS：需要对~/mygithub/blog/\_config.toml文件设置:

  • 将主题设置为对应的主题文件夹的名称。
1
theme = "mainroad"
  • 设置baseurl = “127.0.0.1”； 本地调试Hugo默认打开的是127.0.0.1:1313,但需要设置baseurl,否则会出现网页主题渲染不正确的情况，事实上在部署到远程服务器上也需要指定 baseurl，后续会说明。
  • config.toml文件的说明
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
baseurl = "127.0.0.1" #设置本地调试的地址
title = "forAllBright 的博客" #博客的标题
languageCode = "en-us" #语言编码，目前没用到
paginate = "4" # 主页的每页的文章数量
theme = "mainroad" #主题
disqusShortname = "" # 评论区显示的名称
googleAnalytics = "" # 目前没有用到
defaultContentLanguage = "en" #默认的文章内容使用的语言
[[menu.main]] # 设置菜单栏显示
url = "/" #这个指的是 content 文件夹下
name = "Home"
weight = 1

[Author] # 每篇文章最下方显示的作者信息
    name = "xxx 
    bio = "xxx"
    avatar = "img/xxx.png"

[Params] #  页面最上方显示的内容
    subtitle = "xxxx" # Subtitle of your site
    description = "" # Description of your site
    opengraph = true
    twitter_cards = false
    readmore = false # Show "Read more" button in list if true
    leftsidebar = false # Move sidebar to the left side if true
    authorbox = true #是否显示文章下方的作者信息
    post_navigation = true
    postSections = ["post"]
   	#--设置编程语言的字体--
    googlefonts = ["Droid Sans", "Fira Mono"]
    fontbody = 'Droid Sans'
    fontcode = 'Fira Mono'
	#--设置编程语言的字体--

[Params.widgets] #网页插件，标签，标签数，类别，增加搜索框，最近文章
    search = false # Enable "Search" widget
    recent_articles = true # Enable "Recent arcticles" widget
    categories = true # Enable "Categories" widget
    tags = true # Enable "Tags" widget
    tags_counter = false # Enable counter for each tag in "Tags" widget (disabled by default)
    # social_github = "xxxxx" #github 账号名称

4-调试显示

进入到 blog 文件夹下（不可以是它的子文件夹，否则报错），启动 hugo 服务

1
hugo server

显示如下说明运行正常，在浏览器输入127.0.0.1:1313 可以看到网页。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
                   | EN
+------------------+----+
  Pages            | 21
  Paginator pages  |  0
  Non-page files   |  0
  Static files     | 11
  Processed images |  0
  Aliases          |  8
  Sitemaps         |  1
  Cleaned          |  0

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

ii. 在 github 部署

1-创建远程仓库

在 github 上创建一个仓库，命名为 xxx.github.io，称为 github page，是可以通过https://xxx.github.io直接在浏览器访问，并打开的是我们建好的网页。

2-本地编译文件，打包

1
hugo --theme=mainroad --buildDrafts --baseUrl="https://xxx.github.io/"

以上命令将生成一个 blog/public 文件夹，我们需要将 public 文件夹下的内容 push 到https://xxx.github.io。

3-上传到 github page

1
2
3
4
5
git init
git remote add origin git@xxxxxx.git
git add -A
git commit -m "init"
git push origin master

等待几分钟后，刷新 xxx.github.io 页面将会显示与本地调试所显示一样的页面。

iii. 一些说明

1-体会

   搭建这个博客是想记录一些自己的体会和想法，这是首次接触网页前端源码，尝试在将博客网页自定义的过程中结合其他语言的特性来理解网页前端源码。令人惊喜的是前端的调试更能带来直观的感觉，在修改某个控件某个逻辑后会立刻展现在眼前。js，html，css 语言在编程上和其他编程语言有很多相似的特性，比如会用到属性，方法，会外部调用，会尽可能的通过配置文件来设置。有点感觉的某些项目的完成有共通的设计思想方法。

2-代码高亮和代码字体设置

   在本地调试的过程中，想将代码的字体显示换为另一种，这个卡了不少时间，最后是通过在本地网页的源码中找到的。一开始我尝试在static.css文件中修改 code 的字体，但是这并没有起到效果。那么这个设置应该是被其他地方的设置所覆盖了，而后google 到一半设置时会用 google 的开源字体代码来修饰，这在 header.html中设置，且需要在 config.toml配置。代码高亮与字体设置：

header.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
	{{ range .Site.Params.googlefonts }}
   		<link rel="stylesheet" {{ printf "href=\"//fonts.googleapis.com/css?family=%s\"" . | safeHTMLAttr }} type="text/css" media="all" />
  {{ end }}
<style>
 	body {
     	font-family: '{{ .Site.Params.fontbody }}';
 	}
 	code {
    	font-family: '{{ .Site.Params.fontcode }}'; 
 	}
</style>

config.toml

1
2
3
4
[Params]
    googlefonts = ["Droid Sans", "Fira Mono"]
    fontbody = 'Droid Sans'
    fontcode = 'Fira Mono'

3-结合mainroad主题对 Hugo 框架的理解

1th：

  • mainroad.theme还是对 Hugo 的更标准的主题有了一些改动，比如 bootstrap.theme,标准主题更注重将对网页元素的配置放在 config.toml 中，且在核心的 html 文件中都会留有对配置文件的变量接口。
  • 这个网站讲述的不错。但是也是点到为止的讲了一下框架中一些文件的作用和互相的关系。
  • 后续找时间看一下前端 css 和 js 是怎么协同工作的，了解一个主流的框架。

4-发布到 Netlify 网站

   看到Netlify的部署比 github page更方便（因为目前在用的方式是build 到 public 文件夹，然后对 puclic 文件夹 push，这有些繁琐，后来看到还会有种用submodule 的方式来处理这种需求的），需要将整个框架改动后的源码 push 到 github，然后通过 Netlify 取得与这个仓库的连接，设置好后就会自动的 build 到 public 然后部署其中的文件。
   注意的地方是：需要对 Netfify build 时的 hugo 版本设置为与本地调试一致，否则有可能 build fail 报错。

> Build environment variables, Edit, hit the plus sign, add key HUGO_VERSION with value 0.40.
1
2