零基础Gridea+GitHub Pages搭建个人博客

2022-06-14 Tue Views 建站 | 教程方法1078字4 min read
个人建站经验分享

什么是Gridea 和 Github pages


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

jlKPUS.jpg

GithubGridea 主页示例网站

特性👇

  • 📝 你可以使用最酷的 Markdown 语法,进行快速创作
  • 🌉 你可以给文章配上精美的封面图和在文章任意位置插入图片
  • 🏷️ 你可以对文章进行标签分组
  • 📋 你可以自定义菜单,甚至可以创建外部链接菜单
  • 💻 你可以在 Windows,MacOS 或 Linux 设备上使用此客户端
  • 🌎 你可以使用 𝖦𝗂𝗍𝗁𝗎𝖻 𝖯𝖺𝗀𝖾𝗌 或 Coding Pages 向世界展示,未来将支持更多平台
  • 💬 你可以进行简单的配置,接入 Gitalk 或 DisqusJS 评论系统
  • 🇬🇧 你可以使用中文简体或英语
  • 🌁 你可以任意使用应用内默认主题或任意第三方主题,强大的主题自定义能力
  • 🖥 你可以自定义源文件夹,利用 OneDrive、百度网盘、iCloud、Dropbox 等进行多设备同步
  • 🌱 当然 Gridea 还很年轻,有很多不足,但请相信,它会不停向前 🏃


GitHub Pages:一种静态站点托管服务

GitHub Pages 直接从 GitHub 上的存储库获取 HTML、CSS 和 JavaScript 文件,可选择通过构建过程运行文件,然后发布网站

优势👇

  • 部署方便:Github pages 集成在 Github 中,随着代码更新自动重新部署,使用非常方便。
  • 零成本:免费提供如 http://username.github.io 的域名,免费的静态网站服务器。
  • 无数量限制:github pages 没有使用的数量限制,每一个 github repository 都可以部署为一个静态网站。
  • 可以绑定自己的域名



Gridea+GitHub Pages搭建个人博客

手把手配置,适合小白、纯小白、超级小白。


注册Github并创建仓库

  1. 邮箱创建 GitHub 账号,登录。

    GitHub

    img
  2. 点右上角 + 号新建一个仓库,名为xxx.github.io

    xxx为你的 GitHub 用户名

    img
  3. 创建成功后,点击右上角“Settings”进入设置主题样式。选择Pages->Choose a theme

    image-20220614152705721
  4. 随便挑一个Github自带的主题,后面可以用Gridea改,点击Selece themes

    image-20220614153032794
  5. 设置完毕后,GitHub Pages就会生成网站了。

    访问你刚才填写的地址xxx.GitHub.io(xxx为你的用户名)就能打开了。

  6. 返回点击右上角 头像 进入账户设置: Settings->Developer settings->Personal access tokens->生成新的token
    (需要先验证一下账户密码)

    img

    img

    image-20220614145434256

  7. 勾选上 repo 的相关权限,点击下方的绿色按钮Generate token即可生成一个 Token(即令牌)。如下图:

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

    img

安装并配置Gridea

  1. 进入Gridea 主页 下载安装Gridea

  2. Gridea 进行远程设置

    img
  3. 点击 检测远程链接 ,检查一下配置。可能成功也可能失败。
    失败请先检查一下对应的各个部分是否输入正确(或者试试将分支main改为master)。

    若配置得当但一直无法链接,则应该是网络问题,换个时间段或有条件可以种个番茄。

  4. 远程链接成功,那么恭喜你可以进入下一步主题配置与同步。

    Gridea中有4个默认主题,你也可以自行寻找或在 这里 下载你喜欢的主题文件夹并添加到Gridea内。
    注意事项请见 这里最后一段安放好主题文件夹后记得重启软件。

    image-20220614155242657
  5. 自定义配置你的主题,都配置完毕后点击 Gridea 左下角的同步按钮。

    初次部署等待几分钟(Gridea正将配置文件上传到刚建的Github仓库)。
    显示 同步成功 之后可以点击预览查看页面效果。
    再去浏览器访问你的域名(即xxx.github.io,xxx为你的用户名)。

  6. 创建你自己的菜单、标签和文章吧!文章样式需要 Markdown 语法,请自行网上寻找教程,半小时即可上手。

    • 支持插入图片、表情、查看字数、设置文章URL、封面、标签、置顶等。
    • 写完文章可以点击一下预览,没问题后,点右上角的保存,点击同步按钮发布。
    image-20220614162121637

开启评论功能

详见增加底部评论

最后,享受你的博客之旅吧

EOF