Mac下使用Hugo+Github Pages搭建個人博客(超詳細)

Hugo

Hugo 是由 Go 語言實現的靜態網站生成器。簡單、易用、高效、易擴展、快速部署。 ~~~~

建立此博客受到jdhao的啓發.
根據本文章的步驟,你可以訪問最終搭建完成的我的個人博客

安裝

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  

# 目錄結構  
tree blog  

config.toml 是配置文件,在裏面可以定義博客地址、構建配置、標題、導航欄等等。
themes 是主題目錄,可以去 themes.gohugo.io 下載喜歡的主題。
content 是博客文章的目錄。

安裝主題

themes.gohugo.io 選擇喜歡的主題,下載到 themes 目錄中,然後在 config.toml 中配置 theme = "even" 即可。

even主題介紹
hugo-theme-even: hexo-theme-even的移植版本.

下載

可以直接 clone 到 themes 目錄下,優點是如果對主題有調整需求可以同時提交到 git 控制中。

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

也可以添加到 git 的 submodule 中,優點是後面講到用 travis 自動部署時比較方便。如果需要對主題做更改,最好 fork 主題再做改動。

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

重新 build

如果需要調整更改主題,需要在 themes/even 目錄下重新 build

cd themes/even && npm i && npm start  

第一篇文章

hugo new post/my-first-post.md  

文章頂部可以設置一些 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: ""  
---  
這裏是文章內容  

配置項目

覆蓋config.toml

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

config.toml一些設置項目

logoTitle = "你的首頁標題名"  

# 歸檔、標籤、分類每頁顯示的文章數目,建議修改爲一個較大的值  
archivePaginate = 5  

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

# 是否使用mathjax(數學公式)  
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]                                         

預覽

hugo server -D  
#...  
#Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)  

hugo 怎麼插入本地 image

在site 的目錄下的 static 下就是存儲的靜態文件,我們創建 media 目錄存放圖片等媒體文件,引用的話,直接「/media/xxx.png」 。

GitHub 配置

在github上新建一個項目,項目的名稱必須是(你的用戶名.github.io)

設置Git的user name和email

git config --global user.name "imymirror"  
git config --global user.email "[email protected]"  

生成密鑰

ssh-keygen -t rsa -f ~/.ssh/id_rsa_blog  -C "[email protected]"  

將ssh公鑰內容拷貝到Github

將ssh公鑰內容拷貝到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 的權限。

配置 Travis1

Travis CI 註冊關聯 Github 的賬號,然後同步賬戶並激活 blog repo。

接着進入 blog 的設置頁面,選擇自動部署觸發條件,並把剛剛生成的 GitHub Access Token 添加到環境變量裏。

在 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>  

部分參數解釋:

  • 默認情況下,travis 會自動下載 git submodules
  • github_token: $GITHUB_TOKEN 要和 travis 設置的環境變量名一致
  • fqdn: 如果需要設置自定義域名,可以在這裏設置,travis 會自動生成 CNAME 文件提交,同時要設置 config.toml 中的相應的 baseURL

最後,可以手動去 travis 觸發一次 build 檢查效果。如果設置了提交觸發 build,之後每次 blog repo 有提交都會自動 build,不再需要關心 travis 狀態。

怎麼找到自己的Github ID

Where can I find the GitHub ID in my account?

https://api.github.com/users/your_github_user_name  

部署到Github個人頁面2

在Github創建一個倉庫,例如名字叫blog,可以是私有的,這個倉庫用來存放網站內容和源文件.

再創建一個名稱爲<username>.github.io的倉庫,username爲GitHub用戶名,這個倉庫用於存放最終發佈的網站內容

進入本地網站目錄

cd <YOUR PROJECT>  

關聯遠程blog倉庫

git remote add origin [email protected]:zhigang26/blog.git  

確保本地網站正常,hugo server運行後在本地打開localhost:1313檢查網站效果和內容,注意hugo server這個命令不會構建草稿,所以如果有草稿需要發佈,將文章中的draft設置爲false

關閉本地Hugo服務器Ctrl+C,然後刪除本地網站目錄下的public文件夾

rm -rf ./public  

創建public子模塊,注意下面是一行命令,不是兩行

git submodule add -b master [email protected]:<USERNAME>/<USERNAME>.github.io.git public  

git submodule add -b master [email protected]:zhigang26/zhigang26.github.io.git public  

然後就可以執行hugo命令,此命令會自動將網站靜態內容生成到public文件夾,然後提交到遠程blog倉庫

hugo -t even  

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

自動部署腳本

將以上步驟添加到自動執行腳本中deploy.sh,腳本commit提交信息會使用執行時的時間,將腳本放到網站項目路徑下,寫完博客後,雙擊運行即可自動部署發佈

#!/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,引用方式可以嘗試:
image

Nodes


  1. 使用 Hugo 搭建博客
  2. Hugo部署到Github
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章