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
