Hugo
Hugo 是由 Go 語言實現(xiàn)的靜態(tài)網(wǎng)站生成器涮拗。簡單饶辙、易用胡本、高效、易擴展畸悬、快速部署侧甫。
建立此博客受到jdhao的啟發(fā).
安裝
brew install hugo
# 檢查安裝成功
hugo version
Hugo Static Site Generator v0.58.3/extended darwin/amd64 BuildDate: unknown
生成 site 目錄
hugo new site blog
cd blog
git init
# 目錄結(jié)構(gòu)
tree blog
config.toml
是配置文件,在里面可以定義博客地址蹋宦、構(gòu)建配置披粟、標題、導(dǎo)航欄等等冷冗。
themes
是主題目錄守屉,可以去 themes.gohugo.io
下載喜歡的主題。
content
是博客文章的目錄蒿辙。
安裝主題
去 themes.gohugo.io 選擇喜歡的主題拇泛,下載到 themes 目錄中,然后在 config.toml
中配置 theme = "even"
即可思灌。
even主題介紹
hugo-theme-even: hexo-theme-even的移植版本.
下載
可以直接 clone 到 themes 目錄下俺叭,優(yōu)點是如果對主題有調(diào)整需求可以同時提交到 git 控制中。
git clone https://github.com/olOwOlo/hugo-theme-even themes/even
也可以添加到 git 的 submodule 中泰偿,優(yōu)點是后面講到用 travis 自動部署時比較方便熄守。如果需要對主題做更改,最好 fork 主題再做改動耗跛。
git submodule add https://github.com/olOwOlo/hugo-theme-even.git themes/even
重新 build
如果需要調(diào)整更改主題裕照,需要在 themes/even
目錄下重新 build
cd themes/even && npm i && npm start
第一篇文章
hugo new post/my-first-post.md
文章頂部可以設(shè)置一些 meta 信息,例如:
---
title: "My First Post"
date: 2017-12-14T11:18:15+08:00
weight: 70
markup: mmark
draft: false
keywords: ["hugo"]
description: "第一篇文章"
tags: ["hugo", "pages"]
categories: ["pages"]
author: ""
---
這里是文章內(nèi)容
配置項目
覆蓋config.toml
拷貝themes/even/exampleSite
下的config.toml
覆蓋根目錄下的config.toml
config.toml一些設(shè)置項目
logoTitle = "你的首頁標題名"
# 歸檔调塌、標簽晋南、分類每頁顯示的文章數(shù)目,建議修改為一個較大的值
archivePaginate = 5
# 是否在歸檔頁顯示文章的總數(shù)
showArchiveCount = true
# 是否使用mathjax(數(shù)學公式)
mathjax = true # see https://www.mathjax.org/
mathjaxEnableSingleDollar = true # 是否使用 $...$ 即可進行inline latex渲染
mathjaxEnableAutoNumber = false # 是否使用公式自動編號
# 鏈接到markdown原始文件(僅當允許hugo生成markdown文件時有效)
linkToMarkDown = false # Only effective when hugo will output .md files.
# 啟用公共CDN羔砾,需自行定義
[params.publicCDN] # load these files from public cdn
# 社交鏈接
[params.social]
預(yù)覽
hugo server -D
#...
#Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
hugo 怎么插入本地 image
在site 的目錄下的 static 下就是存儲的靜態(tài)文件负间,我們創(chuàng)建 media 目錄存放圖片等媒體文件紊扬,引用的話,直接「/media/xxx.png」 唉擂。
GitHub 配置
在github上新建一個項目,項目的名稱必須是(你的用戶名.github.io)
設(shè)置Git的user name和email
git config --global user.name "imymirror"
git config --global user.email "2633610394@qq.com"
生成密鑰
ssh-keygen -t rsa -f ~/.ssh/id_rsa_blog -C "2633610394@qq.com"
將ssh公鑰內(nèi)容拷貝到Github
將ssh公鑰內(nèi)容拷貝到Github->Setting->Deploy keys
cat ~/.ssh/id_rsa_blog.pub
Your identification has been saved in id_rsa_blog.
Your public key has been saved in id_rsa_blog.pub.
生成 Github Access Token
至少要有 public_repo 的權(quán)限檀葛。
配置 Travis[1]
去 Travis CI 注冊關(guān)聯(lián) Github 的賬號玩祟,然后同步賬戶并激活 blog repo。
接著進入 blog 的設(shè)置頁面屿聋,選擇自動部署觸發(fā)條件空扎,并把剛剛生成的 GitHub Access Token 添加到環(huán)境變量里。
在 blog repo 中添加 .travis.yml
sudo: false
language: go
git:
depth: 1
install: go get -v github.com/gohugoio/hugo
script:
‐ hugo
deploy:
provider: pages
skip_cleanup: true
github_token: $GITHUB_TOKEN
on:
branch: master
local_dir: public
repo: <username>/<username>.github.io
fqdn: <custom-domain-if-needed>
target_branch: master
email: <github-email>
name: <github-username>
部分參數(shù)解釋:
- 默認情況下润讥,travis 會自動下載 git submodules
- github_token: $GITHUB_TOKEN 要和 travis 設(shè)置的環(huán)境變量名一致
- fqdn: 如果需要設(shè)置自定義域名转锈,可以在這里設(shè)置,travis 會自動生成 CNAME 文件提交楚殿,同時要設(shè)置 config.toml 中的相應(yīng)的 baseURL
最后撮慨,可以手動去 travis 觸發(fā)一次 build 檢查效果。如果設(shè)置了提交觸發(fā) build脆粥,之后每次 blog repo 有提交都會自動 build砌溺,不再需要關(guān)心 travis 狀態(tài)。
怎么找到自己的Github ID
Where can I find the GitHub ID in my account?
https://api.github.com/users/your_github_user_name
部署到Github個人頁面[2]
在Github創(chuàng)建一個倉庫变隔,例如名字叫blog规伐,可以是私有的,這個倉庫用來存放網(wǎng)站內(nèi)容和源文件.
再創(chuàng)建一個名稱為<username>.github.io的倉庫匣缘,username為GitHub用戶名猖闪,這個倉庫用于存放最終發(fā)布的網(wǎng)站內(nèi)容
進入本地網(wǎng)站目錄
cd <YOUR PROJECT>
關(guān)聯(lián)遠程blog倉庫
git remote add origin git@github.com:zhigang26/blog.git
確保本地網(wǎng)站正常,hugo server運行后在本地打開localhost:1313檢查網(wǎng)站效果和內(nèi)容肌厨,注意hugo server這個命令不會構(gòu)建草稿培慌,所以如果有草稿需要發(fā)布,將文章中的draft設(shè)置為false
關(guān)閉本地Hugo服務(wù)器Ctrl+C
柑爸,然后刪除本地網(wǎng)站目錄下的public
文件夾
rm -rf ./public
創(chuàng)建public子模塊检柬,注意下面是一行命令,不是兩行
git submodule add -b master git@github.com:<USERNAME>/<USERNAME>.github.io.git public
git submodule add -b master git@github.com:zhigang26/zhigang26.github.io.git public
然后就可以執(zhí)行hugo命令竖配,此命令會自動將網(wǎng)站靜態(tài)內(nèi)容生成到public文件夾何址,然后提交到遠程blog倉庫
hugo -t even
cd public
git status
git add .
git commit -m "first commit"
git push -u origin master
自動部署腳本
將以上步驟添加到自動執(zhí)行腳本中deploy.sh
,腳本commit提交信息會使用執(zhí)行時的時間进胯,將腳本放到網(wǎng)站項目路徑下用爪,寫完博客后,雙擊運行即可自動部署發(fā)布
#!/bin/bash
echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"
# Build the project.
hugo -t even # if using a theme, replace with `hugo -t <YOURTHEME>`
# Go To Public folder
cd public
# Add changes to git.
git add .
# Commit changes.
msg="rebuilding site `date`"
if [ $# -eq 1 ]
then msg="$1"
fi
git commit -m "$msg"
# Push source and build repos.
git push origin master
# Come Back up to the Project Root
cd ..
Markdown文件之間如何檢查引用
比如在my-first-post.md
引用使用Hugo搭建個人博客.md
,引用方式可以嘗試: