Ubuntu18.04下用hugo搭建gitee博客指南

配置环境

  • 虚拟机软件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主题,当然也可以进入网址博客主题 选择自己喜欢的主题,然后根据上面的指引下载到本地并进行配置,一般是采用githubclone进行下载,一定要记得根据网站上的指引修改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>

摘选自在Hugo中使用MathJax

主页的设置

主页需要在 /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以外的所有文件,否则可能会出现文件的读取错误等问题。

其他语法

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值