Ⅰ 组件分享之后端组件——基于Go语言的HTML和CSS网站生成器Hugo
近期正在探索前端、后端、系统端各类常用组件与工具，困改对其一些常见的组件进行再次整理一下，形成标准化组件专题，后续该专题将包含各类语言中的一些汪陆判常用组件。欢迎大家进行持续关注。
本节分享一个基于Go语言的HTML和CSS网站生成器 hugo ，它针对速度、易用性和可配置性进行了优化。Hugo 获取一个包含内容和模板的目录，并将它们呈现为一个完整的 HTML 网站。Hugo 依赖于 Markdown 文件和元数据的前端，你可以从任何目录运行 Hugo。这适用于您没有特权帐户的共享主机和其他系统。例如我们日常编写一些博客文章，进行快速生成一套静态页面进行分享时可以使用它来进行生成一套静态页面作为我们的博客部署基础。
它支持大量的主题模板，我们可以通过 https://themes.gohugo.io/ 进行选择相关的主题使用，有兴悉森趣的小伙伴可以进行深入研究一下
Ⅱ CODING 静态网站
在 cong.net 部署静态博客，跟 github 是不一样的，这里简单记录一下。以谢益辉的 hugo-xmag 博客主题为例。
在导航栏的 “ 构建与部署 ” 中选择 “ 静态网站 ”，点击“ 直接发布静态网站 ”。
填写网站名称，然渗坦后 " 保存 "。
" 保存 " 后，在部署页面点击 " 立即部署 "。
部署成功后，通过访问地址可以打开静斗悉态的丛销桐网站。
在项目导航栏 "构建与部署" → "静态网站" 页面，点击右上角的 "设置" 按钮。
在 "设置" 页面，填写需要绑定的域名，并选择强制 https 访问。
在域名解析中添加一条 CNAME 记录。
域名解析 CNAME 添加后，等待几分钟，直至证书状态为“正常”。如果证书状态失败，检查你的 CNAME 记录，并再尝试多重新申请几次。
最后，通过域名访问，一切正常。
Ⅲ 用 Git 建立和托管网站
Git 是一个少有的能将如此多的现代计算封装到一个程序之中的应用程序，它可以用作许多其他应用程序的计算引擎。虽然它以跟踪软凯搜件开发中的源代码更改而闻名，但它还有许多其他用途，可以让你的生活更轻松、更有条理。在这个 Git 系列中，我们将分享七种鲜为人知的使冲缺用 Git 的方法。
创建一个网站曾经是极其简单的，而同时它又是一种黑魔法。回到 Web 1.0 的旧时代（不是每个散孙辩人都会这样称呼它），你可以打开任何网站，查看其源代码，并对 HTML 及其内联样式和基于表格的布局进行反向工程，在这样的一两个下午之后，你就会感觉自己像一个程序员一样。不过要让你创建的页面放到互联网上，仍然有一些问题，因为这意味着你需要处理服务器、FTP 以及 webroot 目录和文件权限。虽然从那时起，现代网站变得愈加复杂，但如果你让 Git 帮助你，自出版可以同样容易（或更容易！）。
Hugo 是一个开源的静态站点生成器。静态网站是过去的 Web 的基础（如果你回溯到很久以前，那就是 Web 的全部了）。静态站点有几个优点：它们相对容易编写，因为你不必编写代码；它们相对安全，因为页面上没有执行代码；并且它们可以非常快，因为除了在页面上传输的任何内容之外没有任何处理。
Hugo 并不是唯一一个静态站点生成器。 Grav 、 Pico 、 Jekyll 、 Podwrite 以及许多其他的同类软件都提供了一种创建一个功能最少的、只需要很少维护的网站的简单方法。Hugo 恰好是内置集成了 GitLab 集成的一个静态站点生成器，这意味着你可以使用免费的 GitLab 帐户生成和托管你的网站。
Hugo 也有一些非常大的用户。例如，如果你曾经去过 Let’s Encrypt 网站，那么你已经用过了一个用 Hugo 构建的网站。
Hugo 是跨平台的，你可以在 Hugo 的入门资源 中找到适用于 MacOS、Windows、Linux、OpenBSD 和 FreeBSD 的安装说明。
如果你使用的是 Linux 或 BSD，最简单的方法是从软件存储库或 ports 树安装 Hugo。确切的命令取决于你的发行版，但在 Fedora 上，你应该输入：
通过打开终端并键入以下内容确认你已正确安装：
这将打印 hugo 命令的所有可用选项。如果你没有看到，你可能没有正确安装 Hugo 或需要 将该命令添加到你的路径 。
要构建 Hugo 站点，你必须有个特定的目录结构，通过输入以下命令 Hugo 将为你生成它：
你现在有了一个名为 mysite 的目录，它包含构建 Hugo 网站所需的默认目录。
Git 是你将网站放到互联网上的接口，因此切换到你新的 mysite 文件夹，并将其初始化为 Git 存储库：
Hugo 与 Git 配合的很好，所以你甚至可以使用 Git 为你的网站安装主题。除非你计划开发你正在安装的主题，否则可以使用 --depth 选项克隆该主题的源的最新状态：
现在为你的网站创建一些内容：
使用你喜欢的文本编辑器编辑 content/posts 目录中的 hello.md 文件。Hugo 接受 Markdown 文件，并会在发布时将它们转换为经过主题化的 HTML 文件，因此你的内容必须采用 Markdown 格式 。
如果要在帖子中包含图像，请在 static 目录中创建一个名为 images 的文件夹。将图像放入此文件夹，并使用以 /images 开头的绝对路径在标记中引用它们。例如：
你可以在 themes.gohugo.io 找到更多主题，但最好在测试时保持一个基本主题。标准的 Hugo 测试主题是 Ananke 。某些主题具有复杂的依赖关系，而另外一些主题如果没有复杂的配置的话，也许不会以你预期的方式呈现页面。本例中使用的 Mero 主题捆绑了一个详细的 config.toml 配置文件，但是（为了简单起见）我将在这里只提供基本的配置。在文本编辑器中打开名为 config.toml 的文件，并添加三个配置参数：
在你准备发布之前不必（预先）在互联网上放置任何内容。在你开发网站时，你可以通过启动 Hugo 附带的仅限本地访问的 Web 服务器来预览你的站点。
打开 Web 浏览器并导航到 http://localhost:1313 以查看正在进行的工作。
要在 GitLab 上发布和托管你的站点，请为你的站点内容创建一个存储库。
要在 GitLab 中创建存储库，请单击 GitLab 的 “Projects” 页面中的 “New Project” 按钮。创建一个名为 yourGitLabUsername.gitlab.io 的空存储库，用你的 GitLab 用户名或组名替换 yourGitLabUsername。你必须使用此命名方式作为该项目的名称。你也可以稍后为其添加自定义域。
不要在 GitLab 上包含许可证或 README 文件（因为你已经在本地启动了一个项目，现在添加这些文件会使将你的数据推向 GitLab 时更加复杂，以后你可以随时添加它们）。
在 GitLab 上创建空存储库后，将其添加为 Hugo 站点的本地副本的远程位置，该站点已经是一个 Git 存储库：
创建名为 .gitlab-ci.yml 的 GitLab 站点配置文件并输入以下选项：
image 参数定义了一个为你的站点提供服务的容器化图像。其他参数是告诉 GitLab 服务器在将新代码推送到远程存储库时要执行的操作的说明。有关 GitLab 的 CI/CD（持续集成和交付）选项的更多信息，请参阅 GitLab 文档的 CI/CD 部分 。
你的 Git 存储库已配置好，在 GitLab 服务器上构建站点的命令也已设置，你的站点已准备好发布了。对于你的第一个 Git 提交，你必须采取一些额外的预防措施，以便你不会对你不打算进行版本控制的文件进行版本控制。
首先，将构建你的站点时 Hugo 创建的 /public 目录添加到 .gitignore 文件。你无需在 Git 中管理已完成发布的站点；你需要跟踪的是你的 Hugo 源文件。
如果不创建 Git 子模块，则无法在 Git 存储库中维护另一个 Git 存储库。为了简单起见，请移除嵌入的存储库的 .git 目录，以使主题（存储库）只是一个主题（目录）。
请注意，你 必须 将你的主题文件添加到你的 Git 存储库，以便 GitLab 可以访问该主题。如果不提交主题文件，你的网站将无法成功构建。
你也可以像使用 回收站 一样使用 trash：
现在，你可以将本地项目目录的所有内容添加到 Git 并将其推送到 GitLab：
将代码推送到 GitLab 后，请查看你的项目页面。有个图标表示 GitLab 正在处理你的构建。第一次推送代码可能需要几分钟，所以请耐心等待。但是，请不要 一直 等待，因为该图标并不总是可靠地更新。
当你在等待 GitLab 组装你的站点时，请转到你的项目设置并找到 “Pages” 面板。你的网站准备就绪后，它的 URL 就可以用了。该 URL 是 yourGitLabUsername.gitlab.io/yourProjectName。导航到该地址以查看你的劳动成果。
如果你的站点无法正确组装，GitLab 提供了可以深入了解 CI/CD 管道的日志。查看错误消息以找出发生了什么问题。
Hugo（或 Jekyll 等类似工具）只是利用 Git 作为 Web 发布工具的一种方式。使用服务器端 Git 挂钩，你可以使用最少的脚本设计你自己的 Git-to-web 工作流。使用 GitLab 的社区版，你可以自行托管你自己的 GitLab 实例；或者你可以使用 Gitolite 或 Gitea 等替代方案，并使用本文作为自定义解决方案的灵感来源。祝你玩得开心！
via: https://opensource.com/article/19/4/building-hosting-website-git
作者： Seth Kenlon 选题： lujun9972 译者： wxy 校对： wxy
Ⅳ 静态网站生成工具-hugo
前段时间使用docker搭建了一个wiki的网站，用于记录日常学习中的笔记，用了一段时间，功能很强大，但是编辑器不太熟悉，网站使用java开发的，功能很全面，插件多的时候就感觉越来越臃肿。曾经有段时间就不想使用它了，最近偶然发现一个静态网站的生成工具hugo，可以将markdown直接生成网站，部署到站点上作为自己的知识库或者博客，hugo是使用go语言开发的，使用起来非常方便，生成的网站可直接部署在Nginx、IIS等中间件上面供其他人访问,hugo还有很多漂亮的主题，大家可以选择自己喜欢的进行使用，下面介绍下 我安装使用hugo的经历和方法。
1）使用brew install命令安装
我的电脑是mac的，所以最方便的是直接用brew install hugo命令安装最为方便：
执行安装完成后执行hugo version 命令查看版本，确保安装成功
2）官网下载二进制包：解压后将二进制文件加入环境变量的方式安装。大家可以根据自己的操作系统，下载适合的安装包。
3）也可以下载源码 编译 运行，由于我本地的go版本是1.17的，而hugo的最新代码的最低要求是1.18，暂时还不想升级，所以源码编译的方式这里就不过多介绍，感兴趣让差铅的可以下坦好载源码编译试试。
进入要创建网站的目录庆核，执行一下命令
这样名称为test-blog的网站就建好了 ，
下载一个主题 可以在 官网上找到各种各样的主题
将主体添加至配置文件
打开content/posts目录下的index.md 文件进行编辑，页面的配置项说明参见官网
执行下面命令
成功以后就可以访问http://localhost:1313/就可以访问网站了。
执行命令hugo -D 即可生成一个public的文件夹，其下面的内容即为静态网站的所有文件
这里使用nginx的docker镜像 进行部署，执行以下命令：
执行成功后就能通过http:localhost访问到静态网站了。
这个工具还有很多需要研究的地方，这里只是将简单的使用方法记录了一下，以后怎样使用才能使网站更加的方便，快捷、美观，还要花时间研究。有兴趣的小伙伴可以私信我一块研究。
Ⅳ 设计静态网站常用的软件有哪些
1. Jekyll
Jekyll是最受欢迎的开源静态生成工具之一，可以跨平台配置。Jekyll利用 Markdown 、 Liquid 、HTML 和 CSS 来生成静态的网页文件，它还支持从常见的 CMS。你能管理永久链接、类别、页面、文章，自定义布局等。非常适合产品页的博客网站。
2. Hugo
Hugo是另一个很受欢迎的用于搭建静态网站的开源框架。它运行速度快、使用简单、可靠性高。还可以提供更高级的主题和一些有用的快捷方式来帮助你轻松完成任务。适合展示网站和博客网站。
3. Hexo
Hexo 基于 Node.js ，除了可以用来快速搭建网站，还提供了丰富的主题和插件。且提供了强大的 API 来扩展功能，可以轻松完成迁移工作。
4. Gatsby
Gatsby 是一个越来越流行的开源网站生成框架。它使用 React.js 来生成快速、界面优美的网站。
5. VuePress
VuePress 是由 Vue.js 支持的静态网站生成工具，如果你了解 HTML、CSS 和 JavaScript，那么你可以无压力地使用 VuePress。
6. Nuxt.js
Nuxt.js 使用了 Vue.js 和 Node.js，但它致力于模块化，并且有能力依赖服务端而非客户端。不仅如此，它的目标是为开发者提供直观的体验，并提供描述性错误，以及详细的文档等。使用Nuxt.js 搭建静态网站，可以做到功能和灵活性两全其美。
7. Docusaurus
Docusaurus 是用 React 构建的，为搭建文档类网站量身定制。你可以使用所有的基本功能，像文档版本管理、文档搜索和翻译大多是预先配置的。如果你想为你的产品或服务搭建一个文档网站，可以试试 Docusaurus。
8. Eleventy
Eleventy 自称是 Jekyll 的替代品，旨在以更简单的方法来制作更快的静态网站。它更容易上手，还提供适当的文档来帮助你。
9. Publii
Publii 是用 Electron 和 Vue.js 构建的一个开源 CMS，它能使生成一个静态网站变得很容易。如果有需要，你也可以把你的文章从 WorkPress 网站迁移过来。此外，它还提供了与 GitHub 页面、Netlify 及其它类似服务的一键同步功能。
10. Primo
Primo 旨在使用可视化的构建器帮你构建和搭建网站，这样你就可以轻松编辑和部署到任意主机上。但目前开发工作仍很活跃，有些功能还不完善，但它是一个独特的项目。
希望以上工具能成功帮助到你搭建一个界面界面优美的网站。
Ⅵ Hugo 部署到自己服务器
注：下边所有命令，都是在你项目的根目录执行
首先，找到一个 安装的位置 ，然后执行：
xxxx 为你的项目名
Hugo 的主题还是比较丰富的，这里（ 皮肤列表 - Hugo中文文档 ）可以找到一个自己喜欢的，每个主题或者叫皮肤都有详细的安装介绍。
在你的 config.toml 文件中，关键配置项：
创建第一篇博客：
配置完以上，就可以本地查看了：
打包后，会生成一个 public 文件差毕芹夹，只需要把这个文件夹，丢虚毕到你的服务器上，使用数纤 nginx 配置下就可以正常访问了。
举例， 我的nginx配置如下：
更改配置后，记得重启你的nginx
Ⅶ 利用GitHub-Actions将Hugo博客自动发布到GitHub和Gitee Pages
现在个人博客通常有比较多的选择，如果不想要自己购买服务器实现静态博客的发布，可以在、CSDN等平台建立自己的账号并发布，但是原始数据无法在本地管理；如果想要数据完全自己管理，可以使用GitHub或者Gitee Pages功能发布自己的博客，利用Hugo或Hexo等成熟的静态博客将md文件转换成静态网站文件进行快速发布。本文就用来记录如何快速将博客发布到、GitHub以及Gitee Pages三个平台。
我希望的流程当然是主要精力用在写文章，发布的流程最好完全不需要手动处理，但实际情况下手动发布博客的流程大体是：
之前有使用过Travis CI+GitHub+Hexo自动发布到GitHub Pages，但是GitHub的访问盯清经常不那么靠谱，因此想着也能同步到Gitee，并且自动构建Hexo的速度受Nodejs环境部署影响，速度很慢，因此本次计划采用Hugo来构建网站文件，整体流程设计如下：
为了满足博客自动发布流程，首先需要在本地准备好生产环境，以满足快速发布，以此的复杂是为了长期的简单，因此在环境准备阶段我会把所有涉及的工具都记录下来，以方便大家使用以及后边自己回顾，环境准备包含：
Obsidian完成知识积累后，按照ZK->Project->Archive->Blog的流程发布Blog，但是Obsidian的文件相互关联，且附件如何快速复用，需要对Typora和Obsidian都进行简单的配置，确保后续Blog能够快速完成并发布，并且文件仍在Obsidian工程中正常显示敬则枝；
Typora非常的简洁，而且可以实时预览，在写博客的时候经常会插入一些图片，截图后可以直接粘贴进去，图片也会自动保存在本地，这里需要注意图片的保存路径，在偏好设置里，设置插入图片时复制到指定路径（./resource/），这样复制的图片就会自动保存在当前文件夹下的resource文件夹里，方便后续管理与转移。
在.ssh文件生成id_rsa和id_rsa.pub两个文件；
Hugo 是一个基于Go语言开发的静态博客框架，号称世界上最快的构建网站工具；
命令为： hugo new site myblog
myblog为博客的目录名，可以修改为你自己想取的名字，生成的目录如下：
由于默认主题生成的文章页面有些功能是不需要的，因此需要对themes下文件进行修改：
将config、content和themes三个目录拷贝到新创建的站点目录，将content下替换为文章文件即可。
utterances 是一款基于Github Issue的Github工具，优点主要是无广告、加载快、配置简单，轻量开源。
由于 utterances 是一款Github App，因此 安装utterances 非常简单，只需要授权特定repo权限给 utterances 就可以了,注意一个点：授权的这个repo必须是public的，可以选择多个repo，但是建议选择一个就可以了，也比较安全。
这是当前最简单的配置方法， 也可以在 utterances官方 查看亮敏其他配置方法，以及详细的配置参数说明。
Obsidian的安装和使用可参考我的另一篇文章： Obsidian作为第二大脑工具的基本使用和配置
所有环境准备好后，终于要开始启动我们的自动化流程的实现了；
同之前步骤相同，将Gitee密码配置到GitHub Secrets，命名为：GITEE_PASSWORD，所有配置结果如下：
synctogitee.yml
需要绑定Gitee账号到微信公众号，否则最后一步reload pages自动部署Gitee Pages会登录失败，原因是需要短信验证；绑定公众号后则不需要短信验证；其他问题解决可以参考 gitee-pages-action
在Typora完成文章编写后，一键上传所有图片到Gitee图床，拷贝发布到，然后提交到GitHub repo master分支，即可自动部署到GitHub和Gitee Pages；
以上就是我利用GitHub-Actions将Hugo博客自动发布到GitHub和Gitee Pages，希望可以帮助大家快速构建自己的个人网站；后边我会继续完善我的第二大脑系统的构建思路和方法。