Mac下使用Hugo+Github Pages搭建個(gè)人博客

Hugo

Hugo 是由 Go 語言實(shí)現(xiàn)的靜態(tài)網(wǎng)站生成器。簡(jiǎn)單、易用、高效、易擴(kuò)展、快速部署。

建立此博客受到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)建配置、標(biāo)題、導(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ǎn)是如果對(duì)主題有調(diào)整需求可以同時(shí)提交到 git 控制中。

git clone https://github.com/olOwOlo/hugo-theme-even themes/even

也可以添加到 git 的 submodule 中，優(yōu)點(diǎn)是后面講到用 travis 自動(dòng)部署時(shí)比較方便。如果需要對(duì)主題做更改，最好 fork 主題再做改動(dòng)。

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)容

配置項(xiàng)目

覆蓋config.toml

拷貝themes/even/exampleSite下的config.toml覆蓋根目錄下的config.toml

config.toml一些設(shè)置項(xiàng)目

logoTitle = "你的首頁標(biāo)題名"  

# 歸檔、標(biāo)簽、分類每頁顯示的文章數(shù)目，建議修改為一個(gè)較大的值  
archivePaginate = 5  

# 是否在歸檔頁顯示文章的總數(shù)  
showArchiveCount = true  

# 是否使用mathjax（數(shù)學(xué)公式）  
mathjax = true           # see https://www.mathjax.org/   
mathjaxEnableSingleDollar = true   # 是否使用 $...$ 即可進(jìn)行inline latex渲染  
mathjaxEnableAutoNumber = false   # 是否使用公式自動(dòng)編號(hào)  

# 鏈接到markdown原始文件（僅當(dāng)允許hugo生成markdown文件時(shí)有效）  
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 下就是存儲(chǔ)的靜態(tài)文件，我們創(chuàng)建 media 目錄存放圖片等媒體文件，引用的話，直接「/media/xxx.png」 。

GitHub 配置

在github上新建一個(gè)項(xiàng)目，項(xiàng)目的名稱必須是（你的用戶名.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 注冊(cè)關(guān)聯(lián) Github 的賬號(hào)，然后同步賬戶并激活 blog repo。

接著進(jìn)入 blog 的設(shè)置頁面，選擇自動(dòng)部署觸發(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ù)解釋：

  • 默認(rèn)情況下，travis 會(huì)自動(dòng)下載 git submodules
  • github_token: $GITHUB_TOKEN 要和 travis 設(shè)置的環(huán)境變量名一致
  • fqdn: 如果需要設(shè)置自定義域名，可以在這里設(shè)置，travis 會(huì)自動(dòng)生成 CNAME 文件提交，同時(shí)要設(shè)置 config.toml 中的相應(yīng)的 baseURL

最后，可以手動(dòng)去 travis 觸發(fā)一次 build 檢查效果。如果設(shè)置了提交觸發(fā) build，之后每次 blog repo 有提交都會(huì)自動(dòng) 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個(gè)人頁面[2]

在Github創(chuàng)建一個(gè)倉庫，例如名字叫blog，可以是私有的，這個(gè)倉庫用來存放網(wǎng)站內(nèi)容和源文件.

再創(chuàng)建一個(gè)名稱為<username>.github.io的倉庫，username為GitHub用戶名，這個(gè)倉庫用于存放最終發(fā)布的網(wǎng)站內(nèi)容

進(jìn)入本地網(wǎng)站目錄

cd <YOUR PROJECT>

關(guān)聯(lián)遠(yuǎn)程blog倉庫

git remote add origin git@github.com:zhigang26/blog.git

確保本地網(wǎng)站正常，hugo server運(yùn)行后在本地打開localhost:1313檢查網(wǎng)站效果和內(nèi)容，注意hugo server這個(gè)命令不會(huì)構(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命令，此命令會(huì)自動(dòng)將網(wǎng)站靜態(tài)內(nèi)容生成到public文件夾，然后提交到遠(yuǎn)程blog倉庫

hugo -t even  

cd public  
git status  
git add .  
git commit -m "first commit"  
git push -u origin master

自動(dòng)部署腳本

將以上步驟添加到自動(dòng)執(zhí)行腳本中deploy.sh，腳本commit提交信息會(huì)使用執(zhí)行時(shí)的時(shí)間，將腳本放到網(wǎng)站項(xiàng)目路徑下，寫完博客后，雙擊運(yùn)行即可自動(dò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搭建個(gè)人博客.md,引用方式可以嘗試:

image.png

Nodes

  1. 使用 Hugo 搭建博客 ?

  2. Hugo部署到Github ?

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容