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 "2633610394@qq.com"  

生成密钥

ssh-keygen -t rsa -f ~/.ssh/id_rsa_blog  -C "2633610394@qq.com"  

将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 的权限。

配置 Travis[1]

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 git@github.com:zhigang26/blog.git  

确保本地网站正常,hugo server运行后在本地打开localhost:1313检查网站效果和内容,注意hugo server这个命令不会构建草稿,所以如果有草稿需要发布,将文章中的draft设置为false

关闭本地Hugo服务器Ctrl+C,然后删除本地网站目录下的public文件夹

rm -rf ./public  

创建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  

然后就可以执行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.png

Nodes


  1. 使用 Hugo 搭建博客

  2. Hugo部署到Github

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,287评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,346评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,277评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,132评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,147评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,106评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,019评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,862评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,301评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,521评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,682评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,405评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,996评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,651评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,803评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,674评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,563评论 2 352

推荐阅读更多精彩内容