博客第一步

Hugo是一个用Go编写的静态站点生成器，由于具有丰富的主题资源和惊人的生成速度而备受青睐。博文采用Markdown这一轻量的标记语言编写，速度快，美观。本博客即是基于Hugo搭建，下面讲述一下我的建站历程。

安装Hugo

如果你是macOS用户，请使用Homebrew快速安装

brew install hugo

如果你是Windows用户，请使用Chocolatey或者Scoop快速安装，取决于你使用什么包管理

choco install hugo -confirm
scoop install hugo

如果你是Debian或Ubuntu用户，请使用apt快速安装

sudo apt-get install hugo

基本上使用单行命令都可以成功安装Hugo，具体请移步这里。

生成第一篇文章

使用如下命令新建一个名为“mysite”的网站：

hugo new site mysite

接下来，在这里找到一个漂亮的网站主题。主题极其之多，找到一个满意的并不难。本博客采用的是Mainroad主题。如果对主题的配色之类的不满意，可以通过修改style.css这一文件来达到想要的效果。

以Mainroad为例，将主题clone到本地的themes文件夹内：

cd themes
git clone https://github.com/Vimux/Mainroad.git

mysite/content是用来存放文档的地方，我们在其下建立一个新的Markdown文件：

hugo new post/first.md

在first.md中写入一些内容，使用如下命令进行本地预览：

hugo server -t mainroad -D

打开网址 http://localhost:1313/ 即可查看本地生成的静态网站。

适配主题

Hugo的每个主题都会有不同的参数配置，而这些配置被存放在根目录下的config.toml文件中，以Mainroad为例，官方的GitHub里已经做了说明：

baseurl = "/"
title = "Mainroad"
languageCode = "en-us"
paginate = "10" # Number of posts per page
theme = "mainroad"
disqusShortname = "" # Enable comments by entering your Disqus shortname
googleAnalytics = "" # Enable Google Analytics by entering your tracking id

[Author] # Used in authorbox
  name = "John Doe"
  bio = "John Doe's true identity is unknown. Maybe he is a successful blogger or writer. Nobody knows it."
  avatar = "img/avatar.png"

[Params]
  subtitle = "Just another site" # Subtitle of your site. Used in site header
  description = "John Doe's Personal blog about everything" # Site description. Used in meta description
  #copyright = "John Doe" # copyright holder, otherwise will use site title
  opengraph = true # Enable OpenGraph if true
  twitter_cards = true # Enable Twitter Cards if true
  readmore = false # Show "Read more" button in list if true
  authorbox = true # Show authorbox at bottom of pages if true
  toc = true # Enable Table of Contents
  post_navigation = true # Show post navigation at bottom of pages if true
  # post_meta = ["date", "categories"] # Order of post meta information. Use ["none"] to turn off completely.
  postSections = ["post"] # the section pages to show on home page and the "Recent articles" widget
  #postSections = ["blog", "news"] # alternative that shows more than one section's pages
  #dateformat = "2006-01-02" # change the format of dates
  #mathjax = true # Enable MathJax
  #mathjaxPath = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" # Specify MathJax path
  #mathjaxConfig = "TeX-AMS-MML_HTMLorMML" # Specify MathJax config

[Params.sidebar]
  home = "right" # Configure layout for home page
  list = "left"  # Configure layout for list pages
  single = false # Configure layout for single pages
  # Enable widgets in given order
  widgets = ["search", "recent", "categories", "taglist", "social"]

[Params.widgets]
  recent_num = 5 # Set the number of articles in the "Recent articles" widget
  tags_counter = false # Enable counter for each tag in "Tags" widget (disabled by default)

[Params.widgets.social]
  # Enable parts of social widget
  facebook = "username"
  twitter = "username"
  instagram = "username"
  linkedin = "username"
  telegram = "username"
  github = "username"
  gitlab = "username"
  bitbucket = "username"
  email = "example@example.com"
  google_plus = "profileid"

在每一篇博文前也有一个Header，官方提供的样例为：

---
title: "Example article title"
date: "2017-08-21"
description: "Example article description"
thumbnail: "img/placeholder.jpg" # Optional, thumbnail
lead: "Example lead - highlighted near the title"
disable_comments: false # Optional, disable Disqus comments if true
authorbox: true # Optional, enable authorbox for specific post
toc: true # Optional, enable Table of Contents for specific post
mathjax: true # Optional, enable MathJax for specific post
categories:
  - "Category 1"
  - "Category 2"
tags:
  - "Test"
  - "Another test"
menu: main # Optional, add page to a menu. Options: main, side, footer
---

可以把Header的内容复制到mysite//archetypes/default.md中，这样新建新文档的时候才会适应你的主题的结构。如果在写草稿，为了不让它在博客里显示，需要在Header里加入：

draft: true

发布网站到GitHub Pages

在使用hugo server -D预览网站无误后可正式发布网站到域名供大家浏览。将要发布的文章内draft改为false后执行命令

hugo

可看到根目录下多出/public文件夹出来，该文件夹的内容即Hugo生成的整个静态网站。最终我们需要把这些静态网站的文件部署到一个地方，免费且稳定的GitHub Pages是一个很好的选择。具体操作如下：

在GitHub新建一个Repository命名为Example.github.io，其中Example改成自己的GitHub账户名；
在/mysite外建立一个平行的文件夹，此处假设也命名为/Example.github.io；
进入/public文件夹将内容复制到/Example.github.io；
将/Example.github.io的内容push到远程仓库。

以上命令可在命令行通过以下语句实现：

mkdir Example.github.io
cd mysite/public
cp -r . ../../Example.github.io
cd ../../Example.github.io
git init
git add .
git commit -m "commit message"
git remote add origin https://github.com/Example/Example.github.io.git
git push -u origin master

完成以上命令后，等待一分钟左右即可在 https://Example.github.io/ 访问你的网站。以后每次更新文章后只用将生成的/public文件夹的静态网站内容复制到/Example.github.io，然后再push到远程仓库即可。也可将步骤写为Shell脚本，此处不再赘述。

使用自己的域名

当然，GitHub的域名怎么能满足装*的心理，这时可以将网站设置为自己的域名。购买域名的地方很多，如国外知名网站GoDaddy，简体中文页面、支持支付宝付款、不用备案等都带来了很多方便。关于如何将域名定向到自己的页面，请参阅

将网页托管到GitHub还有一个好处，可以设置强制https协议，这样你的网站就不会被识别成不安全啦。

Tips：

Markdown可以用很多编辑器编辑，我使用的是Sublime Text，十分好用。
如果嫌打开Bash麻烦可以把命令写成.sh或.bat文件方便操作。