【开源自荐】自用的个人主页主题 Homepage-Creators,支持Github和CloudFlare Pages部署

我自用的个人主页主题已经有一段时间了,目前趋于稳定,在这里分享给大家,可以前往我的个人主页看看效果

这个项目最大的特点在于小白也能制作并部署自己的主页,因为这个项目是个静态网站,所以无需服务器,并且配置十分简单,只需要准备图片素材并修改配置文件即可完成魔改

这个主题移植自张洪大佬的主页,特此说明

这个项目是基于 Zola SSG框架构建的,Zola 是RUST生态很流行的一个静态博客框架,可以理解成模版语法更友好的 Hugo,既然如此,当然是选择RUST战未来啦

主要功能如下,能满足大部分展示的需求

  • 基本功能
    • 移动端自适应
    • 动画滚动
    • AVIF / WebP自适应
    • 动态更新底部年份
    • 访问量统计(Umami 或自定义)
  • 内容板块
    • 导航菜单
    • 首屏板块
    • 作者板块
    • 事件板块
    • 产品板块(独立)
    • 产品板块(清单)
  • 日常运营
    • 置顶通知
  • 合规
    • ICP备案
    • 公安备案

部署步骤

因为是静态网站,支持Github和Cloudflare的部署,能做到0服务器成本,详细的文档请移步代码仓库

GitHub Pages

  1. Fork 本仓库。

  2. 确保仓库已经包含 .github/workflows/deploy.yml 文件,无需额外配置。

  3. 在仓库的 Actions 页面启用 Build GH Pages 工作流,然后手动触发构建。

  4. 提交更改后,GitHub Actions 将自动构建并部署到 gh-pages 分支,等待完成。

  5. 在您的 GitHub 仓库中,进入 SettingsPages,在 Source 下拉菜单中选择 gh-pages 分支并保存。

  6. 部署完成后,您可以通过 https://<your-username>.github.io/<repository-name> 访问您的站点。

  7. 参考定制你的主页章节,定制个人主页

CloudFlare Pages

  1. Folk 本仓库

  2. 登录 Cloudflare 并进入 Pages 页面。

  3. 点击 Create a project 按钮。

  4. 选择 Connect to Git,然后授权 Cloudflare 访问您的 GitHub 仓库。

  5. 在仓库列表中选择您的 Homepage-Creators 仓库。

  6. 配置构建设置:

  • Framework preset: 选择 None

  • Build command 构建命令: 输入 zola build

  • Build output directory 构建输出: 输入 public

  • 添加环境变量UNSTABLE_PRE_BUILD,填写asdf plugin add zola https://github.com/salasrod/asdf-zola && asdf install zola $ZOLA_VERSION && asdf global zola $ZOLA_VERSION

  • 添加环境变量ZOLA_VERSION,填写0.20.0

  • 如果这里遇到问题,请参考官方文档

  1. 点击 Save and Deploy 按钮,Cloudflare Pages 将开始构建和部署您的站点。

  2. 部署完成后,您可以通过 Cloudflare 提供的域名访问您的站点,或者绑定自定义域名。

  3. 参考定制主页章节,定制个人主页

定制主页

定制过程十分简单!无需改一行代码,因为我已经对板块进行模块化抽取,你只需要:

  1. 将使用到的图片素材并存放在static/img文件夹(最费时且最难的工作其实是图片制作……)

  2. 修改 config.toml 文件,配置板块、文字内容和引用的图片

  3. 运行zola serve命令,本地预览主页,支持实时刷新

  4. 部署、发布主页

截图

最后放一部分截图,来自我的个人主页


这个项目其实一直开源的,但一直没时间写文档,今天终于一鼓作气把文档写好了~ 我其实还开源了自用的博客主题,就是不知道什么是时候有时间写文档了…

各位佬友有任何建议都可以评论区或者新建 issue 提出哈

56 个赞

感谢推荐

4 个赞

好看的,搭个试试

3 个赞

感谢支持~

3 个赞

挺好看的,加油

3 个赞

很漂亮,顺便问下大佬,这个能支持多语言吗?

3 个赞

佬还是独立音乐人:+1::+1::+1:

2 个赞

不错好看

小问题两个:

  • 右上角“访问博客”和“Github”视觉上未对齐
  • NavBar 字体辨认度稍低,不如博客的

建议:

3 个赞

感谢分享。 `

1 个赞

感谢您的建议。目前有计划支持,且优先级很高,我的博客主题同样也会加入国际化支持,欢迎持续关注项目~

1 个赞

非常感谢您的建议!深色模式和i18n已经有计划了,博客文章的建议非常有建设性,初步规划推出两个新组件,一个是静态推荐文章,一个是动态拉取最新文字。

这主题看上去真不错

很好看,给大佬一个star

1 个赞

挺好的,也很丝滑,但是不知道为什么,总看到拿个人照片做头像的就无法接受,像极了带着大金链子的暴发户(没有恶意,只是自己的感官陈述)

挺好的,试试看

感谢分享

哈哈哈,一开始用头像我也不太习惯,后来看习惯就好了。

好看好看

好东西,很详细!闲下来我也搭个试试

快帮我贡献一波播放量哈哈哈