Hugo、Hexo博客搭建及Hugo的自定义配置

深藏阁楼爱情的钟 2022-10-03 01:49 562阅读 0赞

## 1 Hugo介绍 ##

世界上最快的网站构建框架。  
  `Hugo`是最受欢迎的开源静态站点生成器之一。凭借其惊人的速度和灵活性，`Hugo`使建筑网站再次变得有趣。  
  [Hugo官网][Hugo]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70 1]

## 2 Hugo及主题的安装 ##

[安装教程][Link 1]  
  [在线预览][Link 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70 2]

## 3 通过配置文件deploy.sh实现一键部署到GitHub ##

（a）`deploy.sh`文件放在站点根目录下；  
（b）执行方法分两种（`windows`下）：

*  方法一：站点根目录下，鼠标右键，打开`git bash here`窗口，执行`sh deploy.sh`。
 *  方法二：选中`deploy.sh`文件，鼠标右键属性，更改打开方式，将打开方式选择为`git-bash.exe`执行文件，以后写新的文章后，双击下脚本文件即可成功推送到`github`上。

#!/bin/bash
    
    echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"
    
    # Build the project.
    hugo # if using a theme, replace by `hugo -t <yourtheme>`
    
    # Go To Public folder
    cd public
    # Add changes to git.
    git add -A
    
    # Commit changes.
    msg="rebuilding site `date`"
    if [ $# -eq 1 ]
      then msg="$1"
    fi
    git commit -m "$msg"
    
    # Push source and build repos.
    git push origin master
    
    # Come Back
    cd ..

## 4 Hexo介绍 ##

快速、简洁且高效的博客框架。  
  [Hexo官网][Hexo]

## 5 Hexo及主题的安装 ##

[Hexo搭建教程][Hexo 1]  
  [Hexo的next主题安装][Hexo_next]  
  [在线预览][Link 3]

## 6 从hexo转移到hugo框架 ##

原因如下：  
  （a）之前的`hexo`配置了一些动态背景、评论功能等等，但是后来不想要这些功能（看着比较炫酷，但是没什么实际用处），要调整的话需要到处找文件改配置，比较麻烦；  
  （b）经过`github`、`coding`双线部署，静态文件压缩，配置`CDN`后，感觉页面加载速度还不是很快；  
  （c）自定义配置的话需要在站点配置、主题配置来回搞，还是嫌麻烦。

## 7 hugo字体图标自定义配置 ##

[阿里巴巴矢量库][Link 4]  
  打开图标管理 -> 我的项目 -> `hugo-blog`，将选择好的图标加入购物车，加入项目，修改下图标的名称（名称改为`icon-xxx`）、大小和颜色。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70 3]  
然后点击下载至本地，解压后目录结构如下。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70 4]  
将hugo的themes\\even\\src\\fonts\\iconfont目录下的4个文件用上一步下载的对应文件替换掉。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70 5]  
打开`themes\even\src\css\_iconfont.scss`文件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70 6]  
修改的配置不能立即生效，我们重新编译打包主题文件。因此需要先安装 [Node.js][]和[Yarn][] ，安装`Node.js`后，`Yarn`的快速安装方法。

npm install -g yarn

检查`Node.js`和`Yarn`是否安装成功。

# node -v
    # npm -v
    # yarn --version

命令执行后都能查到版本号，说明安装成功。  
![在这里插入图片描述][20190622193231725.png]  
主题文件的依赖安装和打包。

# cd ./themes/even/
    # yarn install
    # yarn build

## 8 给菜单项加上好看的图标 ##

将`themes\even\layouts\partials\header.html`里的`partials\header.html`文件结构复制到站点根目录下的`layouts`中，对站点根目录下`layouts\partials\header.html`文件进行修改。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70 7]  
根据站点根目录下`config.toml`文件中的`identifier`属性匹配字体图标名称。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70 8]  
图标显示出来后感觉和字距离太近了，可以调整下`css`样式，配置下站点根目录下的`config.toml`文件。  
![在这里插入图片描述][20190622195439143.png]  
配置站点根目录文件`custom.css`文件（注意这是`css`文件，不要将`themes`中的`scss`样式直接复制过来改改，会报错），自定义`custom.css`、`custom.js`可以覆盖主题里设置的`scss`、`js`，这样我们可以不用去改动主题文件，方便以后对主题的切换。

/* 设置菜单栏icon偏移位置 */
    .menu-item-link .iconfont::before {
    	padding-right: 8px;
    }

## 9 完整的custom.css文件，需要改动样式的可自定义 ##

/* ===============================custom.css ================================== */
    /* 设置菜单栏icon偏移位置 */
    .menu-item-link .iconfont::before {
    	padding-right: 8px;
    }
    
    /* 设置title字体大小 */
    .header .logo-wrapper .logo {
    	position: relative;
        font-size: 36px;
        line-height: 68px;
    }
    
    /* 设置title上横线 */
    .header .logo-wrapper .logo::before {
        content: '';
        position: absolute;
    	top: -10px;
    	left: 27px;
        width: 160px;
        height: 2px;
        background-color: #333;
    }
    
    /* 设置title下横线 */
    .header .logo-wrapper .logo::after {
        content: '';
        position: absolute;
    	bottom: -10px;
        left: 0;
    	left: 27px;
        width: 160px;
        height: 4px;
        background-color: #333;
    }
    
    /* 去除顶部border */
    body {
    	border-top: 0;
    }
    
    /* 让阅读更多居中 */
    .read-more {
    	text-align: center;
    	padding: 0 0 20px;
    }
    
    /* 调整阅读更多样式 */
    .post .post-content .read-more .read-more-link {
        border: 1px solid #ccc;
        padding: 0.5em 1em;
        background-color: #000;
        color: #fff;
    }
    
    /* 设置文章盒子阴影 */
    .post {
    	padding: 1em 1em;
        margin: 1.5em 0;
    	box-shadow: 0 0 5px rgba(202,203,203,.5);
    	-webkit-box-shadow: 0 0 5px rgba(202,203,203,.5);
    }
    
    /* 调整返回顶部icon位置和大小 */
    .back-to-top {
        right: 30px;
        bottom: 45px;
        font-size: 2em;
    }
    
    /* 设置菜单项的标签、分类页面样式 */
    .terms .terms-tags .terms-link {
        margin: 10px 10px;
        border-radius: 50em;
        padding: 5px 10px;
        background-color: #FFF2AB;
    }
    
    /* 设置菜单项的标签、分类页面的统计数字样式 */
    .terms .terms-tags .terms-link .terms-count {
        top: -2px;
        right: -1px;
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: red;
        color: #fff;
    }
    
    /* 设置底部heart跳动样式动画 */
    .footer .copyright .copyright-year .heart {
        color: #ff7171;
    	display: inline-block;
    	animation: heartAnimate 1.33s ease-in-out infinite;
    }
    
    @keyframes heartAnimate {
    	0%, 100% {
        transform: scale(1);
    	}
    
    	10%, 30% {
    		transform: scale(.9);
    	}
    	20%, 40%, 60%, 80% {
    		transform: scale(1.1);
    	}
    	50%, 70% {
    		transform: scale(1.1);
    	}
    }

[Hugo]: https://gohugo.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70]: /images/20220109/2d070c9f73714402839891f0e6b5c2ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70 1]: /images/20220109/d79df04289014471831b0846f8708f63.png
[Link 1]: https://github.com/factory011/factory011.github.io
[Link 2]: https://factory011.github.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70 2]: /images/20220109/0b0e11e7d9234afcb2f0409901a797b9.png
[Hexo]: https://hexo.io/zh-cn/
[Hexo 1]: https://www.cnblogs.com/factory/p/10566462.html
[Hexo_next]: https://www.cnblogs.com/factory/p/10567649.html
[Link 3]: http://factory011.coding.me/factory011.github.io/
[Link 4]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70 3]: /images/20220109/89932aaa43af46d482a0e5c5863b3ebd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70 4]: /images/20220109/9701d8fccdfa4200a2896d608ac7806f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70 5]: /images/20220109/cd47ec39138b4e28b3ec9e64de9fb663.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70 6]: /images/20220109/3606b919bc904b8193a39920ba4018ed.png
[Node.js]: https://nodejs.org/en/
[Yarn]: https://yarnpkg.com/zh-Hant/
[20190622193231725.png]: /images/20220109/00e169623f8e434794aedc4797b48221.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70 7]: /images/20220109/fab149c02f6c4e61bcd25ac27e005802.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70 8]: /images/20220109/bba5a1039ea949e49b40729bbf19a0a9.png
[20190622195439143.png]: /images/20220109/909e11a572984c18adcee230637580cd.png