利用VS Code在Azure上構(gòu)建部署靜態(tài)頁面

時(shí)間：2023-05-29 08:51:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-05-29 08:51:01 來源：網(wǎng)站運(yùn)營(yíng)

利用VS Code在Azure上構(gòu)建部署靜態(tài)頁面：

0x00 前言

前一段時(shí)間，我找到了Jendrik Illner的個(gè)人網(wǎng)站。除了那里的精彩文章，網(wǎng)站的主題也吸引了我的注意力，而且我發(fā)現(xiàn)該網(wǎng)站的主題采用了Hugo的Academic主題。

然后，我認(rèn)為現(xiàn)在是時(shí)候?yàn)樽约航⒁粋€(gè)漂亮的個(gè)人網(wǎng)站了。我是Azure的新手，因此本文只是記錄在Azure上建立我的個(gè)人網(wǎng)站的過程以及遇到的問題。我希望能幫助有同樣需求的人。

0x01 在本地運(yùn)行 Hugo 網(wǎng)站

在我們將靜態(tài)頁面托管到云上之前，最好先在本地運(yùn)行它們。首先，讓我們獲取Hugo。我使用macOS來運(yùn)行Hugo。因此，使用homebrew安裝hugo將非常方便。

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

而創(chuàng)建hugo網(wǎng)站也變得非常簡(jiǎn)單，只需執(zhí)行hugo new site命令即可。

hugo new site hugoInit這將創(chuàng)建一個(gè)名為hugoInit的文件夾，其中包含工程文件。

然后，我們可以進(jìn)入剛剛創(chuàng)建的新文件夾，在添加新頁面并且在本地運(yùn)行之前，我們可以下載一個(gè)Hugo的主題。

git initgit submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/anankeecho 'theme = "ananke"' >> config.toml現(xiàn)在，讓我們嘗試在本地運(yùn)行該網(wǎng)站。

hugo serve這樣，我們就在本地運(yùn)行了一個(gè)使用ananke主題的網(wǎng)站，在瀏覽器中訪問http://localhost:1313/即可。

至于將新頁面添加到我們的網(wǎng)站，只需執(zhí)行以下命令。

hugo new posts/page.md默認(rèn)情況下，hugo serve命令運(yùn)行網(wǎng)站時(shí)，將不會(huì)顯示文章的草稿。如果需要在本地運(yùn)行并且查看草稿，只需添加一個(gè)-D參數(shù)給hugo serve命令。

關(guān)于Hugo的命令，可以在Hugo主頁上找到更多信息：

接下來，我們將介紹Academic theme。老實(shí)說，我認(rèn)為這個(gè)主題就是我想要的。模塊化架構(gòu)，易于組合各種widgets，對(duì)markdown的友好支持，并且這個(gè)主題很簡(jiǎn)潔。

它的代碼托管在github上，因此我們需要從github下載該項(xiàng)目：

git clone https://github.com/sourcethemes/academic-kickstart.git My_Website然后初始化工程：

cd My_Websitegit submodule update --init --recursive初始化主題項(xiàng)目后，我們就在本地獲取了Academic主題。因?yàn)檫@是一個(gè)Hugo的主題，所以我們可以像上面一樣運(yùn)行它。

hugo serve這樣，我們就在本地運(yùn)行了一個(gè)使用Academic主題的網(wǎng)站，同樣在瀏覽器中訪問http://localhost:1313/即可。

現(xiàn)在，讓我們修改項(xiàng)目以構(gòu)建我們自己的網(wǎng)站。使用VS Code打開該項(xiàng)目，有兩個(gè)文件夾值得我們注意。它們是config文件夾和content文件夾。

在config文件夾中，你可以找到config.toml文件，該文件是Academic的配置文件，使用的是TOML語法。例如，你可以將網(wǎng)站標(biāo)題從默認(rèn)值“Academic”修改為所需的名稱。

另一個(gè)有用的文件是params.toml文件。 你可以選擇配色主題，字體大小以及是否允許用戶在日夜模式之間進(jìn)行切換等。

至于content文件夾，顧名思義，該文件夾包含網(wǎng)站的內(nèi)容。例如，我們可以修改author文件夾中的_index.md文件以顯示自己的信息。 也可以通過修改home文件夾中的文件來添加/刪除網(wǎng)站的窗口小部件。 例如如果不希望在網(wǎng)站中顯示“項(xiàng)目”組件，則可以將projects.md文件中的active值更改為false。 同樣，在這里你也可以找到posts文件夾，是的，所有帖子都在此文件夾中。

0x02 將 Hugo 網(wǎng)站部署到Azure

修改好網(wǎng)站的內(nèi)容之后，是時(shí)候向真實(shí)世界展示這個(gè)網(wǎng)站了。

這次我從VS Code將網(wǎng)站部署到Azure。但是首先，當(dāng)然需要一個(gè)Azure的訂閱和VS Code了。然后我們需要安裝azure storage extension，你可以在VS Code Extension市場(chǎng)中找到它。

安裝了Azure存儲(chǔ)擴(kuò)展后，我們可以從VS Code登錄到Azure，并在STORAGE項(xiàng)目下找到我們的訂閱。

現(xiàn)在，我們需要?jiǎng)?chuàng)建一個(gè)存儲(chǔ)帳戶來托管我們的網(wǎng)站。 這里只需右鍵單擊我們的訂閱，然后選擇“Create Storage Account”。存儲(chǔ)帳戶完成后，右鍵單擊該帳戶，然后選擇“Configure Static Website”。

創(chuàng)建Azure存儲(chǔ)帳戶后，我們需要將網(wǎng)站文件部署到該存儲(chǔ)帳戶。在VS Code中打開Files explorer，你可以找到一個(gè)名為public的文件夾，這是從工程生成的真實(shí)的網(wǎng)站文件。然后右鍵單擊該文件夾，然后選擇“Deploy to Static Website”。

部署到Azure之后，我們就可以在瀏覽器中來查看我們的網(wǎng)站了。

0x03 總結(jié)

本文簡(jiǎn)要記錄了使用VSCode構(gòu)建網(wǎng)站并將其托管在Azure上的過程。這篇博客是我在2020年的第一篇博客，新年快樂！

---

歡迎大家關(guān)注我的公眾號(hào)"慕容的游戲編程"：chenjd01