我将介绍一种 no code，无软件创建复杂网站的方法，没有任何成本，并且可以让非技术人员管理这个网站
点击这里获取 GitHub 代码。
英国物理学家牛顿正是在大瘟疫(欧洲鼠疫)期间进行“社交疏远”时发现了万有引力定律。隔离在家，你会做什么呢？隔离的好处是：有了大量空闲时间，我们每个人都成了富有创造力的探索者！
但是，由于大家都在家上网，现在任何新的想法或项目都催生了对网站的需求和依赖。诸如 Wordpress，Squarespace 或 Wix 之类的传统 CMS 解决方案难以使用，看起来已经过时了，并且昂贵！
我们希望创建一个外观精美，并且易于自定义的网站。非技术人员应该能够在几分钟内编辑源文件，并能实时在网站上看到所做的更改。理想情况下，这个网站应该是免费的（永远免费，而不仅仅是暂时免费），并且可以吸引成千上万的访客。
这能实现吗？
在这篇简短的文章中，我将向您介绍基于 Hugo 框架，GitHub Pages 和GitHub Actions 的解决方案。跟着本文一步一步做到最后，你就可以启动并运行你的新网站。
这非常简单，我9岁的儿子就做到了。现在，他管理着他想象中的神秘国度阿伦扎托皮亚国（Arenztopia）的名为Arenztopia的网站。如果你有兴趣，点击这里查看关于 Arenztopia 的故事。
TL;DR
如果您只想尽快开始使用可正常运行的网站，请首先确保您拥有一个免费的 GitHub 帐户。
访问GitHub Repo，然后单击右上角的 Fork 按钮，将其 fork 到您自己的帐户中。
来到您 fork 的 repo，然后单击“Actions”选项卡。您将在下图中看到类似的消息。单击“I understand my workflows...”按钮。
来到repo 的“Setting”选项卡，然后向下滚动到GitHub Pages。从下拉列表中重新选择 gh-page s以构建网站。
来到repo 的“Code”选项卡，打开config.toml文件，然后进行编辑。将其title属性更改为其他属性，然后单击底部的“Commit changes”按钮。我们需要此步骤来触发新 repo 中的工作流。
等待几分钟，转到 GitHub Pages 上的“published at”网址，您将看到模板网站。
接下来，您可以通过编辑 config.toml 文件和内容文件夹中的文件来自定义站点。转到本文末尾的“Add your own content”部分，以了解操作方法。您可以查看有关 Ananke 主题的说明。
快速入门就是这样！在接下来的几节中，我将更详细地解释概念和过程。
Hugo 基础
像 Wordpress 这样的旧式 CMS 解决方案很难适应新的网站设计，而像 SquareSpace 这样的商业托管解决方案则过于昂贵且不够灵活。像 Hugo 这样的静态网站生成器在功能，灵活性和易于编写之间取得了很好的平衡。
-
Hugo 网站可以通过配置文件进行自定义和修改
-
新页面和内容部分可以用 markdown 而不是 HTML 编写。这使内容创作更加容易。
-
有许多现代设计主题可供选择。
-
Hugo的输出是一个静态HTML网站，可以将其部署在任何低成本的托管服务提供商上。
-
与静态网站托管服务（如GitHub Pages和Netlify）一起，它们可以提供完全免费的解决方案。
Hugo 软件发行版可在所有主要操作系统上使用。但是，由于我们将使用GitHub Actions自动构建我们的Hugo网站，因此我们实际上不需要在此处安装Hugo软件。
创建模板网站
首先，选择一个 Hugo 主题。Hugo 主题有许多种类。有些针对具有一个或多个内容网页的网站，而另一些针对带有时间戳记的类似博客的网站进行了优化。
选一个你喜欢的，下载一个 zip 包或克隆一个 GitHub repo，然后将主题解压缩到一个文件夹中。假设主题分发已解压缩到名为my-theme的文件夹中。以下是 Linux 终端中的命令。可以在 Mac 上使用 Terminal 应用程序，在 Windows 上使用 PowerShell。
接下来，在电脑上创建网站项目目录。
$ mkdir -r my-site/themes
将主题文件夹复制到项目中
$ cp -r my-theme my-site/themes
将主题的exampleSite 复制到项目的一级目录中
$ cd my-site
$ cp -r themes/my-theme/exampleSite/* ./
编辑项目根目录下my-site/ 的 config.toml，指向正确的主题
baseURL = "/"themesDir = "themes"theme = "my-theme"
接下来，创建一个 GitHub Repo，命名为my-site，并把my-site推到master 分支。下面是从 GitHub 的 Web UI 上传文件的步骤，现在准备发布主题示例站点。
为了使非开发人员（或尚未掌握命令行工具的年轻开发人员）可以使用基于Hugo的系统，我们必须自动化构建和部署静态网站的过程。
自动化部署
在 GitHub 项目中，转到“Setting”并启用GitHub Pages。选择源作为gh-pages分支。
接下来，我们创建一个GitHub Actions 工作流，以便在 master 分支的源文件上运行 Hugo 命令，并将生成的 HTML 文件推送到 gh-pages 分支进行发布。在项目的“操作”标签中，点击“set up a workflow yourself”按钮。
工作流存储在 master 分支，文件名为.github/workflows/main.yml。内容如下所示：
name: github pages
on:
push:
branches:
- master
jobs:
deploy:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@v1 # v2 does not have submodules option now
# with:
# submodules: true
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: '0.62.2'
extended: true
- name: Build
run: hugo
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public
这里是该网站的作者和编辑者将更改 master 分支上的内容和文件。每当将新内容推送到 master 分支时，自动化的GitHub Actions工作流程都将设置Hugo软件，运行hugo命令并将这些文件转换为用于静态网站的HTML文件。
HTML文件被推送到同一 repo 的gh-pages分支。它们将按配置通过GitHub Pages 在指定的 Web 地址上发布。
注意最后一行中的cname属性。那是我们使用GitHub Pages设置的自定义域名。如果您没有自定义域名，只需删除此行，即可在GitHub Pages提供的域上访问您的网站。
现在打开网站，就可以看到主题的默认网页。
添加自己的内容
要将默认主题网站更改为您自己的内容，只需更改 master 分支上的文件。请参考所选主题的文档。通常，Hugo模板是这样的：
- 网页是以markdown格式编写的，
md文件在内容文件夹中。 - 每个
md文件都有一个包含属性的header部分，例如页面的菜单位置、优先级、时间戳、摘录等。 - 总体配置（如多个页面使用的菜单项和属性）存储在
data文件夹中。 - 静态内容（如原始 HTML 文件、 JavaScript 文件和图像文件）可以放在
static文件夹中。
下面是如何自定义我们模板自带的Ananke 主题：
- config.toml 文件允许你配置网站标题，所有页面上的社交图标，以及主页上的大图片。
- 所有图片应该上传到 static/images 文件夹.
- content/_index.md 文件包含主页的文本.
- 要在网站添加页面，只需在content 文件夹中创建 markdown 文件即可 the folder. 一个例子是 contact.md 文件. 注意，在文件的顶部，有一些属性来控制该页面是否应该出现在网站菜单上。
- 要向站点添加文章, 只需 在markdown 文件夹中创建 content/post 文件. 这些是类似博客的内容文章，顶部有日期和标题。 最近的两篇文章将出现在主页上。
如果你觉得这个网站有意思，想要了解更多，看看我们是如何做的，可以查看
