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

利用VS Code在Azure上构建部署静态页面的更多相关文章

  1. 从Azure上构建Windows应用程序映像

    从Azure上构建windows应用程序映像同构建Linux应用程序映像总体流程比较类似,可以参考上图Linux映像的制作发布等流程,具体细节又有所差别. 具体步骤如下: 从Azure管理平台上申请W ...

  2. 在CentOS 上搭建nginx来部署静态页面网站

    在centOs 上搭建nginx来部署静态页面网站 一.部署服务器环境 nginx:轻量级.高性能的HTTP及反向代理服务器,占用内存少,并发能力强,相比老牌的apache作为web服务器,性能更加卓 ...

  3. 使用 Nginx 部署静态页面

    Nginx 介绍 Nginx 是俄罗斯人编写的十分轻量级的 HTTP 服务器, Nginx,它的发音为「engine X」,是一个高性能的 HTTP 和反向代理服务器,同时也是一个 IMAP/ POP ...

  4. node部署静态页面;node上线静态页面

    node部署静态页面上线 静态页面上线可以采用 nginx, tomcat或者node ,我们这里介绍下node部署静态页面 这里采用最简单的上线方式,我们就不用node + express + ej ...

  5. Apache 后台服务器(主要处理php及一些功能请求 如:中文url)   Nginx 前端服务器(利用它占用系统资源少得优势来处理静态页面大量请求)   Lighttpd 图片服务器   总体来说,随着nginx功能得完善将使他成为今后web server得主流。

    Apache 后台服务器(主要处理php及一些功能请求 如:中文url) Nginx 前端服务器(利用它占用系统资源少得优势来处理静态页面大量请求) Lighttpd 图片服务器 总体来说,随着ngi ...

  6. Azure 项目构建 – 部署高可用的 Python Web 应用

    Python 以其优美,清晰,简单的特性在全世界广泛流行,成为最主流的编程语言之一.Azure 平台针对 Python 提供了非常完备的支持.本项目中,您将了解如何构造和部署基于 Azure Web ...

  7. azure上连续部署web

    连续部署web   连续部署web,可以在第一次部署完web应用后,方便修改和自动提交代码部署新版本的web应用.其中自动提交使用github中的webhook,使代码在master上提交修改后可以自 ...

  8. NetScaler VPX在Azure上的部署(一)

    本文将介绍NetScaler的VPX部署在Azure China上.包括如何通过vhd文件上传.创建虚拟机,以及如何部署VPX. 一.首先将VHD文件解压,放到目录D:\Azure中.VHD文件的获得 ...

  9. Azure 项目构建 – 托管静态网站

    本课程主要介绍了如何在 Azure 平台上快速构建和部署基于 Azure Web 应用的静态托管网站, 实践讲解如何使用 Azure 门户创建 Web 应用, 部署静态网站源代码,设置自定义域名等. ...

随机推荐

  1. 三分钟网络基础-ARP协议

    什么是 ARP 协议 地址解析协议 ARP (Address Resolution Protocal):在同一局域网下,根据已知道的主机或路由器的 IP 地址,找出其相应的硬件地址. 高速缓存 每一个 ...

  2. path_info和get_full_path()的区别

    1.get_full_path() 获取的url路径包含参数 2.path_info 获取的路径不包含参数 注意:获取的路径都不包含协议 IP 和端口 3.补充 sesssion http://127 ...

  3. 「 从0到1学习微服务SpringCloud 」13 断路器Hystrix

    背景与功能 在微服务架构中,很多情况下,各个服务之间是相互依赖,一个服务可能会调用了好几个其他服务,假设其中有一个服务故障,便会产生级联故障,最终导致整个系统崩溃无法使用(这称为雪崩效应),Sprin ...

  4. LightningChartJS网页图表代码示例--Lineseries线性图

    下面的代码给出了lightningchart JS一个基本线性图的使用范例.线性图在笛卡尔坐标上绘制,表现两个变量之间的关系.直线段连接成数据点,线性图将信息作为这些数据点显示出来.一般用来显示数据变 ...

  5. 请求参content-type的值为json,返回报错的解决方法

    如上图,请求后报参数错误 原因content-type的值为json requests.post左侧的data要改为json 即r = requests.post(url, json=data, he ...

  6. jmeter使用—远程分布式

    今天要说的是在远程服务器上使用多台服务器进行noGUI分布式使用jmeter压测. 1.首先准备几台服务器,服务器上都需要安装同一个版本的jmeter. 2.在服务器上启动jmeter的方式是在jme ...

  7. 一次完整的OCR实践记录

    一.任务介绍 这次的任务是对两百余张图片里面特定的编号进行识别,涉及保密的原因,这里就不能粘贴出具体的图片了,下面粘贴出一张类似需要识别的图片. 假如说我的数据源如上图所示,那么我需要做的工作就是将上 ...

  8. equals()和hashCode()使用总结

    equals()和hashCode()使用总结 equals() Object类中的equals方法和"=="是一样的,没有区别,即俩个对象的比较是比较他们的栈内存中存储的内存地址 ...

  9. 三句话搞定FireDAC连接池

    form上拖入: FDManager1: TFDManager; FDConnection1: TFDConnection; //初始化连接池procedure TForm1.InitDBPool;b ...

  10. python基础[1]——python运算符&python数据类型之数值型

    python常用运算符&数字&布尔值 上节回顾 一.变量名和标识符 变量名的命名规范 (1)只能包含数字,字母和下划线 (2)只能以字母和下划线开头(不能以数字开头) (3)标识符是区 ...