建站/静态网站生成器

来自Wired
跳转到导航 跳转到搜索 
施工中

什么是静态网站生成器？

　　“静态站点生成器”由static site generators(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.前要条件

需要先安装 Git 、 Go ，访问官网以了解对应系统的安装方式。

可选安装Dart Sass，是将sass样式文件编译为浏览器可解析的css文件的编译器，hugo附加的相对落后的LibSass编译器或不支持一些sass语言的新功能。

1. 本地安装hugo

可直接下载编译好的文件：https://github.com/gohugoio/hugo/releases

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

2. 新建站点项目

建立站点项目：hugo new site 项目名

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

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

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

3. 下载主题

将主题文件下载到站点根目录/themes

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

修改hugo.toml配置文件以启用主题

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

4. 编写文章

创建文章：hugo new 文件夹名/文章名.md，默认会带有如下信息：

---
title: "Osint"
date: 2024-11-14T00:31:29+08:00
draft: true
---

编写完内容后将draft的值修改为false就会在预览中显示。

5. 输出网页

根目录运行：hugo

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

其他选择

hexo：轻量化个人博客，不过太轻量也不一定适合，跟typecho一个类别的，可以搜搜看别人使用此框架的网站，然后体验体验（不过不能只看我外观，还是要看编辑是否方便）。

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

MkDocs

检索自“https://wired.scio.icu/index.php?title=建站/静态网站生成器&oldid=109”