使用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 閱讀(1702) 評論(0) 收藏舉報

刷新頁面返回頂部

harrychinese

使用Hugo+LoveIt主題搭建博客網站

公告