新手搭建Hogo静态博客教程（一）:本地搭建运行

本教程为系列文章，点击右下角的 #Hugo 可以查看全部。

本教程，记录了我搭建博客过程中所遇到的所有的问题。有的问题很简单，有的问题很棘手，以至于不得不放弃。

本教程不会细致到每一步都有图片可循，但是我会尽量列出所有内容的出处。以展示超链接的真实魅力。

本系列文章懂的人看会觉得有些啰嗦，不过我尽力让新人能够看懂怎么做，望体量！

博客搭建选择

为什么要做这样一个博客，理由我已经在第一篇文章中说了。接下来的事情就是着手搭建。查资料的时候，经常能看到Hexo的字眼，按图索骥，找到了相关的内容，然后在不断的寻找中，找到了如下一个网站。

静态博客对比

然后在排名靠前的几个网站中，找了一圈，最终选择了Hugo，也就有了此文的开端。 （选哪个基本靠眼缘,无论哪个都要花时间处理的。）

简单介绍下背景，算是补充基础知识了。

静态博客，其实是静态网站的一种，与之相对的就是动态网站。举个例子，百度 就是动态网站，百度中的内容，会根据输入的内容随时变化。

静态网站说白了，就是几个静态的页面，点来点去就那么几个页面。静态页面很多时候并不好用，但是作为Blog来讲，最合适不过了。

所以，Hugo做了什么呢？Hugo根据用户给的配置+文章+模版，渲染出一个静态网站，生成对应的网页。只要把网页扔到网上，别人就能访问了！

关于网络上所说的3min搭一个个人博客，5min搭一个个人博客，当笑话看好了，如果有一些想法的话，几天可能都搞不定。

Hugo安装

本人目前的系统是Windows 7 x64，参考 官网教程

  1. 首先去github release 下载最新版的软件，也就是 hugo_0.36.1_Windows-64bit.zip
  2. 解压压缩包
  3. 依次创建3个文件夹C:\Hugo,C:\Hugo\bin,C:\Hugo\Sites,然后把解压出的hugo.exe扔到bin中
  4. 使用快捷键win+r，然后在弹出窗口输入cmd回车，弹出黑色窗口。在弹出的黑色窗口中粘贴如下命令set PATH=%PATH%;C:\Hugo\bin然后关闭

  5. 重复4中的弹出黑色窗口的操作，然后输入hugo version，如果出现类似如下提示，说明Hugo安装成功，至此安装过程全部结束。

    Hugo Static Site Generator v0.36.1 windows/amd64 BuildDate: 2018-02-15T09:08:18Z

注意：官网上还有mac、linux、win10等系统的安装教程，其他系统请参考官网。

网站初始化

Hugo安装完成了，然后需要初始化一个网站，参考 官网教程

  1. 按照上文中提到的方式打开 cmd 窗口
  2. 输入命令cd C:\Hugo\Sites回车
  3. 输入命令hugo new site xxxxxx回车，xxxxxx可以换成任意的名字

好了，到目前为止，我们已经初始化了一个网站，名字叫做xxxxxx，位置是在Sites文件夹中，目录结构如下所示,有6个文件夹，1个文件，具体每个文件都做啥，暂时不用管。

2018/02/18  14:20    <DIR>          archetypes
2018/02/18  15:29             1,049 config.toml
2018/02/18  14:31    <DIR>          content
2018/02/18  14:20    <DIR>          data
2018/02/18  14:20    <DIR>          layouts
2018/02/18  14:20    <DIR>          static
2018/02/18  14:59    <DIR>          themes

注意：以上内容，可能随着hugo版本变化而变动。命令的意思是在sites目录初始化一个 hugo网站。

添加一个主题

emmmm，其实到上一歩为止，网站已经可以访问了，但是巨丑无比。好在官网提供了主题，主题这是很关键的内容，现在就要选一个主题了，操作参考官网教程

官网主题在这里，我选了其中一个，以hugo-dusk为例。

  1. 安装主题前，先安装一个git客户端，git早晚都要用的。客户端下载链接
  2. 由于目前是windows 7x64系统，下载windows版本的git，安装看不懂的话，一直点下一步安装就行。

  3. 运行桌面的Git Bash，然后弹出一个黑色窗口，依次输入以下命令

    cd C:\Hugo\Sites\xxxxxx\themes
git clone https://github.com/gyorb/hugo-dusk

  4. 执行完成后，应该会在 themes 文件夹看到一个hugo-dusk文件夹

  5. 在 xxxxxx 的根目录里面，能找到名为config.toml的文件，以文本形式打开，把以下内容覆盖进去。内容参考自主题官网

    baseurl = "/"
title = "My site."
copyright = "Copyright (c) 2017, all rights reserved."
canonifyurls = true
languageCode = "en-US"
paginate = 3
theme = "hugo-dusk"

googleAnalytics = ""
disqusShortname = ""

[author]
name = ""

SectionPagesMenu = "main"

# use Chroma for syntax highlight
pygmentsStyle = "native" # other dark style options: vim, fruity, monokai
# enable syntax highlight for code blocks
pygmentsCodeFences = true

[[menu.main]]
name = "Posts"
weight = -120
identifier = "post"
url = "/post/"

[[menu.main]]
name = "Tags"
weight = -110
identifier = "tag"
url = "/tags/"

[params.meta]
keywords = "blog, tech"
description = "Personal blog."

[params]
github = "github id"
gitlab = "gitlab id"
twitter = "twitter id"
linkedin = "linkedin id"
email = "myemail"

[params.colors]
# hugo-dusk colors
background = "#101010" # background color for the site
main = "#99cc66"
text = "#dbdbdb"
code-quote-bg = "#1D1F21" # background color for quotes and code blocks
copyright = "#404040" # copyright text color

至此，主题已经添加完成了。以上的命令含义就是 下载了一个主题到 theme 目录，然后把配置文件改一下。

添加一篇文章

作为一个博客来讲，一篇文章都没有就太废了吧，更何况这还是静态博客。参考官网教程

  1. 以上一共出现了2个黑色的窗口，一个叫GitBash,一个叫cmd，用哪个都行，依次运行以下命令。

    cd C:\Hugo\Site\xxxxxx
hugo new post/yyyyy.md

以上命令的含义是，切换到网站的根目录，然后初始化一个名字叫yyyyy的文章

启动！

  1. 接下来就是激动人心的启动环节了，依次输入以下命令

    cd C:Huog\Site\xxxxxx
hugo server -D

  2. 然后命令行界面显示的内容，会包含以下信息

    Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

  3. 接下来要做的就是在浏览器中输入http://localhost:1313/链接就可以访问博客了。效果如下图所示。

2018-02-20_172311

至此，博客初始化的相关内容都说完了，新博客有很多让人不满意的地方，需要一步步进行调整。下篇继续。

补充说明

本篇内容基本参考自官网的Quick Start，稍作了部分修改。操作是安装hugo、初始化一个网站、下载一个主题、应用主题、发一篇文章。懂的话也不用频繁cd 各种目录。按照顺序做下来5min就做完了，但是这刚刚是个开始。

接下来的内容，可能稍微熟悉电脑的人才能懂了。