使用Hugo+LoveIt主题搭建博客网站

==========================

Hugo (雨果)简介

==========================

Hugo 是一个静态网站生成系统, 可以将Markdown文档转成html, Hugo 同时也是一个网站服务器.

特点:

1. go 语言编写, 所以转码速度库, 网站的性能高, 没有依赖部署非常方便

2.  系统没有内置 theme,  但社区有大量的 theme 可供使用.

 

==========================

Hugo (雨果)使用步骤

==========================

1. 在 hugo github 的 release 中下载最新extended版, 只有 extended版可能将 scss 转成css样式 , https://github.com/gohugoio/hugo/releases , 解压到 c:\hugo\bin 目录

2. 将c:\hugo\bin 目录加到 windows 的环境变量 Path 中

3. 在命令行中, 输入 hugo version 命令测试, 输出版本号说明安装OK

4.  新建站点

     先新建一个网站目录,  如 c:\mysite_container,   使用命令行

    cd  c:\mysite_container
    hugo new site mysite

   该命令同时生成一个 mysite 目录, 这个 c:\mysite_container\mysite 根目录,  并在根目录下生成一个 config.toml 配置文件.

5.  创建一个 xxx.md 博文 

     cd  c:\mysite_container\mysite    
     hugo new posts/xxxx.md

     上述命令会在 content 下先生成一个 posts 子目录, 然后在其中创建一个 xxx.md 博文，命令中的md文件必须带扩展名,  否则命令会报错.

5.1  参考下面模板, 为 xxx.md 增加 header

---
title: "Knife_setter 对刀仪技改项目"
description: "Knife_setter 对刀仪技改项目"
date: 2020-02-01T20:55:32+08:00
draft: false
author: Liuzhongwu
categories: ["案例"]
tags: ["工厂技改项目",".Net Framework","CSharp"]
---

6.  构建内容(可选步骤)

   hugo -D

7.  启动 hugo server 预览

  hugo server -D  --disableFastRender

   这个命令会完成文档生成, 并启动一个 live server, 默认端口是 1313, 使用浏览器打开 http://localhost:1313 预览。

  其中 -D 参数,   生成静态文件时是否包含 draft 博文.

  --disableFastRender 参数: 禁止hugo 会启用 hot reload 功能,  如在live reload 情况下, 一边修改文章一边可自动生成静态文件供预览, 很多时候比较烦人.

   hugo server -e production 命令用于生产环境的开启,

8.  发布网站

hugo # 发布命令

默认情况下， hugo 将会将所有的内容发布到 mysite\public 目录下，包括所有的img、js、css等等， 我们只需要将 public 目录发布到远端服务器上即可。当然， 我们也可以在 mysite\config.toml 文件中增加 publishDir 变量来修改发布路径， 比如设置：

 publishDir = "docs"

 

 

==========================

理解 hugo 网站组织形式

==========================

1. 认识 hugo site的 目录结构

.
├── archetypes # markdown文章的模版,包括文章前缀注释写法
├── config.toml # 配置文件
├── content # 网站内容，主要保存文章
├── data # 生成网站可用的数据文件，可用在模版中
├── layouts # 生成网站时可用的模版
├── public # 通过hugo命令生成的静态文件，这是我们网站真正要发布的目录
├── resources # 通过hugo命令一起生成的资源文件，貌似是临时文件
├── assets # 静态文件，比如文章中的图片/视频文件、css等, 将来其下的子目录和文件会在生成时候会自动复制到 public 目录中. 
├── static # 静态文件，比如favicon等图标, 以及site.xml等, 将来其下的子目录和文件会在生成时候会自动复制到 public 目录中. 
└── themes # 保存可用的hugo主题

 

2. markdown文件和资源的组织形式:

1. 博客文章, 推荐放到 content/posts 子目录下
2. 全局性的静态文件, 比如 about.md 存储在 content 目录下
3. 博文图片, 推荐放在网站的 assets 目录下, 需要新建这个目录, 比如图片放到 assets\images
4. 音频文件, 推荐放到 assets\music 子目录下. 
5. 博文中引用的 css 样式, 推荐放到 assets\css 子目录下.
6. favicon 以及 andriod 下的图标和网站的一些 site.xml 推荐放到static 目录下.
7. 图标/图片/css如何引用?  比如 mkdown 文件如何引用图片? 
  hugo构建时候会将assets和static下的所有内容复制到 public 目录中, 所以mkdown 文件引用图片就可以使用下面的写法
   ![](/images/wechat.png)

 

==========================

为什么使用 LoveIt 模板

==========================

未采用模板时, Hugo 生成的内容没有美观的样式, LoveIt 是一个非常棒的模板, 特点有:

1. 有详细的中文文档  https://hugoloveit.com/zh-cn/

2. 功能很强大, 比如支持各类社交网络分享, 支持搜索, 支持多语言, 我们要做的就是适当裁剪即可.

 

==========================

 LoveIt 模板的使用

==========================

1. 官网下载模板包 https://github.com/dillonzq/LoveIt/releases

2. 解压下载包到 themes 目录下, 确保子目录名为 LoveIt, 见下图

3. 将 themes\LoveIt\exampleSite\ 所有东西复制到站点根目录, 这个步骤非常推荐, 因为 LoveIt 样例site有非常好的目录组织形式.

4. 编辑 mysite\config.toml 文件， 修改 themeDir 变量， 并增加 ignoreErrors 和 publishDir 变量设置 ：

   themesDir = "themes"
   ignoreErrors = ["error-remote-getjson"]
   # publicDir 设置为 docs， 方便发布到 github pages
   publishDir = "docs"
 5.  修改 mysite\content\posts\theme-documentation-built-in-shortcodes\index.zh-cn.md 和  index.en.md 文件

    将 tweet 小节都删除掉， 否则 hugo build 会报错。

 

===========================

github.io 部署问题

===========================

将 hugo 的网站部署到github.io 后, 一般几分钟后就能正常显示,  但如果一直显示 404 报错, 最有可能的问题是, github build 报错了, 报错会发送到github 注册邮箱中, 也可以在仓库的actions 下找到详细的报错信息.

 

 

 

==========================

附属

==========================

favicon制作的网站  https://hugoloveit.com/zh-cn/theme-documentation-basics/

配置 loveIt 的搜索引擎和 Google analyics   https://jellyzhang.github.io/%E4%BD%BF%E7%94%A8hugo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/

https 证书 https://www.nashome.cn/posts/acme/

 

 

==========================

参考

==========================

https://sspai.com/post/59904#!

LoveIt 中文官网 https://hugoloveit.com/zh-cn/

官方config 设置说明 https://www.gohugo.org/doc/overview/configuration/

hugo 不完美系列教程  https://www.jianshu.com/p/c5297a8bb1e7

使用Hugo+LoveIt主题搭建博客 https://jellyzhang.github.io/%E4%BD%BF%E7%94%A8hugo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/

loveIt config.toml 的详细配置 https://developer.aliyun.com/article/859477

   

 

posted @ 2022-03-03 23:09  harrychinese  阅读(1298)  评论(0)  编辑  收藏  举报