使用 Netlify 和 AnyMod 构建快速静态网站

大约 10 分钟内，我们将建立一个工作流程，使静态网站变得非常简单。

您将获得以下内容

免费 https
免费或低价托管
快速构建网站
使用实时重新加载进行编辑
在 6 个月后忘记一切内容时进行编辑

开始：注册

我们可以通过使用 Netlify（非常简单的静态托管）以及 AnyMod（数百个网站部分）来实现所有这些。

设置部署管道

我们将创建一个基本的 HTML 文件，使用 GitHub 进行跟踪，然后使用 Netlify 自动部署。

（如果您更喜欢手动设置，可以跳过此步骤，而是通过拖放至 Netlify 文件夹来部署到 Netlify。）

1. 在 GitHub 中创建一个空仓库。

转到 https://github.com/new 并将其命名为 netlify-anymod

2. 将 Netlify 连接到您的仓库。

您将从 Netlify 开始屏幕执行此操作。

3. 在您的计算机上创建一个文件夹，并添加一个名为 index.html 的文件。

您可以在终端中运行以下命令来执行此操作

mkdir netlify-anymod
cd netlify-anymod
touch index.html

现在编辑 index.html 文件以添加一些基本的 HTML 结构

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Netlify & AnyMod | CSS Tricks</title>
  </head>

  <body>
    Hello, World!
  </body>
</html>

4. 使用 git 进行跟踪并部署到 GitHub

git init
git remote add origin https://github.com/tyrw/netlify-anymod.git
git add -A
git commit -m "Initial commit"
git push --set-upstream origin master

注意：使用您自己的仓库 URL 替换 git remote add origin。

大约一分钟后检查您的 Netlify URL，您的网站应该已上线！

添加“模块”部分

现在我们已经设置了部署，我们可以构建页面本身。我们将使用 AnyMod 上现成的模块（“mods”）来完成此操作。

有很多可供选择，但我们将使用编辑主题中的模块

克隆并添加模块

通过点击每个模块的“克隆”，然后向下滚动并复制/粘贴安装代码到 index.html 文件中来添加这些模块。还要将您的项目脚本复制并粘贴到顶部。

您的 index.html 现在应该如下所示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Netlify & AnyMod | CSS Tricks</title>

    <!-- AnyMod -->
    <script id="AnyMod-script">
      (function (m,o,d,u,l,a,r,i,z,e) {
        u[m]={Project:o,rq:[],Opts:r,ready:function(j){u[m].rq.push(j)}};function j(s){return encodeURIComponent(btoa(s))};z=l.getElementById(m+'-'+a);r=u.location;
        e=[d+'/page/'+o+'/'+j(r.pathname)+'/'+j(r.host)+'?t='+Date.now(),d];e.map(function(w){i=l.createElement(a);i.defer=1;i.src=w;z.parentNode.insertBefore(i,z);});
      })('AnyMod','82PEPN','https://cdn.anymod.com/v2',window,document,'script',{ toolkit: true, tips: true, priority: 3 });
    </script>
    <!-- /AnyMod -->
  </head>
  <body>
    <!-- Professional side nav -->
    <div id="anymod-mlrnbm"></div>

    <!-- Intro section -->
    <div id="anymod-ormard"></div>

    <!-- Contact form -->
    <div id="anymod-ralmam"></div>

    <!-- Card section -->
    <div id="anymod-balmaa"></div>
  </body>
</html>

页面已准备就绪。

现在保存并推送到 GitHub 以部署网站

git add -A
git commit -m "Added mods"
git push origin

等待一分钟，您的网站应该可以使用了。这是演示页面。

查看演示

编辑内容

现在您可以实时编辑每个模块的内容和代码。当查看您自己的页面（同时也登录到 AnyMod）时，您会在右侧看到一支铅笔

点击铅笔并选择一个模块。现在尝试对内容（或代码）进行一些编辑，并注意它会在页面上实时自动更新。

您可以使用此方法立即进行编辑，或者在 6 个月后忘记了项目设置方式时进行编辑。

表单

表单也会自动工作。尝试在您自己的页面上提交一条消息；回复将立即通过电子邮件发送给您。

结论

您现在有了一种构建快速、可靠、安全的静态网站的好方法。

请记住：能力越大，责任越大。