vlambda博客
学习文章列表

Gridea+Github搭建个人静态博客


小帅同学

读完需要

5
分钟

速读仅需2分钟

之前小帅写过了hexo+github搭建博客四期教程

本期文章通过Gridea+github在搭建个人静态博客

与hexo相比,大大减少了工作量,很容易搭建出来

当你已经根据教程操作一遍之后,把一些数据保存下来,再给你一台新电脑,毫不夸张的说5分钟就可以搞定整套流程

真正做到了小白也可以在GitHub Pages搭建静态博客

劣势就是Gridea的主题较少,可定制度低

如果你不太在意,那使用这个也是良策

预览图:

Gridea+Github搭建个人静态博客

1. 了解工作

Gridea官网:https://gridea.dev

Gridea,一个静态博客写作客户端

零成本、开源、易用、强大。记录生活、心情、知识、笔记、创意…

Gridea 特色

  • Markdown:使用最酷的 Markdown 进行创作,专注内容,其他的交给 Gridea

  • 封面图:快去挑选一张漂亮的封面图,为文章添彩,外链图也没问题哦

  • 自定义标签:用标签来为文章进行归类,以你喜欢的方式:编程、旅行、读书笔记…,化繁为简、不必纠结

  • 自定义菜单:我们提供了自定义菜单功能,同时贴心地准备了主页、归档和标签列表快捷选择。当然,你也可以创建外部菜单到任何地方

  • 跨设备:或许你工作使用 Mac,生活使用 Windows,又或许你是使用 Linux 的极客,这都不是事儿,Gridea 全都支持!同时支持更改源文件夹,利用 OneDrive、Dropbox 等同步工具,跨设备管理博客轻而易举!

  • 多平台:大部分情况下你用 Github Pages 来托管博客就够了,但我们同时提供了 Coding Pages 的支持

  • 多评论:Gridea 内置了 Gitalk 和 DisqusJS 两个评论系统,你可以任选其一,利用评论结交更多朋友吧!

  • 多主题:我们目前提供了 4 款内置主题,总有一款会获得你的芳心,更有趣的是,我们为每款主题提供了丰富的自定义配置,稍加配置,遇见大不同

  • 多语言:是的,我们贴心地为您内置了中文简体和 English 两种语言

  • RSS:RSS 也是一个不错的信息订阅方式

2. GitHub 配置

2.1 申请账号

首先去github:https://github.com

申请github账号,按要求填写就行了

如果你已经有了账号,直接从【2.2 创建仓库】这步开始即可

Gridea+Github搭建个人静态博客

直接【continue】

Gridea+Github搭建个人静态博客

翻译一下,看心情添加

Gridea+Github搭建个人静态博客

然后去邮箱里验证一下就可以啦,登上我们的github账号。

Gridea+Github搭建个人静态博客

2.2 创建仓库

注意:为了能通过 【你的GitHub用户名.github.io】域名访问,你的仓库(repository) 应该直接命名为:

你的GitHub用户名.github.io

例如我的 Github 用户名为 gms2020

则仓库名为 gms2020.github.io

使用这种方式还有一个好处是,在没有自定义域名的情况下,使你的博客域名更短。

1、点击右上角的加号,选择【New repository】

Gridea+Github搭建个人静态博客

2、然后对仓库信息进行设置。注意箭头标识的几个地方

Gridea+Github搭建个人静态博客

3、设置好点击【Create repository】

Gridea+Github搭建个人静态博客

注:在2021.04.11号,GitHub新的仓库,分支命名为main,所以创建好后进入仓库,可以看下是什么分支(比如我的是main分支)

Gridea+Github搭建个人静态博客

2.3 生成仓库Token

1、点击这里:

https://github.com/settings/tokens/new

创建一个 Token,勾选上 repo 的相关权限即可

Gridea+Github搭建个人静态博客

2、生成之后记得把 Token 复制到你的本地保存,因为一旦关闭网页将不能再看到它。

Gridea+Github搭建个人静态博客

3. 安装Gridea

1、官网安装 Gridea:https://gridea.dev

  • Gridea v0.9.2版本已经更换 Git 部署模块,本地不需要安装 Git 也可以畅快使用 Gridea。

2、不限速云盘:

https://gmengshuai.lanzoux.com/iqEMCjie20d(密码:xiao)

https://cloud.189.cn/t/IzMRNbVNBvIn

http://shandianpan.com/f/5WBO

https://moecloud.cn/s/OpmOHq

4. 配置Gridea

Gridea 提供了将博客部署到 GitHub Pages、Coding Pages 和通过 SFTP 的方式上传到自己的服务器的功能。

下面将以 GitHub 为例,来讲一下部署流程。

进入 Gridea 进行远程设置【遗憾的是此软件进入和同步都需越狱上网

按照下图的示例进行设置,然后点击「检测远程链接」,进行配置检查(显示连接成功即配置成功)

Gridea+Github搭建个人静态博客

5. 主题选择

软件内提供了四款主题,都是简约派的

想要使用更多的主题可以进入官网下载

如何进入官网?

  1. 点击软件内部的【更多主题】进入官网

  2. 主题官网:https://gridea.dev/themes

选择一个喜欢的进行下载

Gridea+Github搭建个人静态博客

下载后进行解压,把解压的文件夹放入【站点源文件路径】中的主题(themes)文件夹中

【站点源文件路径】在哪里?

看下图进行操作

Gridea+Github搭建个人静态博客
Gridea+Github搭建个人静态博客
Gridea+Github搭建个人静态博客

6. 菜单设置

点击菜单选项,进行跳转,还需要小小的更改一下

下面以【首页】这项菜单为例

Gridea+Github搭建个人静态博客

第一步

Gridea+Github搭建个人静态博客

第二步

Gridea+Github搭建个人静态博客

其它菜单设置同上

7. 评论配置(可选)

Gridea配置Gitalk评论系统

Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件,可以使用GitHub账号进行登录。

Gridea官方文档中并没有对Gitalk评论进行配置对教程,其实步骤很简单,不过在配置的过程中有一些我们需要注意的地方,话不多说,直接上教程。

1、首先,需要在GitHub账号设置里配置一个OAuth Application

https://github.com/settings/applications/new

如图:

Gridea+Github搭建个人静态博客

例如:

Gridea+Github搭建个人静态博客

⚠️需要注意的是HomePage URL和Authorization callback URL需要填写https而不是http

2、配置完成后,会获得Client ID 和Client Secret,打开Gridea远程设置中完善配置,如下图:

Gridea+Github搭建个人静态博客

⚠️仓库名称一定要输入正确,若不知道,进入自己的仓库的设置中看一下,配置错误会出现[404 not found]

Gridea+Github搭建个人静态博客

3、出现「未找到相关的 Issues 进行评论请联系 @_ 初始化创建」的提示解决方法

  • 还有一个原因是因为你的部署站点的Git仓库未打开issue,在仓库中把issue打开即可。(具体设置在仓库setting中设置,如下图)

Gridea+Github搭建个人静态博客

8. 小结一下

点击右上角的加号就可以进行愉快的写文章了

写完后点击左下角的【预览】即可实现本地预览

点击【同步】即可实现推送到github仓库

Gridea+Github搭建个人静态博客
  • 评论配置🉑留在最后,不配置也可以,这一项看心情

  • 关于主题的配置,每个作者都给出了详细教程,小帅这里不会再另出一期教程了

Gridea+github搭建静态博客到这算是搞定了,希望本篇文章对你有所帮助

文中若有错误的地方,欢迎留言进行指正

如果还有不懂的地方,也可以留言告诉我

我的演示站点:https://gms2020.github.io

参考:

官方文档:https://gridea.dev/docs

Gridea+Github搭建个人静态博客

扫描它,然后带走我