Gmeek框架:18秒拥有属于自己的个人博客!

1861 字
9 分钟
Gmeek框架:18秒拥有属于自己的个人博客!

温馨提示,本文章转载自Meekdai-Gmeek快速上手,但我认为本文比原文更加细致

Gmeek 是一个博客框架,超轻量级个人博客模板,完全基于Github PagesGithub IssuesGithub Actions,可以称作All in Github。不需要本地部署,从搭建到写作,只需要18秒,2步搭建好博客,第3步就是写作。

一、安装#

安装及其简单,但是也要认真看下面的步骤,一步一步来。

【创建仓库】点击通过模板创建仓库,建议仓库名称为XXX.github.io,其中XXX为你的github用户名。(例如我的名字是Peter267,则我的仓库名称应为peter267.github.io,全部小写)

【启用Pages】在仓库的设置Settings中Pages->Build and deployment->Source下面选择Github Actions

打开GitHub Actions
打开GitHub Actions

【开始写作】打开一篇issue,开始写作,并且必须添加一个标签Label(至少添加一个),再保存issue(点击Submit new issue)后会自动创建博客内容,片刻后可通过https://xxx.github.io/ 访问(可进入Actions页面查看构建进度)。

创建issue
创建issue

选择或创建标签
选择或创建标签
GitHub Actions加载
GitHub Actions加载

【手动全局生成】这个步骤只有在修改config.json 文件或者出现奇怪问题的时候,需要执行。

手动全局生成步骤
手动全局生成步骤

二、配置文件#

按照安装步骤成功搭建好后,就可以阅读下面的内容修改配置文件啦。 注意修改配置文件后一定要手动全局生成一次,不然会报错。 如果对json格式不熟悉,建议先简单学习一下。

config.json 文件就是配置文件,在创建的仓库内可以找到,对应修改为自己的即可。

{
"title":"Meekdai",
"subTitle":"童话是一种生活态度,仅此而已。",
"avatarUrl":"https://github.githubassets.com/favicons/favicon.svg",
"GMEEK_VERSION":"last"
}

以上是必须的字段,下面是可以自定义字段的描述,可以选择加入到config.json中。

"displayTitle":"Meekdai",
"homeUrl":"http://blog.meekdai.com",
"faviconUrl":"https://github.githubassets.com/favicons/favicon.svg",
"email":"meekdai@163.com",
"startSite":"02/16/2015",
"filingNum":"浙ICP备20023628号",
"onePageListNum":15,
"singlePage":["about"],
"iconList":{"music":"M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z"},
"exlink":{"music":"https://music.meekdai.com"},
"commentLabelColor":"#006b75",
"yearColorList":["#bc4c00", "#0969da", "#1f883d", "#A333D0"],
"i18n":"CN",
"UTC":8,
"themeMode":"manual",
"dayTheme":"light",
"nightTheme":"dark_colorblind",
"urlMode":"pinyin",
"style":"",
"script":"",
"head":"",
"allHead":"",
"indexStyle":"",
"indexScript":"",
"showPostSource":1,
"rssSplit":"sentence",
"bottomText":"转载请注明出处",
"ogImage":"https://cdn.jsdelivr.net/gh/Meekdai/meekdai.github.io/logo64.jpg",
"primerCSS":"<link href='https://mirrors.sustech.edu.cn/cdnjs/ajax/libs/Primer/21.0.7/primer.css' rel='stylesheet' />",
"needComment":0,

主页各部分名称
主页各部分名称

配置参数说明
title【必填】博客标题
subTitle【必填】博客描述&自述
avatarUrl【必填】博客头像
GMEEK_VERSION【必填】Gmeek版本,一般写last也可以用具体tag版本
displayTitle用于头像后面的标题展示,如果和title一致则不用添加
homeUrl博客的主页地址,自定义域名时需要配置
faviconUrl页面的favicon地址,如果和avatarUrl一致则不用添加
email用于自动提交仓库时用,不添加也可以
startSite用于页面底部显示网站运行天数
filingNum用于页面底部显示备案信息(未备案请不要添加)
onePageListNum用于首页每页展示的文章数量
singlePage自定义独立页面,例如about或者link
iconList用于定义singlePage按钮展示的SVG图标 (16px),aboutlink内置无需定义
exlink用于自定义首页右上角圆形按钮到外部链接功能,按钮图标定义在iconList中
commentLabelColor用于自定义显示评论数量标签的颜色
yearColorList用于自定义显示不同年份标签的颜色
i18n用于定义博客语言,目前支持EN/CN/RU (英文/中文/俄文)
themeMode用于定义主题模式,默认为manual,也可选择fix详细说明
dayTheme用于定义亮主题
nightTheme用于定义暗主题
urlMode用于定义文章链接生成模式,目前支持pinyin/issue/ru_translit (文章标题拼音/issue序号(例:post7))/俄文
style用于自定义文章页CSS
script用于自定义文章页JavaScript
head用于自定义文章页head内容
allHead用于自定义所有页面head内容
indexStyle用于自定义首页CSS
indexScript用于自定义首页JavaScript
showPostSource设置为1则在文章页显示issue链接按钮,设置为0则不显示
rssSplit设置RSS输出的截断符号,默认sentence为第一句话,可配置其他特殊符号
bottomText用于设置文章页面右下角显示的内容
ogImage用于设置Open Graph协议展示的图片
primerCSS用于设置primer.css的CDN地址,默认使用南科大
needComment用于设置是否需要评论功能,1开启评论,0关闭(如果想使用评论,请下载utterances评论

三、代码示范#

✅ 正确代码#

{
"title":"Peter's Blog",
"subTitle":"无限进步!",
"avatarUrl":"https://i1.hdslb.com/bfs/face/4963f665e12a4703a1c54adc252fcae4b7e93005.jpg",
"faviconUrl":"https://vip.helloimg.com/i/2024/07/31/66aa2568dfba1.png",
"displayTitle":"Peter Tech",
"singlePage":["link","about","thinkbox"],
"iconList":{"thinkbox":"m8.878.392 5.25 3.045c.54.314.872.89.872 1.514v6.098a1.75 1.75 0 0 1-.872 1.514l-5.25 3.045a1.75 1.75 0 0 1-1.756 0l-5.25-3.045A1.75 1.75 0 0 1 1 11.049V4.951c0-.624.332-1.201.872-1.514L7.122.392a1.75 1.75 0 0 1 1.756 0ZM7.875 1.69l-4.63 2.685L8 7.133l4.755-2.758-4.63-2.685a.248.248 0 0 0-.25 0ZM2.5 5.677v5.372c0 .09.047.171.125.216l4.625 2.683V8.432Zm6.25 8.271 4.625-2.683a.25.25 0 0 0 .125-.216V5.677L8.75 8.432Z"},
"homeUrl":"https://peter267.github.io/",
"email":"miaomiaoweiqi@163.com",
"startSite":"07/18/2024",
"onePageListNum":15,
"commentLabelColor":"#006b75",
"yearColorList":["#bc4c00", "#0969da", "#1f883d", "#A333D0"],
"i18n":"CN",
"UTC":8,
"themeMode":"manual",
"dayTheme":"light",
"nightTheme":"dark_colorblind",
"urlMode":"issue",
"rssSplit":"sentence",
"bottomText":"❤ 转载文章请注明出处,谢谢!❤",
"ogImage":"https://i1.hdslb.com/bfs/face/4963f665e12a4703a1c54adc252fcae4b7e93005.jpg@240w_240h_1c_1s_!web-avatar-nav.avif",
"primerCSS":"<link href='https://mirrors.sustech.edu.cn/cdnjs/ajax/libs/Primer/21.0.7/primer.css' rel='stylesheet' />",
"needComment":1,
"script":"<script>document.getElementById('cmButton').click();</script>",
"allHead":"<script src='https://blog.meekdai.com/assets/GmeekVercount.js'></script>",
"script":"<script src='https://blog.meekdai.com/Gmeek/plugins/GmeekTOC.js'></script><script src='https://blog.meekdai.com/Gmeek/plugins/lightbox.js'></script>",
"GMEEK_VERSION":"last"
}
  • 代码开头结尾应该有 “{” 和 “}” 符号
  • 每行代码后方有个英文逗号(,),最后一行代码除外
  • 每行代码开头空四格( “{”和 “}”除外)

❌ 错误代码#

{
"title":"Peter's Blog",
"subTitle":"无限进步!",
"avatarUrl":"https://i1.hdslb.com/bfs/face/4963f665e12a4703a1c54adc252fcae4b7e93005.jpg",
"faviconUrl":"https://vip.helloimg.com/i/2024/07/31/66aa2568dfba1.png",
}
"displayTitle":"Peter Tech",
"singlePage":["link","about","thinkbox"],
"iconList":{"thinkbox":"m8.878.392 5.25 3.045c.54.314.872.89.872 1.514v6.098a1.75 1.75 0 0 1-.872 1.514l-5.25 3.045a1.75 1.75 0 0 1-1.756 0l-5.25-3.045A1.75 1.75 0 0 1 1 11.049V4.951c0-.624.332-1.201.872-1.514L7.122.392a1.75 1.75 0 0 1 1.756 0ZM7.875 1.69l-4.63 2.685L8 7.133l4.755-2.758-4.63-2.685a.248.248 0 0 0-.25 0ZM2.5 5.677v5.372c0 .09.047.171.125.216l4.625 2.683V8.432Zm6.25 8.271 4.625-2.683a.25.25 0 0 0 .125-.216V5.677L8.75 8.432Z"},
"homeUrl":"https://peter267.github.io/",
"email":"miaomiaoweiqi@163.com",
"startSite":"07/18/2024",
"onePageListNum":15,
"commentLabelColor":"#006b75",
"yearColorList":["#bc4c00", "#0969da", "#1f883d", "#A333D0"],
"i18n":"CN",
"UTC":8,
"themeMode":"manual",
"dayTheme":"light",
"nightTheme":"dark_colorblind",
"urlMode":"issue",
"rssSplit":"sentence",
"bottomText":"❤ 转载文章请注明出处,谢谢!❤",
"ogImage":"https://i1.hdslb.com/bfs/face/4963f665e12a4703a1c54adc252fcae4b7e93005.jpg@240w_240h_1c_1s_!web-avatar-nav.avif",
"primerCSS":"<link href='https://mirrors.sustech.edu.cn/cdnjs/ajax/libs/Primer/21.0.7/primer.css' rel='stylesheet' />",
"needComment":1,
"script":"<script>document.getElementById('cmButton').click();</script>",
"allHead":"<script src='https://blog.meekdai.com/assets/GmeekVercount.js'></script>",
"script":"<script src='https://blog.meekdai.com/Gmeek/plugins/GmeekTOC.js'></script><script src='https://blog.meekdai.com/Gmeek/plugins/lightbox.js'></script>",
"GMEEK_VERSION":"last"

问题原因:格式错误

{
"title":"Peter's Blog",
"subTitle":"无限进步!",
"avatarUrl":"https://i1.hdslb.com/bfs/face/4963f665e12a4703a1c54adc252fcae4b7e93005.jpg",
"faviconUrl":"https://vip.helloimg.com/i/2024/07/31/66aa2568dfba1.png",
}
"displayTitle":"Peter Tech",
"singlePage":["link","about","thinkbox"],
"iconList":{"thinkbox":"m8.878.392 5.25 3.045c.54.314.872.89.872 1.514v6.098a1.75 1.75 0 0 1-.872 1.514l-5.25 3.045a1.75 1.75 0 0 1-1.756 0l-5.25-3.045A1.75 1.75 0 0 1 1 11.049V4.951c0-.624.332-1.201.872-1.514L7.122.392a1.75 1.75 0 0 1 1.756 0ZM7.875 1.69l-4.63 2.685L8 7.133l4.755-2.758-4.63-2.685a.248.248 0 0 0-.25 0ZM2.5 5.677v5.372c0 .09.047.171.125.216l4.625 2.683V8.432Zm6.25 8.271 4.625-2.683a.25.25 0 0 0 .125-.216V5.677L8.75 8.432Z"},
"homeUrl":"https://peter267.github.io/",
"email":"miaomiaoweiqi@163.com",
"startSite":"07/18/2024",
"onePageListNum":15,
"commentLabelColor":"#006b75",
"yearColorList":["#bc4c00", "#0969da", "#1f883d", "#A333D0"],
"i18n":"CN",
"UTC":8,
"themeMode":"manual",
"dayTheme":"light",
"nightTheme":"dark_colorblind",
"urlMode":"issue",
"rssSplit":"sentence",
"bottomText":"❤ 转载文章请注明出处,谢谢!❤",
"ogImage":"https://i1.hdslb.com/bfs/face/4963f665e12a4703a1c54adc252fcae4b7e93005.jpg@240w_240h_1c_1s_!web-avatar-nav.avif",
"primerCSS":"<link href='https://mirrors.sustech.edu.cn/cdnjs/ajax/libs/Primer/21.0.7/primer.css' rel='stylesheet' />",
"needComment":1,
"script":"<script>document.getElementById('cmButton').click();</script>",
"allHead":"<script src='https://blog.meekdai.com/assets/GmeekVercount.js'></script>",
"script":"<script src='https://blog.meekdai.com/Gmeek/plugins/GmeekTOC.js'></script><script src='https://blog.meekdai.com/Gmeek/plugins/lightbox.js'></script>",
"GMEEK_VERSION":"last"

问题原因:缩进错误

四、常见问题#

1. 搭建不成功#

多半是没有按照安装步骤来,其实搭建就这2步,不要自己乱点乱设置,就不会有问题。

2. Actions执行失败#

修改了config.json配置文件后,需要全局生成。另外label标签没有打会出现这个问题。 建议通过Actions->build Gmeek->Run workflow->里面的按钮全局重新生成一次

3. 导入以前的文章#

如需修改发布时间,可以在文章最后一行添加如下代码。里面的时间是采用时间戳的形式,可以用如下网站转换。

<!-- ##{"timestamp":1490764800}## -->

4. 自定义单篇文章参数#

自定义单篇文章页面的stylescript

<!-- ##{"style":"<style>#postBody{font-size:20px}</style>"}## -->

5. 多种自定义参数#

可同时一起添加多种自定义参数:

<!-- ##{"script":"<script async src='//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js'></script>","style":"<style>#postBody{font-size:20px}</style>","timestamp":1490764800}## -->

6. 自定义全局文章参数#

添加全局文章页面的stylescript,在config.json文件中添加

"style":"<style>#postBody{font-size:20px}</style>",
"script":"<script async src='//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js'></script>",

7. 置顶博客文章#

只需要Pin issue后,手动全局生成一次即可。

8. utteranc报错#

如果在评论里面登录后评论报错,可直接按照提示安装utteranc app即可

Error: utterances is not installed on xxx/xxx.github.io. If you own this repo, install the app. Read more about this change in the PR.

9. 删除文章#

只需要Close issue或者Delete issue后,再手动全局生成一次即可。

支持与分享

如果这篇文章对你有帮助,欢迎分享给更多人或打赏支持!

打赏
Gmeek框架:18秒拥有属于自己的个人博客!
https://blog.peter267.dpdns.org/posts/post8/
作者
Peter267
发布于
2024-08-20
许可协议
CC BY-NC-SA 4.0
相关文章智能推荐
1
如何流畅访问Github
经验分享文章开篇指出 Github 处于半墙不墙状态,访问情况因人而异。接着介绍通过微软应用商店搜索 Watt Toolkit(曾用名 Steam++)可流畅访问Github 的教程,包括下载后的操作步骤,还提及该软件能加速其他网站,最后探讨了使用反向代理软件的合法性问题,强调要根据目的和法规判断。
2
如何下载国家智教平台的教材?试试这个工具
软件推荐这篇文章介绍了如何通过第三方工具下载国家中小学智慧教育平台的电子课本PDF文件。针对该平台无法直接下载课本的问题,作者推荐使用GitHub开源工具“tchMaterial-parser”,详细说明了Windows和Linux系统的安装方式,并分步骤演示如何通过浏览器开发者工具获取Access Token以完成权限验证,同时提醒Token过期需重新获取的注意事项。此外还提供了备用方案“ChinaTextbook”项目,收录大量旧版教材供用户下载,最后强调教育资源共享的意义,倡导更多人摆脱功利性阅读的局限性。
3
关于博客类型变化的通知
网站公告这篇文章介绍了博主对博客定位的调整。博主自觉科技博客难度大,在高手面前像小白,达不到教导他人水平,因此决定将博客转变为生活类博客。生活类博客可记录生活,让日子更有意义,博主计划每周写周记。同时,记录生活有助于提升博主写作水平。不过,科技类文章仍会保留一些,只是占比会降低。
4
Github强制用户开启2FA的临时解决办法
经验分享GitHub要求用户开启两因素认证(2FA)以保护账户安全,否则将限制用户行为。用户若无手机,可通过Authenticator插件生成验证码,确保账户安全。
5
博客一周年记
闲聊杂谈这篇文章介绍了博主建站一年来的历程。从最初在B站发布低质量视频,因精力消耗大而转向写文章。受他人博客启发,博主选用Gridea框架建站,后因对主题不满,又换成Gmeek框架。之后通过视频学习部署Hexo博客,期间遭遇图床故障、域名变更等问题。在4 - 5月还依据大佬教程对博客进行魔改,回顾一年,博主收获成长,感谢朋友并表示会继续维护博客。
随机文章随机推荐
Profile Image of the Author
Peter267
Hello, I'm Peter267.
公告
欢迎来到我的博客!这是一则示例公告。
分类
标签
最新动态
站点统计
文章
46
分类
8
标签
38
总字数
69,295
运行时长
0
最后活动
0 天前
站点信息
构建平台
Vercel
博客版本
Firefly vunknown
文章许可
CC BY-NC-SA 4.0