查看“︁建站/静态网站生成器”︁的源代码

 施工中

== 什么是静态网站生成器？ ==
　　“静态站点生成器”由<code>static site generators</code>(SSG)直译而来。通俗来说，常用的动态网站博客框架如typora，我们可以通过安装主题以美化界面，同时可以在线上发布文章，每个文章都有相同的主题。但如果手动编写静态网站，最多使用同一套css/js脚本，html主体还是得手搓，会浪费很多时间在内容之外的事上；即便使用markdown等适用范围广的标记语言并输出为html文件，但组织不同html页面间的联系仍旧十分耗力。静态网站生成器便是执行此工作，通过如传统动态网站般的模板自动为内容生成html文件，保证每个文章的ui都遵循了主题的样式设定，我们只需要在本地维护原始格式的文件（例如.md），即便更换主题，生成器也会为所有内容重新生成新的html文件，并推送到服务器中。与传统动态网站博客相较，缺点是无法线上轻易的维护、没有账户体系（可以外挂外部资源）；优点是备份内容更方便，本地创作一打包即可，站点更加轻量化，纯html总比需要调用php、mysql要强，更加安全，没有账户体系意味着除ddos外的绝大多数攻击方式都将失效。

== 常用方案 ==
目前比较流行的就是hugo和hexo，对于我这种只会用别人弄好的主题的人而言，两者区别不大，哪个热门用哪个就对了，因为意味着维护者多，遇到问题更容易解决。

'''本文采用hugo'''

== 部署hugo网站 ==
※ https://gohugo.io/documentation/

=== 0.前要条件 ===
需要先安装 [https://git-scm.com/downloads Git] 、 [https://go.dev/doc/install Go] ，访问官网以了解对应系统的安装方式。

可选安装[https://gohugo.io/hugo-pipes/transpile-sass-to-css/#dart-sass Dart Sass]，是将sass样式文件编译为浏览器可解析的css文件的编译器，hugo附加的相对落后的LibSass编译器或不支持一些sass语言的新功能。

* 建议直接下载[https://github.com/sass/dart-sass/releases/latest 预构建二进制文件]，根据自己的[[Linux&Win系统及浏览器使用笔记#系统架构|系统架构]]选择对应版本，解压到合适的地方并将路径添加到系统[[Linux&Win系统及浏览器使用笔记#环境变量|环境变量]]中。

=== 1. 本地安装hugo ===
可直接下载编译好的文件：https://github.com/gohugoio/hugo/releases

也可使用对应系统自带的包管理器安装：

* Windows用户参考：https://gohugo.io/installation/windows/#package-managers
** 新版本win10/11预装winget，旧版本参考[https://www.cnblogs.com/blxt/p/16907530.html 其他人所写的文章]。
* Linux用户参考：https://gohugo.io/installation/linux/#repository-packages
** 并非所有发行版都预安装snap，如果有需要可参考[https://snapcraft.io/ snap官网]。

=== 2. 新建站点项目 ===
建立站点项目：<code>hugo new site <u>项目名</u></code>

* 默认会新建：<code>~/<u>项目名</u></code>文件夹，存放网站资源文件，也是hugo站点根目录。

在站点根目录运行：<code>hugo server <u>-D</u></code> 以启动本地服务器，可预览目标站点

* <code>-D</code> 参数是显示草稿等其他内容，不带此参数只有已发布内容。

=== 3. 下载主题 ===
将主题文件下载到<code><u>站点根目录</u>/themes</code>

* 例如下载主题文件并手动复制到文件夹内，或在网站根目录下运行：<code>git clone <u><nowiki>https://github.com/JingWangTW/dark-theme-editor.git</nowiki></u> <u>themes/dark-theme-editor</u></code>

修改<code>hugo.toml</code>配置文件以启用主题

* 通常添加行：<code>theme = '<u>dark-theme-editor</u>'</code> 即可；
* 对于复杂的请参考[https://themes.gohugo.io/themes/dark-theme-editor/#general-config 主题的介绍页面所提供的配置文件]。

网站是热加载的，直接刷新页面即可体现出内容变化。

=== 4. 编写文章 ===
创建文章：<code>hugo new <u>文件夹名</u>/<u>文章名.md</u></code>，默认会带有如下信息：<syntaxhighlight lang="text" line="1">
---
title: "Osint"
date: 2024-11-14T00:31:29+08:00
draft: true
---
</syntaxhighlight>编写完内容后将<code>draft</code>的值修改为<code>false</code>就会在预览中显示。

=== 5. 输出网页 ===
根目录运行：<code>hugo</code>

md文件会自动转为html，但注意如果自己编写了html，那么主题的样式会覆盖自定义的样式。

== 其他选择 ==
'''[https://hexo.io/index.html hexo]'''：轻量化个人博客，不过太轻量也不一定适合，跟typecho一个类别的，可以搜搜看别人使用此框架的网站，然后体验体验<sup>（不过不能只看我外观，还是要看编辑是否方便）</sup>。

* 待更新github+hexo的玩法，看很多人实现了动态站点一样的外观效果<sup>（css+js）</sup>，以及利用一些工具本地编辑.md文件，直接转换成html且同步到github，虽然还是繁琐点，但值得试试<sup>（应该跟本地编辑生成静态页面同步github一样的原理）</sup>。
[https://www.mkdocs.org/ MkDocs]
[[Category:建站]]