利用VS Code在Azure上構建部署靜態頁面

時間 2020-06-29

原文原文鏈接

0x00 前言

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

而後，我認爲如今是時候爲本身創建一個漂亮的我的網站了。我是Azure的新手，所以本文只是記錄在Azure上創建個人我的網站的過程以及遇到的問題。我但願能幫助有一樣需求的人。github

0x01 在本地運行 Hugo 網站

在咱們將靜態頁面託管到雲上以前，最好先在本地運行它們。首先，讓咱們獲取Hugo。我使用macOS來運行Hugo。所以，使用homebrew安裝hugo將很是方便。編程

brew install hugo

hugo安裝完成後，咱們就能夠在終端中使用hugo命令了。例如，咱們可使用hugo version打印出已安裝的hugo版本。瀏覽器

而建立hugo網站也變得很是簡單，只需執行hugo new site命令便可。markdown

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

如今，讓咱們嘗試在本地運行該網站。post

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文件夾，是的，全部帖子都在此文件夾中。