什麼？5分鐘就能做出一個自己的部落格

效果展示

https://blog.lijiext.vercel.app/

前期準備

1. github賬號
2. vercel賬號
3. git客戶端
4. Visual Studio Code

步驟

1. 配置Hugo

首先需要下載Hugo，這裡大部分人使用的是64位Windows系統，我將下載Hugo的64位Windows版本。開啟：https://github.com/gohugoio/hugo/releases，找到最新的Releases的附件部分，點選下載適合自己的版本

下載完成後，將檔案解壓得到如下檔案：

在這裡我將此檔案複製到D盤的hugo資料夾下（我的軟體一般都安裝在D盤）完成後如圖所示：

下面需要配置系統環境變數，以便讓hugo程式能夠在系統任意位置執行：



配置好環境變數之後驗證一下：
Win+R 輸入cmd開啟命令提示符輸入hugo version，出現如下內容說明安裝成功

2. 生成網站

在自己想要儲存部落格的位置開啟命令列工具，輸入hugo new site myblog，myblog即為資料夾的名稱

下面用Visual Studio Code開啟剛剛新建的資料夾：

使用git init初始化git倉庫：

新增自己喜歡的主題：git submodule add https://github.com/varkai/hugo-theme-zozo.git themes/zozo
我這裡使用的是zozo，在https://themes.gohugo.io/可以找到更多好看的主題：

下面需要在配置檔案config.toml新增一行theme = "zozo"：

下面需要新增一篇文章，在命令列即Terminal中執行如下命令：

hugo new posts/10001.md

現在我們可以在content/posts下的10001.md檔案中開始使用markdown編寫我們的部落格了：

文章寫完後儲存，然後在Terminal中執行：

hugo server -D -w -p 80 --disableFastRender

下面我們將能夠在本地的80埠訪問剛剛生成的網站：


到現在，網站可以在本地執行了，下面我們需要將我們的部落格託管線上上，這裡使用github+vercel作為託管平臺：

• 新建一個github倉庫
  
• 將本地檔案上傳到該git倉庫

git add *
git commit -m "add 10001.md"
git remote add origin https://github.com/lijiext/blog.git
git branch -M main
git push -u origin main

• 部署網站
  在https://vercel.com/dashboard上New Project：
  
  一步步來然後選擇：
  
  請注意，當部署完成後，會顯示完成頁面：
  
  但是需要注意圖中的預覽圖和我們本地的網站並不一樣，這是由於網站的資原始檔無法找到所致，因為vercel在部署網站時會給我們隨機分配域名，所以我們需要手動配置一下站點的URL：
  在專案的overview頁面可以看到分配的隨機域名：
  
  複製它，更改config.toml檔案的baseURL為隨機域名：
  

然後再次提交，等待半分鐘後網站就會重新部署，此時在瀏覽器中訪問域名就會正常了：

git add *
git commit -m "change baseURL"
git push

結果展示

下面就是我們剛剛弄好的部落格了：