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選項:
這裏注意Owner
與Repository 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:這是我第一次寫博客,可能有很多表達不清或者錯誤等,歡迎各位提出問題或者留言告訴我。
未經同意不得轉載。
覺得對你有幫助的話可以點個贊或收藏,謝謝。