Hugo博客搭建使用

上周琢磨了一周使用了Hexo尝试创建静态博客，且修改出了自己的Theme，最后倒在了Hexo的部署上。后续不得已再选择其他的平台，随后发现了Hugo，这里作一下记录，供以后回顾作资料查找。

一、搭建Hugo环境

参考博客：

1、安装本地环境

这里以mac系统为例子，windows可以参考官方文档中的细节，mac使用brew作为包管理器。

// 安装hugo
brew install hugo
// 检查是否安装成功，查看版本
hugo version
复制代码

2、建立博客

// xxx为博客的项目名
hugo new site xxx
// 随后进入博客目录
cd xxx
复制代码

3、Hugo的基本命令

相比较hexo来说，Hugo已经可以说是简化了很多，静态页面的生成非常的快，是hexo的几倍不止。加上部分博客主题对于博文中使用到的图片进行了自动转换裁切以及缓存，每次生成静态页面的时候并不需要每次都处理一次图片，这样页面生成的速度就得到了改善。

// 本地启动Hugo，默认在localhost:1313
hugo server
// 生成静态页面文件，目录是public
hugo
复制代码

4、配置GitHubpage

这里就不详细的说了，在GitHub上创建好对应的项目后就可以将生成好的静态主页文件上传。

cd public
git init    ##初始化仓库
git remote add origin <https://github.com/caecarxu/caecarxu.github.io.git>    ##链接远程仓库
git add .
git commit -m "first commit"
git push -u origin master
复制代码

每次更新文章后需要手动再push一次。

cd public
git add .
git status
git commit -m "add blog post"
git push
复制代码

二、使用主题

1、挑选主题

主题有蛮多的，质量都很顶，不像hexo的比较粗糙，好像就只有next一个比较多人使用的样子，也不够多样化。

主题可以直接点开官方的主题页面挑选，我选择的是hugo-theme-stack，个人的观感是十分的好看，并不需要我手动去修改太多配置。

效果如下图：

2、做一些个性化的调整

有两个网址可以参考

基础的修改，通过stack主题的官方文档进行修改，stack主题的模版目录里也有相应的example可以复制出来，覆盖原本的配置，进行简单的初始化。
进阶的修改，通过网友的博客进行参考

这边做一些简单的配置介绍：

2.1 修改默认显示语言

左下角有切换主题的按钮，对应的是不同的语言，在主题底下的i18n可以查看，也可以看config的配置。stack刚开始用的时候有点不适应的点是，markdown的多语言是基于文件名字的后缀进行识别的，因此每次配置的时候都需要命名为.cn结尾的md文件。

# config配置文件的修改，修改为默认中文
DefaultContentLanguage: zh-cn
languageCode: zh-CN
# language切换也默认中文排第一位
languages:
    zh-CN:
        languageName: 中文
        title: Kevin's Blog
        weight: 1
    en:
        languageName: English
        title: Kevin's Blog
        weight: 2
复制代码

2.2 侧边栏显示设置

# 设置emoji，类似github的status，可以直接使用emoji表情
# subtitle可以填写自己的介绍或者是座右铭之类的
# avatar就是头像的相关配置
sidebar:
        emoji: xx
        subtitle: xxx
        avatar:
            enabled: true
            local: true
            src: img/avatar.png
复制代码

2.3 主页Home的添加

默认的example配置里没有home页面，因为默认index画面就是home画面，可以修改一下url看一下效果。

# 将home页面添加到sidebar的方法
# menu的顺序是通过weight来排序的
menu:
    main:
        - identifier: home
          name: Home
          url: /
          weight: -100
          params:
            icon: home
复制代码

2.4 添加掘金链接等

icon的配置的地址自己全局搜索一下就知道了。（我也不记得在哪里了）

social:
        - identifier: github
          name: GitHub
          url: <https://github.com/JKevin-5>
          params:
              icon: brand-github

        - identifier: juejin
          name: JueJin
          url: <https://juejin.cn/user/2154698523021608>
          params:
              icon: brand-juejin
复制代码