当下大多数人可能已经对 Github Pages 不再陌生,它是很多喜欢写文章的人第一次接触的用于免费搭建博客建一个简洁却又不失优雅的个人博客 ,直到现在互联网上还有大量的基于它的个人博客,也有大量的搭建方法的教程。

然而搭建虽然简单,但是管理和推送文章却相对麻烦不少,在官方的教程里,我们需要经历繁琐的步骤才能发布一篇文章和修改个人空间界面。

使用 Gridea 在 Github Pages 上搭建静态博客 

Gridea 是一个基于 Github Pages 和 Coding Pages 的静态博客管理工具。相较于官方提供的 GitHub Desktop 或在终端使用 Git 的方法管理,Gridea 这款工具则更为的便捷和优雅,它能让作为创作者的你更专注于写作 。

Gridea 官网:https://gridea.dev/

配置

Gridea 最早叫 Hve Notes ,开发者为了更易读和好记,重新命名为 Gridea ,支持 Windows 和 Mac 平台,它的基础界面非常地小清新。

第一次使用它需要你进行应用的初始化配置,才能让他和 Github Pages 连接,配置很简单,可以参考下面的方法进行配置:

  • 域名:Github Pages 对应的域名(例如:https://brick713.github.io 或 http://moyu.com)

  • 仓库:你的静态文件存放的仓库(例如:Brick713.github.io)

  • 分支:你的 Github Pages 对应的分支(例如:master)

  • 用户名:仓库所属用户的用户名(通常就是你的 Github 账号的昵称)

  • 邮箱:Git 推送时使用的邮箱(通常就是你的 Github 账号的邮箱)

  • Token: Git 推送时需要的 Token,用来向 Github 提交构建后的文件 Github personal access tokens

  • CNAME: 可通过这个选项配置你自己的域名(例如:moyu.life)

为了让大家更方便地对应上每个配置具体要填的内容,这里我把 Github Pages 对应的字段也标识出来(为了避免出现一些奇怪的问题,最好按照官方的规范创建 Github Pages)。

这里有个安全上的小 Tip,我们在创建 Personal access tokens 的时候,只需要赋予 repo 的权限即可,这样最大程度减少 Token 出现泄漏后可能造成的安全风险。

美化

配置完成后,先测试远程连接是否正常,没有问题的话 Gridea 就成功和 Github Pages 连接上了。我们再重新回到主界面,点击左下角的同步,就可以将我们的文章同步到个人博客了,试试访问你定义的域名来看看网站的效果。

接下来我们可以自定义一些配置让博客的功能更完善和美观,在配置界面里,我们可以配置博客的评论系统,目前 Gridea 支持 Gitalk 和 Disqus,在这里就不详细介绍如果配置评论系统,有需求的同学可以查看作者给出的小白教程,同样我们也可以修博客的 Favicon 和头像。

Gridea 也提供了博客的主题设置,我们可以选择自己心仪的主题,目前 Gridea 内置了 4 款主题 ,分别是 Notes、Simple、Fly、Paper。

更多主题大家可以参考:https://gridea.dev/themes/

大家也可以根据自身的需求修改网站名称、底部信息等其他内容。

对于那些有自己的理解和审美,且又有一定前端基础的同学来说,我们可以在自定义配置中自行修改相关的样式和配色,包括布局、颜色和自定义样式,同样我们也可以在博客中展示自己的的社交账号,并且使用谷歌统计来记录他人对博客的访问情况,这里也希望作者能结合本土情况,在未来的版本增加百度统计。

写作

Gridea 支持 Markdown 语法并且最新的版本也支持了 Katex 公式,对于一个普通的写作者来说,他能满足最基本的写作需求,在文章的创作界面中,作者为了写作的方便,也提供了一些基础 Markdown 语法的快捷操作,如插入代码块、插入链接、插入图片,改变字体等等,通过点击那些显而易见的图标帮助提升你的写作速度节约你的时间。

在写作界面的右边栏里,我们可以给文章命名一个好记的 URL、选定一个相关主题的标签、修改文章的创建时间或者给我们的文章配一个贴切的封面图。

其中列表中隐藏功能可以让你的文章,在列表中处于一种不被上传的状态,具体使用场景是什么样的呢?

比如,如果你的一篇文章只创作了一半,你不想让他出现在你的 Blog 中,但你又修改了其他的文章的内容需要同步到你的 Github Pages 上,那么你可以先将你的文章在列表中隐藏,这样这篇文章就不会被同步,而已经修改过的文章则会照常同步上去,如图所示:

这个人性化的功能也方便你更好的管理你的文章,可以隐藏掉一些文章却不需要删除他们,对于习惯了自己的 Markdown 编辑器的人来说,我们也可以把创作好的文章移动到 Gridea 的文章目录中,在 Mac OS 的路径是 Document/Gridea/posts,总之我们可以根据自己的喜好来选择写作方式。

使用 Gridea 在 Coding Pages 上搭建静态博客 

在上面我们演示了如何使用 Gridea 在 Github Pages 上搭建静态博客,但是由于 Github 服务器在国外的原因,国内访问还是有点慢。

这里我们就来介绍下如何在 Coding Pages 上搭建的过程。在 Coding Pages 搭建静态博客的方法和 Github Pages 上过程比较类似,为了不重复造轮子,你可以直接参考「使用 Gridea 和 Coding Pages 搭建静态博客」( http://t.cn/AiNo2pKi )  一文。

总结

Gridea 是一款麻雀虽小却五脏俱全的静态博客写作客户端,它能让你告别繁琐的 Git 操作,更加快速方便地管理你的个人博客,同时他恰到好处的主题和实用的配置功能也能一定程度上帮助你美化博客。

如果你的动手能力够强,甚至可以自己动手创作主题。作为一款免费的工具,如果你有任何的建议都可以去官方的项目页面进行反馈,或者加入作者的 Telegram Group 根据目前的版本迭代速度看,作者还是非常勤劳的,期待未来有更多的新鲜功能。

参考文档

https://www.google.com

http://t.cn/AiNoyj9f

http://t.cn/AiNo2pKi


推荐阅读

  • 利用 Oh-My-Zsh 打造你的超级终端

  • 漫谈云计算、虚拟化、容器化

  • 从零开始搭建创业公司后台技术栈

  • 浅谈 TCP 的三次握手和四次挥手

  • 史上最全的 Linux 运维工程师面试问答录

Gridea 让你更方便地用 Github Pages 和 Coding Pages 搭建静态博客相关推荐

  1. [Hexo]Hexo+github搭建静态博客

    1.简介 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章(经常玩CSDN上的人都知道),在几秒内,即可利用靓丽的主题生成静态网页.通过Hexo我 ...

  2. 使用Hexo在Github搭建静态博客

    为什么80%的码农都做不了架构师?>>>    1. 环境环境 1.1 安装Git 请参考[1] 1.2 安装node.js 下载:http://nodejs.org/downloa ...

  3. 用 GitHub 搭建静态博客太繁琐?用这个小工具实现「傻瓜式」发布!

    公众号关注 「运维之美」 设为「星标」,每天带你玩转 Linux ! 除了作为程序员们分享与协作的平台,GitHub 同时也是一个绝佳的知识分享平台.尤其近几年静态博客逐渐兴起,借助 GitHub 的 ...

  4. 使用halo和hexo+github两种方式免费搭建个人博客网站

    hexo 简介 Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Heroku上,是搭建博客的首选框架. hexo搭建步骤 安装Git 安装 ...

  5. umi脚手架搭建的项目_15天零成本搭建静态博客,托管于Github Page

    博客地址 技术栈概览 前台:Umi(路由) + Antd(视图) + TypeScript(增加项目可维护性以及规范性) 后台:Umi(路由) + Antd(视图) + TypeScript(增加项目 ...

  6. Vue + VueRouter + Vuex + Axios 抓取 GitHub 上的 Issues 来搭建个人博客站点

    项目背景 刚接触 GitHub 的时候就开始在仓库 bingoogolapple.github.io 里创建 Issues 来记录学习笔记,那时候我还不知道有 GitHub Pages,后来了解到了可 ...

  7. 利用hexo和github搭建静态博客(一)

    在搜素文章时无意间发现一篇很漂亮的博客,一看时个人博客,自己也就想创建一个属于自己的博客,初步完成后就写下此文章便于日后查询. 本文是利用hexo在GitHub上建立的静态博客. 主要有三个步骤: 下 ...

  8. 使用Hexo+Github+腾讯云+Netlify搭建个人博客

    安装Hexo 要使用Hexo必须先安装Git和Node.js.本文是在Ubuntu20环境下进行操作的.使用其它系统也可以将下面的操作作为参考. 安装Git sudo apt-get install ...

  9. github pages + Hexo + 域名绑定搭建个人博客增强版

    概述 前面我们用github pages + Hexo 搭建了一个简单版的个人博客系统,但是里面的内容单调,很多功能不够完善,所以我们需要对yelle 的主题进行优化和完善.基本搭建请访问:http: ...

最新文章

  1. dell 如何给raid分区_什么是RAID技术?
  2. c语言折半查找递归程序,C语言数据结构中二分查找递归非递归实现并分析
  3. Fragment专辑(三):Fragment的添加(add)和替换(replace)的不同
  4. caffe学习笔记18-image1000test200数据集分类与检索完整过程
  5. dart系列之:数学什么的就是小意思,看我dart如何玩转它
  6. 线性代数问卷调查反馈——Find The Determinant III,Takahashi‘s Basics in Education and Learning
  7. 递归判断一个数是否递增
  8. maven多模块项目,多web合并项目使用心得
  9. 接口数组 java_java 数组和集合
  10. Latex:插入数学公式
  11. ros各级授权的区别
  12. 平面坐标转大地坐标(经纬度)
  13. python识别颜色验证码_用Python识别验证码
  14. 帝国cms生成静态php,帝国cms自动生成手机版静态插件
  15. 百度推广年终总结,百度竞价年终总结参考
  16. [HEOI2013] 钙铁锌硒维生素
  17. 知云文献翻译打不开_知云文献翻译 for mac v1.0.1
  18. 特斯拉Model3车主称无法开启;传高通开发首款笔记本处理器;Dfinity挑战亚马逊 | 雷锋早报...
  19. 微型计算机2018年还出增刊吗,过刊浏览【2018年增刊】
  20. 报错:GET http://fonts.useso.com/css?family=Open+Sans:300,400,600,700amp;lang=en 0 () 处理

热门文章

  1. Sorl环境搭建与mysql表导入数据
  2. ConnectionError的终极解决办法
  3. 苹果底层开发语言C语言,IOS开发语言Object-C与C语言之间的对比
  4. 知识图谱—知识推理综述(一)
  5. AI入门之神经网络(9)基于c++、opencv的dnn模块的视频手势识别
  6. 软件高级项目管理师计算题公式和十大过程组总结备忘
  7. pytorch实现图像上采样的几种方式
  8. 如何成为一名合格的php程序员
  9. verilog中的timescale用法(转)
  10. 基于参与意愿的物流联盟资源优化配置模型