hugo和mkdocs的搭建

简单写一下hugo博客和mkdocs的搭建

fylZm
最近更新于 2022年2月16日 3 分钟阅读时长 posts
Image credit: github

简单写一下hugo博客和mkdocs的搭建

https://gohugo.io/这是官网

https://gohugo.io/getting-started/installing这是新版hugo的安装

因为的用的学术主题他更新改动太大hugo版本也变化很大 所以我下载的是老版本

hugo https://github.com/gohugoio/hugo/releases在release里找到

$ hugo version
Hugo Static Site Generator v0.66.0/extended windows/amd64 BuildDate: unknown

我用的是0.66版本

Academic 的主题我用的是wowchemy-hugo-themes-4.8.0版本

https://github.com/wowchemy/wowchemy-hugo-themes/releases学术主题的releases

这个主题在5.0后有很大更新,所以我用的是4.8

好了版本就是hugo0.66.0 + Academic 4.8.0

下面开始说说安装

  1. 随便找个地方创建\bin 解压hugo0.66.0的压缩包 把hugo.exe放在/bin下,去环境变量给这个目录添加进行:你的目录/bin

    此时cmd hugo就有反应了

  2. 上面hugo的配置就完成了,这一步开始配置academic ,首先把压缩包解压到一个你放博客的目录 找到里面的exampleSite文件夹(这个是例子)把里面文件全部复制到博客的根目录,并且创建一个themes的文件夹 把刚刚解压的academic文件夹放在里面 ,这时候运行 hugo server就已经成功了 接下来就是配置这个博客 这里是跟着 这个教程去配置的 其实也很简单 把需要的true 不需要的false就行了 修修改改一顿操作完成

  3. hugo –theme=Academic –baseUrl="https://fylZm.github.io/” 生成文件夹上传github完成托管

    到此为止hugo + academic 就完成配置

    接下来开始mkdocs

    众所周知github域名只能一个存储库用,我也是这么想的 如yourname.github.io

    此时其它存储库也想挂载到github pages上怎么办?

    其实很简单 其它存储库直接正常命名即可 如cunchuku1

    你只需要在配置完成后去设置里面page选项打开page就行

    这时候域名就是yourname.github.io/cunchuku1

前言说完了 开始配置mkdocs + mkdocs-material

这里用了个主题是 这个大佬的

首先:

  1. 肯定是去mkdocs官网看文档啊https://www.mkdocs.org/getting-started/#theming-our-documentation

  2. 因为是基于python的所以用pip安装 按着开始教程安装完成后简单配置一下就可以去搞主题了

    有多简单呢? 配置文件如下

site_name: MkLorum
//你没看错 就一行

接下来就是配置主题了 mkdocs-material

首先

  1. https://squidfunk.github.io/mkdocs-material/getting-started/#with-pip这是官网 同样也是pip安装

    对了 如果你的pip不能用你可以去github的仓库https://github.com/squidfunk/mkdocs-material/releases

    去找稳定版本 下载 解压 运行 setup.py文件应该和pip的安装一样

  2. 安装完成后 ,你只需要在上面的配置代码里加两行 如下

site_name: MkLorum
theme:
  name: material

这时候就可以运行看看了 mkdocs serve (注意这里serve没有r 我也不知道为啥少个r整蒙了)

运行成功后就是把文件往/docs文件夹下仍 mkdocs就会自动给创建好对应页面 非常牛逼

然后就是推送了

首先 mkdocs build 生成一个site文件夹 把这个文件夹内容推送到仓库就完成了

如果不懂 youtube有全程录像. ok就到这里了

Other
Avatar
fylZm
社会闲杂人员