記——搭建hugo+github靜態博客

Hugo+Github--->個人博客

本文章記錄了我在B站上看到CodeSheep(一個大佬Up主)的視頻,並按照視頻的教程一步步搭建Hugo靜態博客。

一、運行環境:

*Win10+Git

二、Hugo是什麼?官網鏈接

Hugo是由Go語言實現的靜態網站生成器。簡單、易用、高效、易擴展、快速部署。
Hugo還提供有Hugo中文文檔,文檔裏面也有介紹如何安裝Hugo到將個人站點部署到Github倉庫上。

三、開始搭建

Step 1:下載和安裝Hugo

①:進入Hugo的github倉庫[下載]對應自己電腦的版本;[3]
圖片描述

②:下載完之後,把解壓包解壓,裏面有一個hugo.exe文件。然後在磁盤(F:)下創建Hugo文件夾,裏面再創建bin文件夾和Sites文件夾。
把hugo.exe複製到bin文件夾目錄下,最後把F:Hugobin路徑配置到系統的環境變量Path中,保存即可。


Step 2:創建站點

Window環境下以管理員身份運行命令提示符,切換到站點目錄下(F:HugoSites)
接下來輸入命令hugo new site myblog創建名爲myblog的博客站點。
創建完成後會多出一個文件夾myblog,裏面有很多子文件夾(content,themes等等)。


Step 3:選擇主題

①:進入Hugo主題官網,選擇自己喜歡的bolg主題風格,選好之後一般都有安裝方法介紹。例如:圖片描述
根據網站給出的代碼,拷貝,再把拷貝的代碼git clone https://github.com/sourcethemes/academic-kickstart.git My_Website輸入,這一步的前提是一定要先安裝Git工具;
②:預覽
待主題安裝成功後,輸入hugo server -t 主題名稱 --buildDrafts,按回車鍵,會出現如下打碼:圖片描述
其中化黃線的鏈接就是在本機預覽的鏈接,打開便可以看到個人博客添加主題後的樣子。


Step 4:第一篇博客

①:回到myblog根目錄:輸入命令hugo new post\myblog.md即可新建一個後綴是md的文件,用來寫博客的內容。
一般用vim命令,vs code可以編輯;
②:寫好內容之後,再在本機預覽一遍,輸入預覽命令hugo server -t 主題名稱 --buildDrafts,打開鏈接即可預覽;
預覽成功後,接下來便是把整個站點推到Github倉庫中。


Step 5:新建Github倉庫

圖片描述
在Github主頁選擇New rpository選項:
這裏注意OwnerRepository name儘量要保持一致,並在後面加上.github.io
圖片描述
完成以上步驟後按Create repository按鈕即可創建一個倉庫。
接下來就是把站點掛載到剛剛新建的倉庫中


Step 6:部署到Github

①:關聯你的Github:輸入hugo --theme=主題名稱 --baseUrl="https://xxx.github.io"(xxx表示你的github..) --buildDrafts
按回車鍵後發現根目錄下多出一個public的文件夾;
②:輸入cd public切換到public目錄下編輯:
一行一行輸入

git init
git add .
git commit -m "簡介"
git remote add origin https://github.com/xxx/xxx.github.io.git 
git push -u origin master

如果第二次上傳需要修改的內容:
在執行git push -u origin master之前先執行git pull origin master
**最後訪問xxxxx.github.io這個網站,便是你的博客。至此靜態博客Hugo完成。

ps:這是我第一次寫博客,可能有很多表達不清或者錯誤等,歡迎各位提出問題或者留言告訴我。

未經同意不得轉載。
覺得對你有幫助的話可以點個贊或收藏,謝謝。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章