How To Build A Personal Blog Site(中文版)

Hugo 是一款使用Go语言编写的静态语言生成器。它对构建速度，易用性和可配置性等方面进行了优化。Hugo的目录内包含content和templates等部分，并将它们打包呈现为一个完整的HTML网站

如何安装

安装Hugo作为您的站点生成器 (二进制安装)

Homebrew (macOS)

brew install hugo

Chocolatey (Windows)

choco install hugo -confirm

阅读更多关于安装hugo的教程文档Hugo使用文档

使用源码编译和安装二进制文件（高级安装）

所需工具:

从GitHub获取源码 自Hugo 0.48 以来，Hugo使用Go 1.11内置的Go Modules支持来构建。最简单的方法是在GOPATH之外的目录中克隆Hugo，如下例所示：

mkdir $HOME/src
cd $HOME/src
git clone https://github.com/gohugoio/hugo.git
cd hugo
go install

如果你是window用户, 用％USERPROFILE％替换上面的$ HOME环境变量。

完成安装后, 在终端内输入 hugo version , 如果显示 Hugo Static Site Generator v0.55.0-DEV linux/amd64 BuildDate: unknown ,就表明安装成功了

安装主题

你正在访问的博客网站使用的主题是"hugo-theme-cleanwhite",在本教程中也以这个主题为例子

学习使用此主题最简单的方法是从使用了此主题的示例网站开始，然后您可以随意修改并添加自己的东西。

$ mkdir test
$ cd test
$ mkdir themes
$ cd themes
$ git clone https://github.com/zhaohuabing/hugo-theme-cleanwhite.git
$ cp -r hugo-theme-cleanwhite/exampleSite/** ../
$ cd ..
$ hugo serve

如果您的站点已经是一个git项目，您可能希望选择将cleanwhite主题添加为子模块，以避免弄乱现有的git存储库。

$ mkdir themes
$ git submodule add https://github.com/zhaohuabing/hugo-theme-cleanwhite.git themes/hugo-theme-cleanwhite

在本地运行 Hugo

$ hugo serve -t  hugo-theme-cleanwhite

现在你可以在浏览器内输入localhost:1313

如果从头开始，可以在exampleSite目录中使用CleanWhite主题配置一个可用的Hugo站点。您可以将其用作站点的起点。

有关更多信息，请阅读Hugo官方设置指南https://github.com/gohugoio/hugo#prerequisite-tools

配置

首先，我们来看看config.toml。了解如何自定义您的网站将非常有用

Comments

评论系统由Disqus提供支持,这是一个可选配置。如果您想启用评论，请在Disqus中创建一个帐户并记下您的短名称。

disqusShortname = "your-disqus-short-name"

您可以通过将disqusShortname设置为空来禁用评论系统。

在国内使用Disqus

在国内无法直接使用Disqus,因此需要自己搭建转发平台,因为操作过于复杂,在这里就不再介绍了

使用Algolia进行网站内文章搜索

按照本教程在Algolia中创建索引。您站点的索引数据将会存储在云端。 CleanWhite主题的搜索页面将利用此索引数据进行搜索。

转到Hugo站点所在的目录并运行以下命令：

$ npm init
$ npm install atomic-algolia --save

接下来，打开新创建的package.json，我们将添加一个NPM脚本来更新Algolia的索引。找到“scripts”，并添加以下内容：

"algolia": "atomic-algolia"

CleanWhite主题已经支持Algolia索引输出格式，因此您可以构建您的站点，然后您将在根目录中找到一个名为algolia.json的文件，我们可以使用它来更新Algolia中的索引。生成索引文件：

$ hugo

在Hugo项目的根目录中创建一个名为.env的新文件，并添加以下内容：

ALGOLIA_APP_ID={{ YOUR_APP_ID }}
ALGOLIA_ADMIN_KEY={{ YOUR_ADMIN_KEY }}
ALGOLIA_INDEX_NAME={{ YOUR_INDEX_NAME }}
ALGOLIA_INDEX_FILE={{ PATH/TO/algolia.json }}

现在，只需运行以下命令即可将索引推送到Algolia：

$ npm run algolia

将以下变量添加到您的hugo站点配置中，以便搜索页面可以访问云中的algolia索引数据：

algolia_search = true
algolia_appId = {{ YOUR_APP_ID }}
algolia_indexName = {{ YOUR_INDEX_NAME }}
algolia_apiKey = {{ YOUR_ADMIN_KEY }}

在浏览器中打开搜索页面: http://localhost:1313/search

流量分析

您可以选择启用Google分析或百度分析。在配置文件内输入您的跟踪代码

googleAnalytics = "UA-XXXXX-X"
ba_track_id  = "XXXXXXXXXXXXXXXX"

googleAnalytics 或 ba_track_id 为空时可以禁用流量分析功能.

微信支付&支付宝支付

您可以启用微信支付和支付宝，以便读者向您发送资金。如果他们喜欢您的文章，您甚至可以从写作中获得奖励,这让你会拥有更多的写作动力。

在配置文件内开启或禁用打赏功能

reward = true
在文件夹内替换支付二维码图片/static/img/reward/,如果不替换的话,读者的打赏会支付到别人的账户内

如何新建一篇文章

你可以使用下面的bash脚本去创建新的文章

#!/bin/bash
time=$(date "+%Y-%m-%d")
hugo new post/${time}-$1.md

Evan Blog