老陳网志

老陳网志

手帳 &ノート
github

快速搭建Hugo博客

hugo-blog.png

前言#

一直以來用了這麼多年的Wordpress,最近心血來潮,想要重新折騰一番自己的部落格。於是想用 Hugo 搭建。

Hugo 是目前比較流行的 Go 編寫的靜態網站生成器,速度快,易用,可配置,相比 Hexo 來說操作更為簡單。

Hugo 有一個內容和模板目錄,把他們渲染到完全的 HTML 網站。可以參照Hugo 官網 搭建自己個人部落格。

下載、安裝 Hugo#

這裡 MAC 用戶和 Windows 用戶的操作是不同的。

  • MAC 用戶

在控制台依次輸入$ brew install hugo、$ hugo version 就可以下載下來了。

  • Windows 用戶
  1. 下載地址:https://github.com/spf13/hugo/releases

根據自己的操作系統,下載對應的安裝包。我的操作系統是 Win10 64bit, 選擇了hugo_0.69.2_Windows-64bit.zip

  1. 解壓後只需要把文件夾中 hugo.exe 文件單獨拿出來,放到你預先建立的文件夾裡,如你在 D 盤的 software 文件夾中建了一個名為 hugo 的文件夾,則你最後得到的地址為 D:\Software\hugo\hugo.exe

  2. 把 D:\Software\hugo\ 加到環境變量的 PATH 中,這一步很關鍵

  3. 重啟終端,運行hugo version查看版本.

完成以上步驟後,打開命令行輸入 hugo help

如果得到如下信息,說明安裝成功。

hugo is the main command, used to build your Hugo site.

Hugo is a Fast and Flexible Static Site Generator
built with love by spf13 and friends in Go.

Complete documentation is available at http://gohugo.io/.

創建一個 Hugo 站點#

新建自己部落格站點,這裡的 Blog 可以改為你自己設的名稱

hugo new site Blog

得到如下提示創建成功的信息

Congratulations! Your new Hugo site is created in E:\blog.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
Choose a theme from https://themes.gohugo.io/, or
create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

進入該目錄,可以看到自動生成了 5 個目錄和一個配置文件 config.toml

|-- archetypes
|-- content   #存放內容的目錄
|-- data      
|-- layouts   
|-- static    #存放靜態資源(圖片,css,js)
|-- themes    #存放主題
|-- config.toml  #配置文件

添加主題#

添加主題,可以是默認的,也可以是別的主題,這裡演示默認的主題,輸入下面兩行代碼

git init

git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

然後從站點的根目錄更新 git 存儲庫:

git submodule update --remote --merge

然後把默認主題名稱添加到配置中,打開 config.toml 文件進行修改.

新建文章內容#

新建一個 markdown 文件,完成部落格內容

切換到該目錄下,然後輸入如下命令,會在 content 的目錄下創建 post 目錄,在 post 目錄下創建名為 test.md 的文件。

cd blog

hugo new post/test.md

這個時候默認在 posts 文件夾下生成了你的第一個部落格,現在修改標題,draft 改為 true,內容可以隨意編輯,比如

---
  title: "Hello world!"
  date: 2020-03-16T11:47:15+08:00
  draft: true
 ---
 ## 大家好
 
  這是我的部落格,希望能寫一些好的文章分享給大家~~~

接著輸入如下代碼,可以預覽你的部落格

hugo server -D

建立靜態頁面,這裡會生成一個 public 目錄,這個目錄實際上就是一個網站,我們只需輸入如下代碼

hugo -D

把最新的 public 目錄上傳到倉庫(GitHub,Coding,碼雲)

好了這樣就大功告成 🎉🎉🎉

這是我自己搭建好的部落格網站:chenyyds.com

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。