利用VS Code在Azure上构建部署静态页面

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