无服务器+域名也能搭建个人博客?真的,而且很快

基于Gitee快速搭建个人博客

  • 一. 背景
    • 个人搭建博客也是有成本的
    • 关于 jekyll
  • 二. 部署
    • 拉取代码
    • 修改和上传配置
      • _config.yml
      • locale.yml
    • 构建和访问(gitee部署项目)
  • 三. 使用
    • 上传博客
    • 上传图片
  • 四. 总结

一. 背景

作为技术人, 相信大多数人都有记笔记的习惯.

记笔记的好处我就不多说了, 而且如果你觉得自己笔记记得还不错, 或许会选择将笔记发布到博客平台上去.

我们平时工作由于专业的原因, 会接触到很多平台型博客: 列如: CSDN, 博客园, 简书, 知乎, 掘金等等.

他们的优点有很多, 比如说: 功能强大, 自带图片服务器, 社交属性强, 潜在粉丝/受众多等等.

但是平台化的博客会在一定程度低个人/团队的核心竞争力. 因此很多大佬都会选择使用个人博客或者公众号来宣传个人品牌

比较好的博客有: 柒’s Blog, 好好学Java 等

个人搭建博客也是有成本的

平时我们搭建博客, 需要准备很多步骤. 大致流程为: 购买服务器->申请域名->域名审核和网站审核->选择博客系统->手动修改并部署博客系统.

其中每一步都会耗费许多的时间和精力甚至是金钱去做一些事情. 我相信很多人都不太愿意去搞这些东西的.
而最近发现的一个超级方便且简单个人博客系统——— jekyll

关于 jekyll

jekyll 是一个简单的免费的Blog生成工具,类似 WordPress. 官方网站
但是和 WordPress 不同的是,jekyll 是一个生成静态网页的工具,不需要数据库支持.
并且可以配合第三方服务, 例如 Disqus. 最关键的是 jekyll 可以免费部署在 Gitee/Github上,并且支持一件构建. 且无需我们手动申请域名

话不多说我们下面就开始使用吧~~~

二. 部署

基于 jekyll 搭建的个人博客可以部署在 Gitee/GitHub 上, 我们这里部署主要以 Gitee 为例

原因我想大家很清楚: Gitee(码云) 他快啊. 说到这里, 突然想起一句台词: 天下武功, 唯快不破.

如果之前没有申请Gitee的童鞋, 可以点击 这里 进行注册. 注册成功后, 就可以开启我们的个人博客搭建之路了

搭建步骤可以分为: 拉取代码->修改和上传配置->构建和访问. 下面我将按照该步骤去介绍如何快速搭建基于 Gitee+ jekyll 的个人博客

拉取代码

  1. 仓库地址 https://gitee.com/TimePause/blog

  2. 将该仓库复制一份到自己仓库
    在仓库右上角, 点击fork 即可将代码复制到自己的仓库; 还有一种思路就是直接将代码下载, 修改好之后上传至自己新建的仓库, 这里我以第一种方式为例

    无服务器+域名也能搭建个人博客?真的,而且很快_第1张图片

  3. 下载自己仓库的代码
    这里可以直接在命令行, 利用 git clone 自己仓库地址进行下载, 也可以通过idea/pycharm/vscode 等IDE工具来下载.
    这里以IDEA的方式下载仓库代码为例: 鼠标点击 File->Close Project

    无服务器+域名也能搭建个人博客?真的,而且很快_第2张图片

    退当前出项目后选择 Get from VCS
    无服务器+域名也能搭建个人博客?真的,而且很快_第3张图片
    将自己仓库地址复制至上面即可
    无服务器+域名也能搭建个人博客?真的,而且很快_第4张图片

修改和上传配置

_config.yml

通过 _config.yml 来修改基础配置

  1. 进入根目录下的 _config.yml

    无服务器+域名也能搭建个人博客?真的,而且很快_第5张图片

  2. 这里主要修改了以下信息, 如下图所示:

    • url : Gitee主页地址
    • baseurl: 博客所在仓库的相对地址
    • description: 博客简介
    • text_skin: 主题颜色
    • highlight_theme: 字体高亮主题
      无服务器+域名也能搭建个人博客?真的,而且很快_第6张图片

ps:

  1. url 和 baseurl 这两个参数可以通过 gitee 的管理页查看
    无服务器+域名也能搭建个人博客?真的,而且很快_第7张图片

  2. 第一次修改后, 后续再次修改 text_skin和 highlight_theme时, 需要关闭网页, 然后清理缓存, 然后刷新才能访问到.
    无服务器+域名也能搭建个人博客?真的,而且很快_第8张图片

locale.yml

  1. 修改版权时间信息 (这里如果拉取的是我的代码, 就不用改了, 因为我已经改过了~~~)
    这里本地化配置有很多种语言供我们选择, 但如果我们需要显示简体中文, 那么只要关注下面的配置即可
    无服务器+域名也能搭建个人博客?真的,而且很快_第9张图片
    顺便说一句: 这里修改的本地化配置可以在 _config.yml 来指定
    image-20220709130111849

  2. 提交并推送代码到指定仓库
    无服务器+域名也能搭建个人博客?真的,而且很快_第10张图片

构建和访问(gitee部署项目)

  1. 点击Gitee Pages
    无服务器+域名也能搭建个人博客?真的,而且很快_第11张图片

  2. 身份认证

    经过第1步操作之后, 我们会发现如果之前没有实名制认证, 则需要进行认证(这个才是最费时间的环节)
    无服务器+域名也能搭建个人博客?真的,而且很快_第12张图片

    填写后, 还需要上传身份证照片等相关信息

    无服务器+域名也能搭建个人博客?真的,而且很快_第13张图片

  3. 构建和部署
    一般在工作日时, 审核时间大概是一天左右(周末不清楚, 可能会晚些)
    审核成功之后, 再次点击 Gitee Pages, 会出现下面窗口
    无服务器+域名也能搭建个人博客?真的,而且很快_第14张图片
    部署成功后, 点击地址即可
    无服务器+域名也能搭建个人博客?真的,而且很快_第15张图片
    点击上图超链接即可访问
    无服务器+域名也能搭建个人博客?真的,而且很快_第16张图片

三. 使用

上传博客

  1. 将 .md (markdown) 格式的文件上传至 项目根目录下 的 _post 目录下

    无服务器+域名也能搭建个人博客?真的,而且很快_第17张图片

上传图片

  1. 我们一般会在博客中上传图片, 因此我们需要将图片资源手动放到, 根目录/asserts/imgs/ 下.
    图片的访问路径则是: 个人博客网站地址/图片相对目录. 例如: https://timepause.gitee.io/blog/assets/imgs/chy/20220709/image-20220709134159346.png
    无服务器+域名也能搭建个人博客?真的,而且很快_第18张图片

ps : 关于图片的存放问题有两点要说的是

  1. 我们可以以日期为目录, 然后按日期来存放. 而且这种方式因为目录层级少, 图片可以直接显示
    无服务器+域名也能搭建个人博客?真的,而且很快_第19张图片

  2. 如果是团队博客的话, 可以以自己名字+时间为目录存放图片
    无服务器+域名也能搭建个人博客?真的,而且很快_第20张图片

四. 总结

本文主要介绍了如何根据 Gitee+jekyll 来快速搭建个人博客. 并简单的介绍了其配置, 使用和部署方式.
其他功能欢迎大家通过官网介绍, 自己尝试哦. 如果觉得不错, 也请三连支持下哦 !


你可能感兴趣的:(#,技巧合集,#,经验心得,默认归档,程序人生,个人博客,gitee)