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: /.github.io
fqdn:
target_branch: master
email:
name:
部分参数解释:
- 默认情况下,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,可以是私有的,这个仓库用来存放网站内容和源文件.
再创建一个名称为
进入本地网站目录
cd
关联远程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]:/.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 `
# 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
,引用方式可以尝试: