不懂代码也能在10分钟内发布一个网站

我将介绍一种 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 文件. 这些是相似博客的内容文章，顶部有日期和标题。 最近的两篇文章将出如今主页上。

若是你以为这个网站有意思，想要了解更多，看看咱们是如何作的，能够查看

• 阿伦扎托皮亚国 [GitHub] [Web site]
• Second State blog [GitHub] [Web site]