配置环境
- 虚拟机软件vmware workstation
- Ubuntu18.04
安装Ubuntu虚拟机的方法请自行上网百度即可。
安装hugo
首先更新虚拟机的安装功能到最新版本,然后安装hugo即可
sudo apt-get update
sudo apt-get install hugo
或者通过下载安装包的方式,目前hugo最新版本是v0.74.0
wget https://github.com/gohugoio/hugo/releases/download/v0.74.0/hugo_0.74.0_Linux-64bit.deb
然后采用以下命令安装
sudo dpkg -i hugo_0.74.0_Linux-64bit.deb
安装过程中会提示以下信息:
Selecting previously unselected package hugo.
(Reading database … 187292 files and directories currently installed.)
Preparing to unpack hugo_0.74.0_Linux-64bit.deb …
Unpacking hugo (0.74.0) …
Setting up hugo (0.74.0) …
安装结束后,可以输入命令
hugo version
来查看当前hugo的版本,同时检验是否安装成功。例如出现以下内容
Hugo Static Site Generator v0.74.0-D2B11626 linux/amd64 BuildDate: 2020-07-13T10:30:21Z
即代表安装成功
配置hugo
首先我们要创建存放hugo博客文件的文件夹
hugo new site name
其中name是可以自定义的文件夹名称.然后是配置主题,本人用的是even主题,当然也可以进入网址博客主题 选择自己喜欢的主题,然后根据上面的指引下载到本地并进行配置,一般是采用github的clone进行下载,一定要记得根据网站上的指引修改config.toml中的内容!
然后在你创建的文件夹下找到post文件夹,在这里创建你的markdown文档并进行编写。最好是在根目录下通过执行命令
hugo new /post/name.md
来创建你要编写的文档,这样会自动填充必要的信息以便于博客显示。记得点开刚创建的文档,把上方
draft: true
改为
draft: false
然后再编写你的markdown文件。编写成功后回到根目录下执行
hugo
会发现多出来一个public文件夹,进入到这个目录,并将这个目录中的所有文件推入你的gitee仓库中。此时你的仓库服务一栏中将会出现Gitee Pages这一功能,在里面可以获得你的gitee博客地址。注意,此时你需要先删除你的public文件夹下除了.git以外的所有文件!然后回到你创建的博客文件夹的根目录下,执行命令
hugo --theme="你下载的主题" --baseUrl="你的博客地址"
其中你的博客地址需要打开gitee 服务->Gitee Pages->部署来获取。此时再次将public文件夹下的内容再次push一次,并回到Gitee Pages页面重新部署你的博客页面。理论上到这一步一个gitee上的hugo博客就可以建成了。
如果建的仓库名和你的gitee账户名不一样,在建站点的时候,需要在themes文件夹下改一下路径:
themes
->even(你的主题名)
->resources
->_gen
->assets
->scss
->sass
下会存渲染网页的CSS文件,但是由于你建的仓库名和gitee账户名不一样,在找到scss
目录后,编译器会去找你的这个仓库名字的目录,如果找不到就会报错。所以你需要在scss
目录下新建一个文件夹,名字和你的仓库名一样,然后把原来的sass
文件夹拖入你刚新建的这个文件夹中,就可以正常运行了。
图片的插入
图片需要放在根目录的static目录下。在markdown文档中时以static目录为根目录写图片路径。例如在static目录下有一个图片1.png,那么文档中的路径只要写 /1.png 即可。
或者,先用hugo
命令编译一下本地,在public
文件夹下看一下图片和你的文档的相对路径,然后再文档中将图片路径修改成public
文件夹下的相对路径即可。
数学公式的使用
尝试添加MathJax时,把所有修改写成了一个layouts/partials/mathjax.html文件
<script type="text/javascript"
async
src="https://cdn.bootcss.com/mathjax/2.7.3/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
displayMath: [['$$','$$'], ['\[\[','\]\]']],
processEscapes: true,
processEnvironments: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
TeX: { equationNumbers: { autoNumber: "AMS" },
extensions: ["AMSmath.js", "AMSsymbols.js"] }
}
});
MathJax.Hub.Queue(function() {
// Fix <code> tags after MathJax finishes running. This is a
// hack to overcome a shortcoming of Markdown. Discussion at
// https://github.com/mojombo/jekyll/issues/199
var all = MathJax.Hub.getAllJax(), i;
for(i = 0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<style>
code.has-jax {
font: inherit;
font-size: 100%;
background: inherit;
border: inherit;
color: #515151;
}
</style>
放在themes/even/layouts/partials/
, 在footer.html中添加如下一段代码
<head>{{ partial "mathjax.html" . }}</head>
主页的设置
主页需要在 /content 目录下创建一个名为 index.md 的文件,里面可以编写你的主页编排信息。里面的文件链接可以采用网址的形式即可。
注意! 如果加了主页索引页后点击链接出现404等情况,尝试以下步骤进行解决:
首先不加index.md文件,运行
hugo --theme="你下载的主题" --baseUrl="你的博客地址"
生成public文件夹下的内容,保存其中post文件夹的副本。然后删除除了public文件夹下除了.git以外的所有文件,然后把index.md文件放回到 /content目录下,再回到根目录执行一次
hugo --theme="你下载的主题" --baseUrl="你的博客地址"
生成public文件夹下的内容,此时用你刚才保存的post文件夹的副本替换新生成的post文件夹,然后再将你的public文件夹下的所有内容push到你的仓库,然后再重新在你的仓库Gitee Pages更新你的博客页面,理论上这样就可以正常运行你的博客了。
注意事项
更新你的博客时,除了要在 /content/post目录下编写新的markdown文档之外,在每一次执行
hugo --theme="你下载的主题" --baseUrl="你的博客地址"
前,务必删除public目录下除了.git以外的所有文件,否则可能会出现文件的读取错误等问题。
其他语法