1拴竹，Hugo 簡介
搭建個人博客有很多開源的博客框架钳榨，我們要介紹的框架叫作Hugo。Hugo 是一個基于Go 語言的框架吃型，可以快速方便的創(chuàng)建自己的博客鸟蜡。
Hugo 支持Markdown 語法沦补，我們可以將自己的文章寫成Markdown 的格式，放在我們用Hugo 創(chuàng)建的博客系統(tǒng)中，從而展示給他人。
2，Hugo 安裝
在Windows 中安裝
首先安裝choco 包管理器剧防，需要在管理員權限下運行cmd，執(zhí)行如下命令止后，一般情況下乘寒，網絡沒有問題，即可安裝成功：
powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))"
# 設置環(huán)境變量
SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
然后使用choco 安裝 hugo：
# 墻內安裝可能較慢
choco install hugo -confirm
在MacOs 中安裝
使用brew 命令安裝：
brew install hugo
在Linux 中安裝
在Linux 中可以使用snap 命令來安裝毁葱，執(zhí)行下面命令：
snap install hugo
如果你的Linux 是Ubuntu 版本际度，也可是使用apt 來安裝帆锋，但是apt 安裝的hugo 可能不是最新版的，這樣會對一些hugo 主題的使用有所限制残黑。
這種情況下我們可以到hugo 的github 倉庫 中下載安裝包來安裝hugo，我們可以下載一個deb 包评凝，然后使用如下命令安裝：
dpkg -i <package.deb>
3日杈，Hugo 是否安裝成功
不管在哪種系統(tǒng)中安裝Hugo蝇裤，最后我們都可以使用下面命令查看Hugo 是否安裝成功：
>>> hugo version
Hugo Static Site Generator v0.68.3-157669A0 linux/amd64 BuildDate: 2020-03-24T12:05:34Z
4狭莱，使用Hugo 創(chuàng)建博客
hugo 安裝成功后济竹，使用hugo new site 命令創(chuàng)建博客：
# 博客項目的名字為myblog
hugo new site myblog
這個命令會創(chuàng)建一個名為myblog 的目錄，這就是博客的根目錄仰猖。目錄結構如下：
├── archetypes
│ └── default.md
├── config.toml # 博客站點的配置文件
├── content # 博客文章所在目錄
├── data
├── layouts # 網站布局
├── static # 一些靜態(tài)內容
└── themes # 博客主題
5钻弄，下載博客主題
創(chuàng)建好博客項目后对途，接下來是下載hugo博客的主題镣奋，這里有很多主題举塔，我們可以任意挑選，比如我們選擇了bootstrap4-blog 主題春叫。
然后在myblog 目錄下使用git 命令來下載主題：
git clone https://github.com/alanorth/hugo-theme-bootstrap4-blog.git themes/hugo-theme-bootstrap4-blog
下載下來的主題會放在themes 目錄中：
└── hugo-theme-bootstrap4-blog
├── CHANGELOG.md
├── LICENSE.txt
├── README.md
├── archetypes
├── assets
├── exampleSite # 本主題示例內容
| ├── content # 示例博客文章
│ |-- static
│ |-- config.toml # 本主題配置
├── i18n
├── images
├── layouts
├── package-lock.json
├── package.json
├── screenshot.png
├── source
├── theme.toml
└── webpack.config.js
5洋腮，使用主題
我們將exampleSite 目錄中的內容，復制到博客根目錄myblog 中，在myblog 目錄中執(zhí)行命令：
cp themes/hugo-theme-bootstrap4-blog/exampleSite/* ./ -r
6，啟動博客服務
使用下面命令啟動服務：
>>> hugo server
| EN
-------------------+-----
Pages | 29
Paginator pages | 0
Non-page files | 0
Static files | 1
Processed images | 0
Aliases | 12
Sitemaps | 1
Cleaned | 0
Built in 60 ms
Watching for changes in /home/wp/t/myblog/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /home/wp/t/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
可以看到服務默認會在占用1313 端口，在瀏覽器中訪問http://localhost:1313/ 地址肿孵。
如果一切正常舅巷，我們會看到一個像hugo 官網演示一樣的頁面护糖。
7，編寫博客文章
你只需要按照Markdown 的格式編寫自己的文章嚼松，讓后將寫好的文章放在myblog/content/posts嫡良，hugo 就會讀取到這片文章，并將這片文章展示在比的博客中惜颇。
與普通Markdown 文章不一樣的地方是皆刺，你需要在文章的開頭寫入如下結構的內容少辣，這些內容包含在三杠線之間凌摄，在三杠線下邊就是Markdown 的正文了：
---
文章屬性內容
---
Markdown 正文
這些內容會被hugo 解析，作為當前文章的一些屬性漓帅，常用的屬性如下：
---
title: "文章標題" # 文章標題
author: "作者" # 文章作者
description : "描述信息" # 文章描述信息
date: 2015-09-28 # 文章編寫日期
lastmod: 2015-04-06 # 文章修改日期
tags = [ # 文章所屬標簽
"文章標簽1",
"文章標簽2"
]
categories = [ # 文章所屬標簽
"文章分類1",
"文章分類2",
]
keywords = [ # 文章關鍵詞
"Hugo",
"static",
"generator",
]
next: /tutorials/github-pages-blog # 下一篇博客地址
prev: /tutorials/automated-deployments # 上一篇博客地址
---
比如我們編寫了這樣一篇文章锨亏，文件名為my-first.md：
---
title: "我的第一篇博客"
author: "我是作者"
description : "這是描述信息"
date: 2018-09-18
lastmod: 2018-09-26
tags : [
"我的博客標簽",
]
categories : [
"我的博客分類",
]
keywords : [
"我的博客關鍵字",
]
---
這里是Markdown 正文
我們將myblog/content/posts 目錄中的其它文章刪除，只留我們自己的這篇文章：
.
└── my-first.md
使用hugo server 重啟博客服務忙干，打開地址http://localhost:1313/器予，可以看到現在的博客中，只有我們自己寫的文章：
8捐迫，Hugo 的配置文件
博客的配置文件可以根據自己的需要修改乾翔，我們來看下Bootstrap v4 主題的配置文件，這些配置屬性通過應為并不難理解施戴。
配置文件中屬性的內容我做了修改反浓，并添加了中文注釋。
# Hugo 屬性設置
# 網站地址
baseurl = "https://localhost:1313/"
# 網站語言
languageCode = "en-us"
# 網站title
title = "我的博客"
# 主題的名字赞哗，這個要跟myblog/themes 目錄中的子目錄的目錄名一致
theme = "hugo-theme-bootstrap4-blog"
# home/category/tag 頁面顯示的文章數 (Default: 10)
paginate = 5
# home/category/tag 頁面用于摘要的字數 (Default: 70)
summaryLength = 50
# optionally override the site's footer with custom copyright text
# copyright = "Except where otherwise noted, content on this site is licensed under a [Creative Commons Attribution 4.0 International license](https://creativecommons.org/licenses/by-sa/4.0/)."
#googleAnalytics = "UA-123-45"
#disqusShortname = "XYW"
# 博客鏈接的路徑格式
[permalinks]
posts = "/:year/:month/:title/"
page = "/:slug/"
# 頂部欄
[[menu.navbar]]
name = "首頁"
url = "http://localhost:1313"
# 側邊欄雷则，可以寫多個
[[menu.sidebar]]
name = "新浪"
url = "https://www.sina.com"
[[menu.sidebar]]
name = "Github"
url = "https://github.com"
# Theme 屬性設置
#
[params]
# Site author
author = "作者名"
# homepage 頁描述信息
description = "我的博客站點"
# Show header (default: true)
#header_visible = true
# Format dates with Go's time formatting
date_format = "Mon Jan 02, 2006"
# verification string for Google Webmaster Tools
#google_verify_meta = "BAi57DROASu4b2mkVNA_EyUsobfA7Mq8BmSg7Rn-Zp9"
# verification string for Bing Webmaster Tools
#bing_verify_meta = "3DA353059F945D1AA256B1CD8A3DA847"
# verification string for Yandex Webmaster Tools
#yandex_verify_meta = "66b077430f35f04a"
# Optionally display a message about the site's use of cookies, which may be
# required for your site in the European Union. Set the parameter below to a
# page where the user can get more information about cookies, either on your
# site or externally, for example:
#cookie_consent_info_url = "/cookie-information/"
#cookie_consent_info_url = "http://cookiesandyou.com"
# show sharing icons on pages/posts (default: true)
#sharingicons = true
# Display post summaries instead of content in list templates (default: true)
#truncate = true
# Disable the use of sub-resource integrity on CSS/JS assets (default: false)
# Useful if you're using a CDN or other host where you can't control cache headers
#disable_sri = false
[params.sidebar]
# Optional about block for sidebar (can be Markdown)
about = "我的博客[簡單示例](http://localhost:1313/)."
# 側邊欄顯示最近幾條文章 (Default: 5)
#num_recent_posts = 2
[params.social]
# Optional, used for attribution in Twitter cards (ideally not a person
# for example: nytimes, flickr, NatGeo, etc).
# See: https://dev.twitter.com/cards/types/summary-large-image
twitter = "username"
# Default content language for Hugo 0.17's multilingual support (default is "en")
# See: https://github.com/spf13/hugo/blob/master/docs/content/content/multilingual.md
#DefaultContentLanguage = "en"
# Languages to render
#[languages.en]
#[languages.bg]
# Bulgarian date format is dd.mm.yyyy
#date_format = "02.01.2006"
# vim: ts=2 sw=2 et
我們使用以上配置文件，再次啟動服務肪笋，訪問http://localhost:1313月劈，得到如下頁面：
[圖片上傳失敗...(image-7086d-1625209869856)]
9，將博客部署在Git
建好自己的博客后藤乙，需要將其部署在公網猜揪，才能讓別人訪問。有兩種方法：
- 購買自己的域名和服務器坛梁，將博客部署在上面而姐。
- 將博客托管在github。
這里我們介紹第2中方式罚勾。
9.1毅人，準備要部署的內容
要想講博客部署在github吭狡，首先得有一個github 賬號。
然后需要在github 上創(chuàng)建一個倉庫丈莺，用于存放我們的博客系統(tǒng)划煮。
我們創(chuàng)建的倉庫的名字應該是這種格式"賬戶名.github.io"，比如我創(chuàng)建的倉庫的名字為"codeshellme.github.io"缔俄。
要向倉庫中存放的內容弛秋，使用hugo 命令生成的。在myblog 目錄下俐载，運行hugo 命令：
>>> hugo
| EN
-------------------+-----
Pages | 14
Paginator pages | 0
Non-page files | 0
Static files | 1
Processed images | 0
Aliases | 6
Sitemaps | 1
Cleaned | 0
Total in 74 ms
執(zhí)行成功后蟹略，會生成一個public 目錄，這個目錄中的內容遏佣，就是我們博客系統(tǒng)的所有內容挖炬，我們需要將這些內容存放在Git 倉庫中。
9.2状婶，部署到Git
按照如下步驟將博客內容上傳到Git 倉庫意敛，在public 目錄下，依次執(zhí)行下面的命令：
# 初始化倉庫
git init
# 將所有內容添加到git
git add .
# 提交到git 本地
git commit -m "我的博客第一次提交"
# 關聯到遠程git膛虫，注意這里需要寫你自己的git 地址
git remote add origin https://github.com/codeshellme/codeshellme.github.io.git
# 推送到遠程git
git push origin master
9.3草姻，訪問公網地址
經過上面的步驟，我們就將博客內容托管在了github稍刀。那么你的博客的地址將是這種格式：
https://倉庫名字
例如我的博客地址就是：
https://codeshellme.github.io
訪問這個地址就可以訪問我們的博客了撩独。
如果以后我們寫了新的博客，則需要再使用hugo 命令生成新的內容账月，再將新的內容push 到Git 倉庫就可以了综膀。
原文
如何用hugo 搭建博客
