banner
王云子

王云子

此路山高路远....
twitter
telegram
github

我的博客搭建歷程——hugo

繼 hexo 搭建博客之後,完成 hugo 搭建博客就相對簡單多了,因為 hugo 博客的搭建環境和 hexo 博客搭建環境是一樣的,而且兩個博客的部署都是一樣的只需要記住一些簡單常用的命令即可。

如果非要我選擇一個博客來當自己的主站使用的話,我應該會選 hugo 博客,但是對於我來說,hugo 博客的致命打擊就是主題好看的太少了,吸引我的是他的速度,我前面搭建的 hugo 博客速度真的是非常快,hexo 博客也有他的缺點,比如我這個博客最大的缺點就是 css 和圖片渲染太慢了,打開我的博客第一眼看到的就是我的白板,極其影響瀏覽博客的觀感,而且一些 icon 有時候也會比較慢,我剛開始時以為是我用阿里雲圖床慢的原因,後來發現其實這就是 hexo 博客的缺點。

話不多說了,直接上步驟吧!

安裝 CHOCOLATEY#

其實我也不知道這是什麼東西,可以去官網瀏覽了解,我當時是稀里糊塗的安裝的,因為後面安裝 hugo 需要,官網上寫了兩種安裝方式,我不知到這兩種有啥區別,我選擇簡單的一種,打開終端輸入

( Install with cmd.exe):

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "[System.Net.ServicePointManager]::SecurityProtocol = 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

安裝 hugo#

還是老規矩,自己去官網瀏覽,這裡我們選擇用到前面的 **Chocolatey (Windows)** 安裝,這裡也可以用兩種方式安裝,分別是:

choco install hugo -confirm

and

choco install hugo-extended -confirm

這裡博主強烈建議安裝第二種方案,因為剛開始我比較隨意選擇安裝了第一種,後面開始上傳博客的時候就出現問題了,就會出現你缺少hugo-ectended,沒錯,就是第二種,後來我安裝第二種之後才解決連這個問題。

安裝之後建議檢查一下版本,看看安裝成功沒,輸入代碼:

hugo version

就會出現下面:

image-20220528173536193

這裡注意和 hexo 檢查版本的代碼不一樣。

建立博客#

為博客創建本地專案:

hugo new site blog-name

進入博客:

cd blog-name

生成靜態文件 public

hugo

更換主題#

由於前面我說過 hexo 主題我很難找到自己喜歡的,但是我認為有幾個主題不錯,分別是:

ghcard Ice-Hazymoon/hugo-theme-lunaghcard reuixiy/hugo-theme-meme

自己選擇喜歡的去更換即可。

發布文章#

新建文章

hugo new post/我的第一篇文章.md

本地預覽

hugo sever -D

文章根目錄下生成靜態文章:

hugo

進入public文件夾

cd public

接著輸入以下代碼:

git add . 
git commit -m 'first commit' 
git push -u origin master

引用圖片#

一般博客文章引用圖片都是需要相對路徑,在 hugo 博客裡面的數據都是放在static目錄下的,所以我們需要將圖片放置在這個文件夾下面,步驟如下:

1. 在文章目錄下,hugo 博客一般都是D:\Blog\wangyunzi\content\posts這樣的目錄下面的,然後新建專門放文件圖片的文件夾;

2. 寫文章時本來需要引用這個文件夾的圖片的相對路徑,比如![](images/blog.jpg),我們需要將它改為![](/images/blog.jpg), 這樣後面才會圖片不會出錯;

3. 最後將這些你引用過的文章轉移到static文件夾下面。

最後經過我實踐之後發現上面的步驟有點臃腫,固將步驟更改為下:

1.static目錄下直接新建放置圖片的文件夾比如說D:\Blog\wangyunzi\static\imgs, 要用的圖片直接放進去;

2. 引用圖片的時候直接按照![](/imgs/blog.jpg)這樣的格式寫就可以了。

總結#

最後關於圖片的使用其實一般有兩種方式,一種就是上面的直接使用本地圖片上傳,還有就是會使用圖床。在剛開始接觸博客的時候我一直堅信本地上傳圖片是最好的,因為圖床不僅折騰起來有點麻煩,最重要的是需要花費 money,這對一個貧窮的大學生無疑是一個不小的打擊。但是在後面的接觸中,我慢慢 “真香” 了,圖床使用起來確實方便了許多,而且移動性比較方便,有時候引用速度比本都引用還要快一點。目前我使用的是阿里雲儲存 oss 當做圖床,感覺還不錯,沒有太大的問題。但是可能是我比較放肆的緣故,今天阿里雲突然發給我一個餘量預警,猶如一個晴天霹靂,因為一元錢優惠買的 40G 儲存才幾天時間幾乎就被我花光了,太難了,以後還是悠著點用吧。

image

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