wordpress做cms_超越WordPress for CMS

wordpress做cms

Over the past 15 years, WordPress has had a great run. Unfortunately, its age has started to show, with newer technologies enabling faster, cheaper, more secure, and all around easier to use content management.

在过去的15年中，WordPress表现出色。 不幸的是，它的时代已经开始显现，新技术可以实现更快，更便宜，更安全以及更易于使用的内容管理。

In this tutorial, we'll build a web page with a modular, embedded CMS that is 10x faster, 10x cheaper, more secure, and has better editing tools than a standard WordPress install, and it works with any website. Sounds awesome, right? Let's get started.

在本教程中，我们将使用模块化嵌入式CMS构建一个网页，该模块化CMS的速度比标准WordPress安装快10倍，便宜10倍，更安全，并且具有更好的编辑工具 ，并且可与任何网站兼容 。 听起来很棒，对吗？ 让我们开始吧。

建立 ( Setup )

We'll use several state of the art tools that are either free or inexpensive in order to build our WordPress replacement page. We have a few important things to consider:

我们将使用免费或廉价的几种最先进的工具来构建我们的WordPress替换页面。 我们有几件重要的事情要考虑：

• Hosting - We'll host our website on Amazon Web Services because it has a free tier and it's extremely secure and reliable. We'll only be hosting static files, so it will be very inexpensive and easy to scale (when we go viral!)
  托管 -我们将在Amazon Web Services上托管我们的网站，因为它具有免费层并且非常安全可靠。 我们将只托管静态文件，因此它将非常便宜且易于扩展（当我们病毒式传播时！）
• Themes - There are many places where you can get quality themes for free or very cheap. We'll use Templated because it has almost 1,000 free themes, and if you want to look around, there are many other places you can try such as ThemeForest, Bootswatch, Template Monster, and more.
  主题 -在很多地方，您可以免费或廉价获得优质主题。 我们将使用Templated，因为它有近1,000个免费主题，如果您想四处看看，还可以尝试其他许多地方，例如ThemeForest，Bootswatch，Template Monster等。
• Content Management - We'll build our CMS with Anymod, which allows us to embed content, images, forms & more anywhere we want and to edit everything live from our own web page. It has a generous free tier and even includes a built in code editor for 100% customization.
  内容管理 -我们将使用Anymod构建CMS，这将使我们可以在所需的任何位置嵌入内容，图像，表单等内容，并可以在自己的网页上实时编辑所有内容。 它具有免费的免费层，甚至包括用于100％定制的内置代码编辑器。

Our goal is to create a web page that loads immediately and is free to host, live-editable, and can't be turned into a spambot or shut down by ransomware the way WordPress can.

我们的目标是创建一个网页，该网页可以立即加载，并且可以免费托管，实时编辑，并且不能像WordPress一样被变成勒索软件或通过勒索软件关闭。

With our tools in hand, we're ready to get started!

有了我们的工具，我们就可以开始了！

1）获取在本地运行的网站模板 ( 1) Get the website template running locally )

We've found a nice-looking theme on Templated called "Phase Shift" which you can view live here.

我们在Templated上找到了一个漂亮的主题“ Phase Shift”，您可以在此处实时查看 。

Working on the template page named "No Sidebar", we'll make the following parts of the page editable with our CMS:

在名为“无边栏”的模板页面上，我们将使用CMS编辑页面的以下部分：

• A content block at the top
  顶部的内容块
• A feature section in the middle
  中间的功能部分
• A form at the bottom
  底部的表格

All three parts will be editable through our CMS, and we'll make the form submit responses to our CMS too so that everything is in one place. But first, let's get the static site running locally.

所有这三个部分都可以通过我们的CMS进行编辑，我们还将使表单也向CMS提交回复，以便所有内容都集中在一个地方。 但是首先，让我们在本地运行静态站点。

Download the template files from Dropbox or GitHub and open the file titled "no-sidebar.html" with your favorite browser (you can right-click the file and choose which application to open it with). It should look like the following:

从Dropbox或GitHub下载模板文件，然后使用您喜欢的浏览器打开名为“ no-sidebar.html”的文件（您可以右键单击该文件，然后选择用于打开该文件的应用程序）。 它应如下所示：

If the page looks different, be sure you have all of the folders (/css, /fonts, /images, /js) downloaded and in the same directory as the html file. Now that we have the site working locally, let's make it editable.

如果页面看起来不同，请确保已下载所有文件夹（/ css，/ fonts，/ images，/ js），并且与html文件位于同一目录中。 现在我们已经在本地工作该网站，让我们使其可编辑。

Go ahead and open the "no-sidebar.html" file in a text editor too. It should now be open in your text editor and in your browser.

继续并在文本编辑器中打开“ no-sidebar.html”文件。 现在应该在您的文本编辑器和浏览器中将其打开。

2）使静态内容块可编辑 ( 2) Make the static content block editable )

For the CMS portion of our site, we'll use Anymod. In a new tab, visit https://anymod.com and create a free account & sign in. Your dashboard should look something like this:

对于我们网站的CMS部分，我们将使用Anymod 。 在新标签页中，访问https://anymod.com并创建一个免费帐户并登录。您的仪表板应如下所示：

Let's create an editable content block for our page. Click the "Content block" button on left side to create an editable content section. Doing so will take you to a page where you can edit or install the section.

让我们为页面创建一个可编辑的内容块。 单击左侧的“内容块”按钮以创建可编辑的内容部分。 这样做将带您进入一个页面，您可以在其中编辑或安装该部分。

From here, click the "Install" button so that we can install it on our web page.

从此处单击“安装”按钮，以便我们可以将其安装在我们的网页上。

To install, we just need to copy and paste the section code into our HTML file. Copy the section tag and the script together, and paste the section tag

要安装，我们只需要将部分代码复制并粘贴到我们HTML文件中即可。 将section标签和脚本一起复制，然后粘贴section标签

<section id=anymod-oadmb></section>

on line 41 of "no-sidebar.html", just above the <section> tag with content. Then paste the script tag at the bottom of the page on line 140, just before the other <script> tags.

在“ no-sidebar.html”的第41行中，位于<section>标记上方的内容。 然后将script标记粘贴到页面底部第140行的紧接其他<script>标记之前。

<script project="8PNNP8" src="https://cdn.anymod.com/v1"></script>

Note that if you've created your own account and your own section, you will have a different id= value for the section and a different project= value for the script.

请注意，如果您创建了自己的帐户和部分，则该部分将具有不同的id=值，脚本将具有不同的project=值。

Now save the file and refresh our template web page in the browser. It should look like this:

现在保存文件并在浏览器中刷新模板网页。 它看起来应该像这样：

So just like that, our CMS content is being delivered to our page!

因此，就像这样，我们的CMS内容将被发送到我们的页面！

There should also now be a pencil icon on the right side of our page. This button will appear on the page if we're logged into Anymod, and it lets us make live edits. Click on the pencil icon to show the editable sections on the page.

现在，我们页面的右侧也应该有一个铅笔图标。 如果我们登录到Anymod，此按钮将显示在页面上，它使我们可以进行实时编辑。 单击铅笔图标以显示页面上的可编辑部分。

Now click on our new section to open the editor:

现在单击我们的新部分以打开编辑器：

From here, we can edit the content to say whatever we want. Since we're just trying to mimic the existing template, close the editor by clicking the "X" buttons, then copy the content from our original page (starting with "NO SIDEBAR / Integer sit amet...)", and then re-open the editor and paste this content to replace the "Lorem ipsum…" text and image.

从这里，我们可以编辑内容以说出我们想要的任何内容。 由于我们只是想模仿现有模板，因此请单击“ X”按钮关闭编辑器，然后从原始页面复制内容（从“ NO SIDEBAR / Integer sit amet ...开始”），然后重新-打开编辑器，然后粘贴此内容以替换“ Lorem ipsum…”文本和图像。

Click the "Save" button to save. Then in our "no-sidebar.html" file delete the old static content <section> starting on line 42 so that lines 39-43 of "no-sidebar.html" look like the code below.

点击“保存”按钮进行保存。 然后在我们的“ no-sidebar.html”文件中，从第42行开始删除旧的静态内容<section>以使“ no-sidebar.html”的第39-43行看起来像下面的代码。

<!-- Page -->
<div id="page" class="container">
    <section id=anymod-oadmb></section>
</div>
<!-- /Page -->

Note: if you're following along with your own project, make sure you use your own id= for the section instead of the one used here.

注意：如果您要跟随自己的项目，请确保对本节使用自己的id=而不是此处使用的id= 。

Save the file and reload the web page. Our page should look exactly like it did before, except now our content block is editable. Success!

保存文件并重新加载网页。 我们的页面应该看起来像以前一样，只是现在我们的内容块是可编辑的。 成功！

3）添加自定义栏目 ( 3) Add a custom section )

Now we'll replace the feature section in the middle of the page and make it editable too. Since this section is a custom layout for our template, we'll build a custom section from scratch that will be editable by anyone on our team, even non-technical teammates.

现在，我们将替换页面中间的功能部分，并使它也可编辑。 由于此部分是模板的自定义布局，因此我们将从头开始构建一个自定义部分，该团队的任何人甚至非技术团队成员都可以对其进行编辑。

Back in the Anymod dashboard, click the Anymod logo to get to the dashboard's home page:

返回Anymod仪表板，单击Anymod徽标以转到仪表板的主页：

Click the "Blank section" button on the sidebar to create a blank section that we can build from scratch.

单击侧栏上的“空白部分”按钮，创建一个我们可以从头开始构建的空白部分。

The first thing we'll do is copy the HTML from our template's feature section into Anymod so that we can mimic the content. Click the "Edit" button in Anymod and then click the "Code" toggle at the top to show the code editor:

我们要做的第一件事是将HTML从模板的功能部分复制到Anymod中，以便我们模仿内容。 单击Anymod中的“编辑”按钮，然后单击顶部的“代码”切换以显示代码编辑器：

Let's copy our existing feature section's HTML as a starting point for our new section. In the "no-sidebar.html" file, cut out lines 48-75

让我们复制现有功能部分HTML作为新部分的起点。 在“ no-sidebar.html”文件中，剪掉第48-75行

<div class="row">

  <!-- Content -->
  <div class="6u">
    <section>
      <ul class="style">
        <li class="fa fa-wrench">
          <h3>Integer ultrices</h3>
          <span>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Maecenas condimentum enim tincidunt risus accumsan.</span>
        </li>
        <li class="fa fa-leaf">
          <h3>Aliquam luctus</h3>
          <span>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Maecenas condimentum enim tincidunt risus accumsan.</span>
        </li>
      </ul>
    </section>
  </div>
  <div class="6u">
    <section>
      <ul class="style">
        <li class="fa fa-cogs">
          <h3>Integer ultrices</h3>
          <span>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Maecenas condimentum enim tincidunt risus accumsan.</span>
        </li>
        <li class="fa fa-road">
          <h3>Aliquam luctus</h3>
          <span>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Maecenas condimentum enim tincidunt risus accumsan.</span>
        </li>
      </ul>
    </section>
  </div>
</div>

And paste this code into the HTML section of the Anymod code editor.

并将此代码粘贴到Anymod代码编辑器HTML部分中。

Now our section will deliver the exact same HTML as is on our web page currently. To see this, let's replace our web page's static HTML with the section tag for our new section.

现在，我们的部分将提供与当前网页完全相同HTML。 要看到这一点，让我们用新部分的section标记替换网页的静态HTML。

Click the "Save" button in the code editor on Anymod and then click the "X" to exit the editor. Next, click the "Install" button like we did when installing our first section:

在Anymod上的代码编辑器中单击“保存”按钮，然后单击“ X”退出编辑器。 接下来，像安装第一部分一样单击“安装”按钮：

This time we don't need to copy the <script> tag because we already have it on our web page. We just need to copy the section tag

这次我们不需要复制<script>标记，因为我们已经在网页上将其保存了。 我们只需要复制section标签

<section id=anymod-aardm></section>

Paste the section tag on line 48 of "no-sidebar.html", inside the <div id="main"> container. Delete the rest of the code in the container so that only the section tag is there:

将section标记粘贴到“ no-sidebar.html”的第48行中的<div id="main">容器内。 删除容器中的其余代码，以便仅存在section标记：

<div id="main">
  <div class="container">
    <section id=anymod-aardm></section>
  </div>
</div>

Save the file and go to the tab with our web page on it. When you reload the page, it should look the exact same as before.

保存文件，然后转到带有我们网页的选项卡。 重新加载页面时，其外观应与之前完全相同。

The difference is that now our feature section is part of our CMS and we can edit it! We could choose to always edit the raw HTML in the Anymod code editor, but that isn't much of an improvement on just editing the static HTML. Instead, let's set it up so that even non-technical users can make changes.

不同之处在于，现在我们的功能部分是CMS的一部分，我们可以对其进行编辑！ 我们可以选择始终在Anymod代码编辑器中编辑原始HTML，但这与仅编辑静态HTML相比并没有太大的改进。 相反，让我们对其进行设置，以便即使非技术用户也可以进行更改。

To do this, we need to add some fields for our CMS that can be edited easily. It looks like our feature section has 4 parts, with each part having an icon (wrench, gears, leaf, and a road) as well as some content. So let's use two fields: one called "icons" and one called "content".

为此，我们需要为CMS添加一些易于编辑的字段。 看起来我们的功能部分包括4个部分，每个部分都有一个图标（扳手，齿轮，树叶和道路）以及一些内容。 因此，我们使用两个字段：一个称为“图标”，另一个称为“内容”。

Back in the Anymod dashboard, click "Done" from the install page and then click on the dropdown arrow on the "Edit" button and choose "Add / remove fields".

返回Anymod仪表板，从安装页面单击“完成”，然后单击“编辑”按钮上的下拉箭头，然后选择“添加/删除字段”。

This takes us to a page where we can add fields to our section. Use the form on the page to create the 2 fields we mentioned:

这会将我们带到一个页面，可以在其中向我们的部分添加字段。 使用页面上的表单创建我们提到的2个字段：

• One called icon that is a repeat Simple text field; and
  一个称为icon ，它是重复的“ Simple text字段； 和
• One called content that is a repeat Rich text (HTML) field
  一个称为content的重复Rich text (HTML)字段

Be sure to check the "Repeat" box since we'll be using these fields 4 times each. Once you've added both repeat fields, your screen should look like this:

请务必选中“重复”框，因为我们将每次使用这些字段4次。 一旦添加了两个重复字段，您的屏幕应如下所示：

Now let's add some content to the fields we just created.

现在，让我们向刚刚创建的字段中添加一些内容。

Click "Done" and then click "Edit". This brings up the same content editor as before, but now we have custom fields.

单击“完成”，然后单击“编辑”。 这将调出与以前相同的内容编辑器，但是现在我们有了自定义字段。

Click "Add repeat item" to add the first item in our features section.

点击“添加重复项”以在我们的功能部分添加第一项。

If we toggle over to the Code section, it looks like the first item has an icon called fa-wrench. This is from the Font Awesome icon set, and we could use any icon from there that we wanted. For now though, we'll still use "fa-wrench" for the icon.

如果我们切换到“代码”部分，则看起来第一项有一个名为fa-wrench的图标。 这来自“ 真棒字体”图标集，我们可以使用所需的任何图标。 不过，到目前为止，我们仍将“ fa-wrench”用作图标。

Toggle to the Content section and add fa-wrench for the items[0].icon input. Then toggle back to the Code section and copy the first block of text (starting with "Integer ultrices / In posuere...") and paste it in for the items[0].content input. Delete the <h3> and <span> tags from the content editor and instead use the WYSIWYG tools to make "Integer ultrices" a "Heading 3" section.

切换到“内容”部分，并为items[0].icon输入添加fa-wrench 。 然后切换回“代码”部分，并复制文本的第一块（以“整数ultrics / posuere ...”开头），并将其粘贴为items[0].content输入。 从内容编辑器中删除<h3>和<span>标记，而是使用WYSIWYG工具将“整数ultrices”设置为“标题3”部分。

Now our section editor should look like this:

现在我们的部分编辑器应如下所示：

Repeat this process for the remaining 3 feature sections, entering fa-cogs, fa-leaf, and fa-road for the icons, as well as the associated text content for each.

对其余3个功能部件部分重复此过程，为图标输入fa-cogs ， fa-leaf和fa-road ，以及每个图标的关联文本内容。

Now that the content is in place, let's make it show in our section.

现在内容已经准备就绪，让我们在本节中进行显示。

Click the "Code" toggle to switch to the code editor view. We're ready to replace our static HTML with something dynamic.

单击“代码”切换以切换到代码编辑器视图。 我们已经准备好将动态HTML替换为静态HTML。

We'll want to replace our section HTML with code to insert the icon and content fields we just created. With Anymod, we can access these fields through the items array, which starts at zero index. For example, to get the first icon value, we would use items[0].icon. Similarly, the second content value would be items[1].content.

我们将用代码替换HTML部分，以插入刚刚创建的icon和content字段。 使用Anymod，我们可以通过items数组（从零索引开始）访问这些字段。 例如，要获取第一个图标值，我们将使用items[0].icon 。 类似地，第二个内容值将是items[1].content 。

Anymod uses Vue.js syntax for inserting content, so replace the above HTML in the editor with the following HTML that will insert our content:

Anymod使用Vue.js语法插入内容，因此用以下将插入我们内容HTML替换编辑器中的上述HTML：

<div class="row">
  <!-- Content -->
  <div class="6u">
    <section>
      <ul class="style">
        <li class="fa" :class="items[0].icon">
          <div v-html="items[0].content"></div>
        </li>
        <li class="fa" :class="items[2].icon">
          <div v-html="items[2].content"></div>
        </li>
      </ul>
    </section>
  </div>
  <div class="6u">
    <section>
      <ul class="style">
        <li class="fa" :class="items[1].icon">
          <div v-html="items[1].content"></div>
        </li>
        <li class="fa" :class="items[3].icon">
          <div v-html="items[3].content"></div>
        </li>
      </ul>
    </section>
  </div>
</div>

*In Vue.js, :class= is used to generate a class name, and v-html= is used to insert raw HTML. There are more ways to insert values, but this is all we need for now. *

*在Vue.js中， :class=用于生成类名，而v-html=用于插入原始HTML。 插入值还有更多方法，但这是我们现在所需要的。 *

Once you've updated the HTML, click "Save" and then visit our template web page tab and reload it.

更新HTML后，点击“保存”，然后访问我们的模板网页标签并重新加载。

Again it looks the same as before, but now it's editable. Click the pencil button on the right hand side and you can now edit the content in our feature section. Try re-ordering the boxes, changing the icons and content, and anything else you might want to do.

再次看起来和以前一样，但是现在可以编辑了。 单击右侧的铅笔按钮，您现在可以在我们的功能部分中编辑内容。 尝试重新排序框，更改图标和内容，以及您可能要执行的其他任何操作。

At this point, we have 2 CMS sections on our page: one content block and one fully custom section, and both are now editable without touching or redeploying our code!

至此，我们在页面上有2个CMS部分：一个内容块和一个完全自定义的部分，现在都可以编辑它们而无需触摸或重新部署我们的代码！

4）添加表格 ( 4) Add a form )

Finally, let's add a form that will automatically send responses to our Anymod dashboard where we can view and manage the messages. Anymod has a library of sections that includes ready-to-use forms, so visit the "Library" tab at Anymod and click the "Forms" tag on the left to filter sections.

最后，让我们添加一个表单，该表单会自动将响应发送到Anymod仪表板，我们可以在其中查看和管理消息。 Anymod的部分库包括现成的表单，因此请访问Anymod的“库”选项卡，然后单击左侧的“ Forms”标签以过滤部分。

Let's choose the first one: Contact Form with reCAPTCHA option. Click on this section and then click the "Add to your project" button.

让我们选择第一个：带有reCAPTCHA选项的联系表。 单击此部分，然后单击“添加到您的项目”按钮。

Install it the same way we installed the last 2 sections: click on the "Install" button and then copy the section tag

以与安装最后2个部分相同的方式进行安装：单击“安装”按钮，然后复制该部分标签

<section id=anymod-mnark data-load=b></section>

And paste it into our "no-sidebar.html" file, just above the <form> element around line 63. Delete the existing <form> code so that the footer section looks like this

并将其粘贴到第63行中<form>元素上方的“ no-sidebar.html”文件中。删除现有的<form>代码，以使页脚部分如下所示

<!-- Footer -->
<div id="footer" class="wrapper style2">
  <div class="container">
    <section>
      <header class="major">
        <h2>Mauris vulputate dolor</h2>
        <span class="byline">Integer sit amet pede vel arcu aliquet pretium</span>
      </header>
      <section id=anymod-mnark data-load=b></section>
    </section>
  </div>
</div>
<!-- /Footer -->

Again, make sure to use your specific id= for the section tag if you are following along with your own project.

同样，如果您要跟随自己的项目，请确保对部分标记使用特定的id= 。

Save the file and reload our template web page. It should look like this:

保存文件并重新加载我们的模板网页。 它看起来应该像这样：

It doesn't look how we want, and the reCAPTCHA form isn't working because we're serving the web page from our file system. If we were serving it from localhost or as a live website, the reCAPTCHA would already be working.

它看起来不像我们想要的那样，并且reCAPTCHA表单不起作用，因为我们正在从文件系统提供网页。 如果我们是从localhost或作为实时网站提供服务，则reCAPTCHA已经可以运行了。

Fortunately, just like with our last section, we can customize it and style it however we want. Click the pencil on the right side to open the editor and then click on the form to edit it. In the Content tab, disable the reCAPTCHA by changing the reCaptcha checkbox from "true" to "false". Then in the Code tab, replace the form's HTML with the following:

幸运的是，就像上一节一样，我们可以根据需要对其进行自定义和样式设置。 单击右侧的铅笔以打开编辑器，然后单击表格进行编辑。 在“内容”选项卡中，通过将reCaptcha复选框从“ true”更改为“ false”来禁用reCAPTCHA。 然后在“代码”选项卡中，将表单HTML替换为以下内容：

<form @submit="submit" v-if="!success">
  <div class="row half">
    <div class="12u">
      <input class="text" type="text" name="name" v-model="name" placeholder="Name" />
    </div>
  </div>
  <div class="row half">
    <div class="12u">
      <input class="text" type="text" name="email" v-model="email" placeholder="Email" />
    </div>
  </div>
  <div class="row half">
    <div class="12u">
      <textarea name="message" v-model="message" placeholder="Message"></textarea>
    </div>
  </div>
  <div class="row half">
    <div class="12u">
      <ul class="actions">
        <li>
          <input type="submit" :value="buttonText || 'Submit'" class="button alt" />
        </li>
      </ul>
    </div>
  </div>
</form> 
<h3 v-if="success">
  Message sent
</h3>

At the bottom of the editor's CSS panel, also add the following rule:

在编辑器CSS面板的底部，还添加以下规则：

h3 {
  color: white;
}

Click the "Save" button to save changes to the HTML and CSS, then reload our web page. Now our form should be working. Try entering a message into the form:

单击“保存”按钮将更改保存到HTML和CSS，然后重新加载我们的网页。 现在我们的表格应该可以正常工作了。 尝试在表单中输入一条消息：

When you submit the form, you should see text that reads "Message sent".

提交表单时，您应该看到显示“消息已发送”的文本。

Back in the Anymod dashboard, click the Anymod logo to go to the dashboard home page and then click the dropdown menu for our project and select "Responses".

返回Anymod仪表板，单击Anymod徽标以转到仪表板主页，然后单击我们项目的下拉菜单，然后选择“响应”。

Here we can see the message was saved in the dashboard. We didn't have to do any backend work, and now we have a completely customizable form we can embed anywhere and collect responses.

在这里我们可以看到消息已保存在仪表板中。 我们不必做任何后端工作，现在我们有了一个完全可定制的表单，可以将其嵌入任何地方并收集响应。

Our page is now exactly like the template we started with, but with the added benefit of content we can edit live and a form that works for visitors to contact us. Now let's deploy it for the world to see.

现在，我们的页面与开始时使用的模板完全一样，但是有了内容的更多好处，我们可以实时编辑内容，并且可以使用一种表格供访问者与我们联系。 现在，让我们将其部署给全世界。

5）部署到AWS ( 5) Deploy to AWS )

Hosting a website on AWS is as simple as creating a "bucket" on their S3 service and uploading the files for our web page. First, create an account at https://aws.amazon.com, then choose S3 from the "Services" dropdown menu.

在AWS上托管网站就像在其S3服务上创建“存储桶”并为我们的网页上传文件一样简单。 首先，在https://aws.amazon.com上创建一个帐户，然后从“服务”下拉菜单中选择S3。

Now click "Create bucket" so that we have a place to upload our files.

现在点击“创建存储桶”，以便我们有一个上传文件的地方。

Give the bucket a name -- it must be something that no one else has used before, so you may need to try a couple of times to find one. Once you have one, click the "Create" button to create the bucket.

给水桶起个名字-它一定是以前没有人使用过的东西，因此您可能需要尝试几次才能找到一个。 一旦有了，就单击“创建”按钮来创建存储桶。

Next, click on the bucket name and then click the "Upload" button. Upload the folders and files for our website:

接下来，点击存储桶名称，然后点击“上传”按钮。 上载我们网站的文件夹和文件：

/css
/fonts
/images
/js
index.html
no-sidebar.html

Make sure these files are at the "root" of our S3 bucket, not inside of another folder.

确保这些文件在我们的S3存储桶的“根目录”中，而不是在另一个文件夹中。

Once all the files are uploaded, click the checkbox to select all the files and folder and then right click and select "Make public". This will allow anyone to download and view our website files.

上传所有文件后，单击复选框以选择所有文件和文件夹，然后右键单击并选择“公开”。 这将允许任何人下载和查看我们的网站文件。

Now click the "Properties" tab, and select "Static website hosting". Click the radio button that says "Use this bucket to host a website" and enter index.html for the index document.

现在，单击“属性”选项卡，然后选择“静态网站托管”。 单击显示“使用此存储桶托管网站”的单选按钮，然后为索引文档输入index.html。

Now our website is available for anyone to view at the url above the radio button.

现在，任何人都可以通过单选按钮上方的网址查看我们的网站。

You can click to see your hosted website or can view this tutorial's web page at http://phase-shift-0.s3-website-us-east-1.amazonaws.com. Click the "No Sidebar" link at the top right of the page to see the "No Sidebar" page we've been working on.

您可以单击以查看您的托管网站，也可以在http://phase-shift-0.s3-website-us-east-1.amazonaws.com上查看本教程的网页。 点击页面右上方的“无侧栏”链接，以查看我们一直在努力的“无侧栏”页面。

Just like before, you can click the pencil on the right side of the web page to make live edits to the content. Also, the form will submit responses to the Anymod dashboard just like before. We're all done!

像以前一样，您可以单击网页右侧的铅笔对内容进行实时编辑。 同样，该表单将像以前一样将响应提交到Anymod仪表板。 我们都做完了！

结论 ( Conclusion )

We've set up a web page that is extremely fast to load (~800ms), free to host for hobby amounts of traffic, and has CMS features and a working form built in. If we wanted, we could invite other team members or clients to our project on Anymod and they would be able to make edits to the site too.

我们已经建立了一个网页，该网页的载入速度非常快（〜800ms），可以免费托管以吸引大量流量，并具有CMS功能和内置的工作表格。如果需要，我们可以邀请其他团队成员或客户到我们在Anymod上的项目，他们也可以对该站点进行编辑。

We used a basic HTML template, but we could have used any framework we wanted, including React, Angular, Vue.js, and more. We hosted our website on AWS, but again we could have also hosted the site anywhere we wanted, on any platform, and it would work the same because ultimately our solution is just HTML, CSS, and JavaScript.

我们使用了基本HTML模板，但可以使用任何需要的框架，包括React，Angular，Vue.js等。 我们将网站托管在AWS上，但同样可以将网站托管在任何位置，任何平台上，并且工作方式相同，因为最终我们的解决方案只是HTML，CSS和JavaScript。

From here on out, we can make edits with Anymod -- we don't have to change our codebase or redeploy our website every time we want to make a change. This will save us valuable time and let us focus on more important things.

从现在开始，我们可以使用Anymod进行编辑-不必每次都要进行更改时都无需更改代码库或重新部署网站。 这将节省我们宝贵的时间，并使我们专注于更重要的事情。

If you enjoyed this tutorial, take a second to share it with your team or someone you think will benefit from it. It can be hard to find new tools that work well, so they'll be happy to know about it.

如果您喜欢本教程，请花一点时间与您的团队或您认为会从中受益的人分享。 很难找到运行良好的新工具，因此他们将很高兴知道。

Whoever you tell will probably thank you -- for freeing them from the tyranny of WordPress!

无论您告诉谁，都可能会感谢您-让他们摆脱WordPress的暴政！

翻译自: https://scotch.io/tutorials/moving-beyond-wordpress-for-cms

wordpress做cms