Hugo 简介
Hugo是一个用Go语言编写的静态站点生成器,hugo的易操作性和其拥有大量的主题库使其备受技术博客博主喜爱。记录一些自己亲手搭建博客的经验之谈。本文操作基于macos
下
如何安装Hugo
如果你是macOs
用户可以使用homebrew
来安装:
brew install hugo
如果你是Ubuntu
或者其他linux
用户可以使用apt
来安装:
sudo apt-get install hugo
如果是Windows
用户,使用scoop
快速安装:
scoop install hugo
使用包管理工具,基本上可以实现一条代码快速安装,具体可以参考Hugo官网
生成博客文件
自己选择合适的文件夹下使用终端输入命令:
hugo new site myblog
此命令会在当前文件夹下建立一个名叫myblog
的文件夹;
接下来就是选择你喜爱的主题hugo主题可以随意挑一个自己喜爱的主题使用,也可以在github中搜索你想要的主题库,使用命令:
cd themes
git clone https://github.com/Track3/hermit.git themes/hermit
myblog/content
文件夹是存放你博客文章的地方,在此新建.md
文件
hugo new posts/XXXX.md
可以在XXXX.md
文件中使用markdown
格式编写一些博客内容,使用命令:
hugo server -t 主题名 -D
进行主题预览
配置主题,打开myblog/config.toml
每个主题有不同的配置:
baseURL = "https://wuhongyui.github.io"
languageCode = "en-us"
defaultContentLanguage = "en"
title = "拿了橘子跑"
theme = "hermit"
# enableGitInfo = true
pygmentsCodefences = true
pygmentsUseClasses = true
# hasCJKLanguage = true # If Chinese/Japanese/Korean is your main content language, enable this to make wordCount works right.
rssLimit = 10 # Maximum number of items in the RSS feed.
copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License." # This message is only used by the RSS template.
enableEmoji = true # Shorthand emojis in content files - https://gohugo.io/functions/emojify/
# googleAnalytics = "UA-123-45"
# disqusShortname = "yourdiscussshortname"
[author]
name = "拿了橘子跑"
[blackfriday]
# hrefTargetBlank = true
# noreferrerLinks = true
# nofollowLinks = true
[taxonomies]
tag = "tags"
# Categories are disabled by default.
[params]
dateform = "Jan 2, 2006"
dateformShort = "Jan 2"
dateformNum = "2006-01-02"
dateformNumTime = "2006-01-02 15:04 -0700"
# Metadata mostly used in document's head
# description = ""
# images = [""]
themeColor = "#494f5c"
homeSubtitle = "Stay hungry, Stay foolish!"
footerCopyright = ' · <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">CC BY-NC 4.0</a>'
# bgImg = "" # Homepage background-image URL
# Prefix of link to the git commit detail page. GitInfo must be enabled.
# gitUrl = "https://github.com/username/repository/commit/"
# Toggling this option needs to rebuild SCSS, requires Hugo extended version
justifyContent = false # Set "text-align: justify" to `.content`.
relatedPosts = false # Add a related content section to all single posts page
code_copy_button = true # Turn on/off the code-copy-button for code-fields
# Add custom css
# customCSS = ["css/foo.css", "css/bar.css"]
# Social Icons
# Check https://github.com/Track3/hermit#social-icons for more info.
[[params.social]]
name = "twitter"
url = "https://twitter.com/"
[[params.social]]
name = "instagram"
url = "https://instagram.com/"
[[params.social]]
name = "github"
url = "https://github.com/wuhongyui"
[menu]
[[menu.main]]
name = "Article"
url = "posts/"
weight = 10
[[menu.main]]
name = "About"
url = "about-hugo/"
weight = 20
博客文章内的配置
打开myblog/archetypes/default.md
可添加以下默认选项:
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true #设置为false既可以编译成html,ture为本地修改
comments: false
images:
markup: mmark
注意:许多博客上的配置语句是用等号,有可能会导致主题文件编译的时候出现错误,建议使用:
来分隔
Hugo上数学公式显示问题
在markdown里编写的数学公式正常显示,到HTML网页中会出现不适配的现象,网上一般才用MathJax来进行渲染,但亲测配置起来麻烦,还不一定有效。建议在写包含数学公式的博文时使用 Mmark.只需要在 markdown 文件的 front matter 里加上一行:
markup: mmark
即可切换到 Mmark.推荐使用 Mmark 的原因只要是无需更多的配置就可以开始写数学公式了,数学公式全部用两个美元符号包围起来,就像这样 $$ f(x) = \lim_{n \to \infty}x_n $$
变可以在行内显示公式
f
(
x
)
=
lim
n
→
∞
x
n
f(x) = \lim_{n \to \infty}x_n
f(x)=n→∞limxn 行间公式与行内公式是一样的,区别在于行间公式前后加上一个空行,这样就可以让 Mmark 自动判断你需要的是行内公式还是行间公式了,行间公式的例子:
$$
f(x) = \lim_{n \to \infty}x_n
$$
显示效果为:
f
(
x
)
=
lim
n
→
∞
x
n
f(x) = \lim_{n \to \infty}x_n
f(x)=n→∞limxn
在Hugo中设置
这个很简单,只需要在 hugo 的主题目录里,加上一行代码到你的博文页面一定会包含的文件里即可.一般可以选择加入到 themes/hermit/layouts/partials/footer.html
里,这里的hermit
是我使用的 hugo 主题名称.需要添加的一行代码为:
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_SVG"></script>
这样便可以顺利在hugo界面中愉快的输入数学公式啦!
将Blog推送到GitHub上
使用hugo server -D
预览页面无误之后,可以正式发布网站供大家浏览,需要将blog文章里的draft
改为false
使用命令:
hugo --theme=hermit --baseUrl="https://wuhongyui.github.io/" --buildDrafts
可以在当前目录生成一个/public
文件夹,只需要使用如下命令将public
文件夹推送到GitHub上的Repository
即可:
git init
git add .
git commit -m "commit message"
git remote add origin https://github.com/ShaneTian/ShaneTian.github.io.git
git push -u origin master
推送失败时使用git push -u origin master -f
强制覆盖git仓库。
在博客中插入图片
使用markdown编写的博客文章中插入的图片并不能直接显示在博客网页里,因此需要在博客文件中手动新建文件夹/myblog/static/images
来保存图片文件。
在使用hugo命令生成博客网页时便会将图片文件添加到public
文件夹下。
├── config.toml
├── content
│ ├── about
│ ├── archives.md
│ └── posts
├── public
│ ├── about
│ ├── archives
│ ├── categories
│ ├── css
│ ├── images # 这里就是static/imags目录下的文件
│ ├── index.html
│ ├── js
│ ├── page
│ ├── posts
│ ├── tags
│ └── true
├── resources
│ └── _gen
├── static
│ └── images # 这个是新增的
└── themes
└── hermit
线上怎么引入pulic/images
中的图片,在你的博客文章中content/posts/xxx.md
文章中使用路径![](/images/xxx.jpg)
便可以在博客网站中显示引入的图片。