0x00 前言

前一段時間，我找到了Jendrik Illner的個人網站。除了那裡的精彩文章，網站的主題也吸引了我的注意力，而且我發現該網站的主題採用了Hugo的Academic主題。

然後，我認為現在是時候為自己建立一個漂亮的個人網站了。我是Azure的新手，因此本文只是記錄在Azure上建立我的個人網站的過程以及遇到的問題。我希望能幫助有同樣需求的人。

0x01 在本地執行 Hugo 網站

在我們將靜態頁面託管到雲上之前，最好先在本地執行它們。首先，讓我們獲取Hugo。我使用macOS來執行Hugo。因此，使用homebrew安裝hugo將非常方便。

brew install hugo

hugo安裝完成後，我們就可以在終端中使用hugo命令了。例如，我們可以使用hugo version打印出已安裝的hugo版本。

而建立hugo網站也變得非常簡單，只需執行hugo new site命令即可。

hugo new site hugoInit

這將建立一個名為hugoInit的資料夾，其中包含工程檔案。

然後，我們可以進入剛剛建立的新資料夾，在新增新頁面並且在本地執行之前，我們可以下載一個Hugo的主題。

git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml

現在，讓我們嘗試在本地執行該網站。

hugo serve

這樣，我們就在本地運行了一個使用ananke主題的網站，在瀏覽器中訪問http://localhost:1313/即可。

至於將新頁面新增到我們的網站，只需執行以下命令。

hugo new posts/page.md

預設情況下，hugo serve命令執行網站時，將不會顯示文章的草稿。如果需要在本地執行並且檢視草稿，只需新增一個-D引數給hugo serve命令。

關於Hugo的命令，可以在Hugo主頁上找到更多資訊：

 

https://gohugo.io/getting-started/installing/

接下來，我們將介紹Academic theme。老實說，我認為這個主題就是我想要的。模組化架構，易於組合各種widgets，對markdown的友好支援，並且這個主題很簡潔。

它的程式碼託管在github上，因此我們需要從github下載該專案：

git clone https://github.com/sourcethemes/academic-kickstart.git My_Website

然後初始化工程：

cd My_Website
git submodule update --init --recursive

初始化主題專案後，我們就在本地獲取了Academic主題。因為這是一個Hugo的主題，所以我們可以像上面一樣執行它。

hugo serve

這樣，我們就在本地運行了一個使用Academic主題的網站，同樣在瀏覽器中訪問http://localhost:1313/即可。

現在，讓我們修改專案以構建我們自己的網站。使用VS Code開啟該專案，有兩個資料夾值得我們注意。它們是config資料夾和content資料夾。

在config資料夾中，你可以找到config.toml檔案，該檔案是Academic的配置檔案，使用的是TOML語法。例如，你可以將網站標題從預設值“Academic”修改為所需的名稱。

另一個有用的檔案是params.toml檔案。 你可以選擇配色主題，字型大小以及是否允許使用者在日夜模式之間進行切換等。

至於content資料夾，顧名思義，該資料夾包含網站的內容。例如，我們可以修改author資料夾中的_index.md檔案以顯示自己的資訊。 也可以通過修改home資料夾中的檔案來新增/刪除網站的視窗小部件。 例如如果不希望在網站中顯示“專案”元件，則可以將projects.md檔案中的active值更改為false。 同樣，在這裡你也可以找到posts資料夾，是的，所有帖子都在此資料夾中。

 

0x02 將 Hugo 網站部署到Azure

修改好網站的內容之後，是時候向真實世界展示這個網站了。

這次我從VS Code將網站部署到Azure。但是首先，當然需要一個Azure的訂閱和VS Code了。然後我們需要安裝azure storage extension，你可以在VS Code Extension市場中找到它。

安裝了Azure儲存擴充套件後，我們可以從VS Code登入到Azure，並在STORAGE專案下找到我們的訂閱。

現在，我們需要建立一個儲存帳戶來託管我們的網站。 這裡只需右鍵單擊我們的訂閱，然後選擇“Create Storage Account”。儲存帳戶完成後，右鍵單擊該帳戶，然後選擇“Configure Static Website”。

建立Azure儲存帳戶後，我們需要將網站檔案部署到該儲存帳戶。在VS Code中開啟Files explorer，你可以找到一個名為public的資料夾，這是從工程生成的真實的網站檔案。然後右鍵單擊該資料夾，然後選擇“Deploy to Static Website”。

部署到Azure之後，我們就可以在瀏覽器中來檢視我們的網站了。

 

 

0x03 總結

本文簡要記錄了使用VSCode構建網站並將其託管在Azure上的過程。

---

https://docs.microsoft.com/zh-cn/learn/?WT.mc_id=DT-MVP-5001664

歡迎大家關注我的公眾號"慕容的遊戲程式設計"：chenjd01

相關推薦