有的小伙伴可能有自己写博客的习惯，选择现有平台可能需要遵守平台规则，自己买个服务器、域名又成本太高，只是写写自己的感悟和记录，要求不要，今天就分享一个 零成本、不需要买云服务器、也不需要买域名的方法搭建自己的个人网站。

静态网页生成器是一种工具或框架，用于生成纯静态的网页。相对于动态网页，静态网页不需要服务器端解析和数据库支持，可以直接通过浏览器加载和显示。静态网页生成器的工作原理是将预先设计好的模板、样式和内容数据结合起来，生成静态的HTML、CSS和JavaScript文件，然后将这些文件部署到服务器或托管平台如GitHub Pages，CloudFlare等CDN上。由于GitHub众所周知的原因，国内访问速度非常慢。而CloudFlare作为全球的知名CDN供应商，提供免费Pages可以使用，而且访问速度上还可以。

静态网页生成器的主要特点和优势包括：

  1. 快速加载：静态网页不需要服务器端解析，加载速度快，用户体验好。
  2. 安全性高：由于没有与数据库和服务器交互，静态网页相对来说更安全。
  3. 简单部署：生成的静态文件可以直接上传到服务器或托管平台，部署方便。
  4. 易于缓存：静态网页可以被浏览器缓存，减少服务器请求和网络流量。
  5. 适用于小型项目：对于简单的个人网站、博客、文档等项目，静态网页生成器是一个轻量级且高效的选择。

静态网页生成器常用的技术包括Markdown、HTML、CSS、JavaScript和模板引擎等。通过使用静态网页生成器，开发者可以更快速、简单地创建和维护网站，同时享受到静态网页的性能优势。

静态网页生成器

Jekyll、Hugo和Hexo都是常见的静态网页生成器，它们在功能、使用方式和生态系统等方面有所不同：

  1. Jekyll:

    • 功能：Jekyll是一个基于Ruby的静态网页生成器，支持Markdown和Liquid模板语言。它提供了一套默认的目录结构和模板，方便用户快速搭建网站。Jekyll还支持插件和数据文件，可以实现更复杂的功能。
    • 使用方式：Jekyll使用命令行进行操作，需要安装Ruby环境和相关依赖。用户可以通过配置文件和模板来自定义网站的布局和样式。
    • 生态系统：Jekyll拥有活跃的社区，有大量的主题和插件可供选择。它也是GitHub Pages的默认静态网页生成器，方便用户将网站直接部署到GitHub上。

  2. Hugo:

    • 功能：Hugo是一个基于Go语言的静态网页生成器，速度快且易于使用。它支持Markdown和Go模板语言，具有多种主题和模板可供选择。Hugo还提供了丰富的内置功能，如多语言支持、分页、税onomies等。
    • 使用方式：Hugo同样使用命令行进行操作，需要安装Go语言环境。用户可以通过配置文件和主题来自定义网站的外观和功能。
    • 生态系统：Hugo拥有活跃的社区，有大量的主题和插件可供选择。它也提供了详细的文档和教程，方便用户学习和使用。

  3. Hexo:

    • 功能：Hexo是一个基于Node.js的静态网页生成器，支持Markdown和EJS模板语言。它提供了丰富的主题和插件，支持多语言、分页、标签等功能。Hexo还具有一些特殊功能，如自动生成目录、压缩和优化图片等。
    • 使用方式：Hexo同样使用命令行进行操作，需要安装Node.js和相关依赖。用户可以通过配置文件和主题来自定义网站的外观和功能。
    • 生态系统：Hexo拥有活跃的社区，有大量的主题和插件可供选择。它也提供了详细的文档和教程，方便用户学习和使用。

总体来说，Jekyll、Hugo和Hexo都是功能强大且易于使用的静态网页生成器。选择哪个生成器取决于个人偏好、技术背景和项目需求。Jekyll适合于简单的个人网站和博客，Hugo适合于快速构建大型网站，而Hexo则适合于技术背景较强的用户和特殊需求的项目。

工具安装

  1. git
  2. go https://go.dev/doc/install
  3. dart-sasss https://github.com/sass/dart-sass/releases
  4. hugo https://github.com/gohugoio/hugo/releases

Windows解压后，可以在PATH环境变量中增加hugo.exe的路径，也可以不设置，不设置，执行Hugo命令时需要指定对应可执行文件路径../hugo/hugo.exe serve。

创建个人网站项目

本项目基于Hugo框架搭建一个简单的个人网站

1
2
3
4
5
6
7
8

hugo new site pgwd
cd pgwd
git submodule add https://github.com/xianmin/hugo-theme-jane.git themes/jane
cp -r themes/jane/exampleSite/content ./
cp themes/jane/exampleSite/config.toml ./
rm hugo.toml
mv config.toml hugo.toml
hugo serve

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$ hugo serve
Start building sites …
hugo v0.112.7-ea3c95a7b0f2140c248c1f40246a2e7acd2ada62+extended windows/amd64 BuildDate=2023-06-02T07:07:11Z VendorInfo=gohugoio

                   | EN | PT-BR
-------------------+----+--------
  Pages            | 11 |    11
  Paginator pages  |  0 |     0
  Non-page files   |  0 |     0
  Static files     |  5 |     5
  Processed images |  0 |     0
  Aliases          |  1 |     0
  Sitemaps         |  2 |     1
  Cleaned          |  0 |     0

Built in 81 ms
Watching for changes in E:\Blogger\myblog\pgwd\{archetypes,assets,content,data,layouts,static,themes}
Watching for config changes in E:\Blogger\myblog\pgwd\hugo.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

此时就可以打开浏览器输入http://localhost:1313/就可以打开你的个人网站啦，但这个网站只能你自己电脑本地访问，下一步我们要把它部署到互联网上去，让所有互联用户都可以访问

GitHub账号

创建一个仓库

1
2
3
4
5
6
7
8
9

pwd
/e/Blogger/myblog/pgwd
git remote add origin git@github.com:账号名/pgwd.git
git add .
git commit -m "my website"
git push --set-upstream origin master

git branch -M main
git push -u origin main

部署CloudFlare Pages

注册https://dash.cloudflare.com/login账号

登录账号后选择Works和Pages

选择Pages，然后连接Git

如果看不到刚才创建的仓库，跳转到GitHub设置一下仓库权限

选择刚才创建的仓库后点击【开始设置】

框架选择Hugo，并设置一个环境变量，指定Hugo的版本，可以与保持与本地安装的版本一致，这样比较好排查问题，其他选项默认即可

网站已经构建成功，点击pgwd.pages.dev连接即可访问，这是CloudFlare默认生成一个免费域名

如果不能访问可以返回到仓库中，将baseURL改为https://pgwd.pages.dev/

1
2
3
4
5
6

git checkout master
修改hugo.toml配置文件的baseURL为https://pgwd.pages.dev/，保存
git add .
git commit -m "modify base url"
git push
配置推送到仓库后，cloudflare pages很快能感知到仓库内容发生变化，就会重新构建了
  • 更多hugo配置和使用内容参考官网：https://gohugo.io/
  • 更多hugo网站主题选择参考：https://themes.gohugo.io/，有数百种之多的各种主题可以根据需要选择