個人博客免費搭建（個人博客搭建三）

2023-10-04 15:38:41

Hugo靜態博客搭建之本地搭建

hugo new site test

我們目前只需要關心紅框目錄

content：放博客內容的，後續我們只需要在裡面建立文件，更新即可。

themes：放置hugo主題文件的

config.toml：hugo配置文件

進入主題頁面https://themes.gohugo.io，選擇自己中意的主題，點進去，跟著作者的教程一步步配置。

有些頁面需要nodejs環境，有些需要hugo的extended版本，有些教程還有中文版本（沒有也無妨，右鍵翻譯即可），這些東西作者應該都會說明的。

要是沒有說明的話，你換個主題吧，你倆無緣。

主題可是自己的門面擔當，自然得挑三揀四、貨比三家啦，自己都在主題上糾結了三天之久，最終選擇了這個https://themes.gohugo.io/themes/hugo-theme-dream，所以後面的教程以這個主題為主。

主題作者一般都會更新主題，修改bug，優化頁面，使用新技術等等等，所以我們安裝的時候選擇用git的submodule安裝，方便後續更新主題。

在之前的小黑窗中依次輸入以下命令即可在把主題下載至theme目錄下。

PS:若小黑窗關閉了，可以再Sites目錄下繼續右鍵打開（或者test目錄打開，第一行命令就不要了）。

cd testgit initgit submodule add https://github.com/g1eny0ung/hugo-theme-dream.git themes/dream

都成功之後你的themes目錄下就會有一個dream的文件夾

每個主題下載下來之後，都會有一個exampleSite文件夾，去裡面把config.toml文件複製到test目錄下替換掉。

打開進去查看一下配置，這裡我是用vscode打開的，你可以用記事本打開，我們看到主題文件那裡錯了。

我們的目錄是dream，它寫的是hugo-theme-dream，我們把它改掉，其他的配置可以看教程來設置。

#號表示代碼被注釋掉了，我們需要這些屬性的話可以把#號去掉，比如我把backgroundImage這個屬性去掉了，這是配置博客背景的，我放了自己的圖片進去。

配置好之後ctrl s保存下。我的配置如下：網頁背景跟頭像連結可以用自己的。

其實上面咱們的博客已經配好了，心急的朋友可以在小黑窗中輸入下面命令回車即可查看自己的博客了。

hugo server -D

看到下面框起來的就是你的博客訪問地址，你可以複製到瀏覽器地址欄打開，或者直接按住ctrl鍵點擊打開。

然後你會發現除了博客啥都有了，如下圖。

新建博客也簡單，一行命令搞定，posts是生成的目錄，first.md是你新建的文件。

hugo new posts/first.md

PS：Hugo博客用的都是md文件。md 就是基於markdown語法的文件，只能說，超強大，類似於網際網路中的毛爺爺，都支持它，有了它，word文檔都沒有點開過。

不懂別急，後面會介紹工具使用它，你就不用去記它的語法了。

去小黑窗，先ctrl c把博客停了，然後輸入命令，之後去content目錄下找到並且打開它。我還是用vscode，你可以用記事本或其他編輯器打開它。

下面是各屬性解釋：

我這裡改了標題，頭像你們需要可以把#號去掉，封面不要的話太醜了，網上找張圖片，右鍵複製圖片連結放進去即可。

類別，標籤，自己設置，最後解釋下draft屬性，一般我們把它設置成false，或者直接刪掉，因為我們後續會把它放入網上，這個屬性為true的話，hugo不會渲染出來的。

下面是我的截圖：

看教程，還應加一個關於頁面，就是頁面翻轉過後的頁面，篇幅原因，這裡就不加了，你們自己看教程去加吧

最後輸入hugo server -D，啟動Hugo，查看自己的博客，你可以在posts目錄下多複製幾個first.md，這樣就能知道你以後文章多了之後的效果了。

點擊進去就能看到我們的博客內容了，以後要新增文章，執行hugo new *** 命令即可。

至此個人博客就搭建完畢了，當然只是本地搭建完畢了，要讓別人訪問請移步下一篇教程。

PS：博客只是輔助，我們的文章才是我們要關注的重點。沒有上線之前，可以把內容更新起來。