个人博客代码_Jekyll + Github Pages 搭建个人免费博客

dee960f8bf7718be3fe56e30d2f1f74f.png

今天亲手通过 Jekyll 搭建了一套免费博客,搭建步骤其实超级简单。你不需要购买域名,也不需要购买服务器,就可以轻松拥有你自己的博客。 Jekyll 的核心是一个文本转换引擎。它的方便之处在于支持多种文本标记语言:Markdown,Textile,HTML,然后 Jekyll 就会帮你加入你选择主题的样式的布局中。最终生成你自己的静态博客网站。

博客搭建步骤

1.安装环境

1.1 安装Ruby

官网地址:https://rubyinstaller.org/downloads/ 根据自己的需要下载不同版本,直接点击“下一步”就可轻松安装成功。

1.2 安装RubyGems

官网地址:https://rubygems.org/pages/download 据自己的需要下载不同版本。

解压压缩文件到本地。在 CMD 命令窗口执行如下命令:

1.3 安装Jekyll

以上两个步骤操作完成后,在 CMD 窗口执行如下命令安装Jekyll:

2.本地搭建博客

2.1 项目启动

项目启动日志如下:

893a8c51d96f67d8c07cc9ee6b389212.png

在浏览器访问:http://localhost:4000/

2.2 添加 MarkDown 文档

在项目根目录下的 _posts 目录创建 markdown 文档。这里注意 md 文档命名要添加 “yyyy-mm-dd”的前缀。 例如:2019-10-11-5分钟搭建博客.md

2.3 部署代码到 Github

2.3.1 创建 Github 账号

注:这里我使用的 Github 托管静态博客的,你也可以选择把代码托管到 码云 或者其他平台上。 没有 Github 账号的朋友可以注册一个账号,有账号的朋友可跳过。

2.3.2 创建代码仓库

创建一个名称为 ‘账号名称.github.io’。例如:我的账号名是helloRestlessMan,仓库名就是 helloRestlessMan.github.io

2.3.3 部署代码到Github

在我们创建的博客的目录找到 _site 目录,将 _site 目录下的所有文件都提交到Github上。

aee872d0f4e3b5f5b549fd7b1feb4759.png

操作步骤:

2.4部署代码到码云(Gitee)

创建与账号名相同的仓库,如下图:

a5e371a5b2712278044d1d618e69241f.png

提交代码到 Gitee 上,再开启 Gitee Pages 服务即可。

ecbeb4022f9cc9f0ece0446e39859e43.png

最后就可以访问了。http://huaairen.gitee.io/

2.5 访问自己的博客网站

效果如下图:

4d0b518ef2b94e64210f3044683770d5.png

2.6 切换主题

我这里下载的主题是 mundana-jekyll-theme,

主题下载地址:http://jekyllthemes.org/themes/mundana-jekyll-theme/

注:可能存在兼容性问题,使用下面的命令

我的博客地址:https://hellorestlessman.github.io/ 项目运行效果:

b8ac9724a4f7776f617dbd60c0b0f5e0.png

丰富的主题自由选择

这里推荐两款 Jekyll 主题的网站:

1.官方主题网站:http://jekyllthemes.org/

2.Github 上的博客模板:https://github.com/jekyll/jekyll/wiki/Sites

文章推荐

1. Github + hexo matery 主题搭建免费博客

参考资料

1.使用 github + jekyll 搭建个人博客 https://www.cnblogs.com/wangfupeng1988/p/5702324.html

2.Github + Jekyll 搭建个人博客 https://blog.csdn.net/White_Idiot/article/details/69397224

3.Jekyll主题收藏 https://blog.csdn.net/garfielder007/article/details/82875394

4.Gitee + Jekyll 搭建博客 https://gitee.com/ckjcode/ckjcode

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值