基于Jekyll和GitHub Pages搭建个人博客

本文介绍如何利用Jekyll创建一个静态站点,并托管到GitHub Pages上。

JeKyll

JeKyll是一个基于Ruby的博客类静态网站生成器。

Jekyll是一个简单,可扩展的静态站点生成器。您可以使用自己喜欢的标记语言编写文本,然后通过布局来创建静态网站。在整个过程中,您可以调整网站URL的显示方式,布局中显示的数据等

基于JeKyll创建静态网站

  1. 安装Ruby开发环境 (以macOS 为例macOS Mojave 10.14 可省略以下安装步骤

    1.1 安装Homebrew和Ruby

    1
    2
    3
    4
    
    # Install Homebrew
    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    
    brew install ruby
    

    1.2 导出Ruby环境变量

    1
    
    echo 'export PATH=/usr/local/opt/ruby/bin:$PATH' >> ~/.zshrc
    

    1.3 检查Ruby是否安装成功

    1
    2
    3
    4
    
    which ruby
    /usr/local/opt/ruby/bin/ruby
    ruby -v
    ruby 2.6.0p0 (2018-12-25 revision 66547) [x86_64-darwin18]
    
  2. 安装打包器和jekyll

    1
    
    gem install --user-install bundler jekyll
    
  3. 创建一个新的Jekyll网站

    1
    
    jekyll new myblog
    

    若提示 command not found: jekyll ,需要把gem路径配置到PATH里面

  4. 编译网站并启动本地服务

    1
    2
    
    cd myblog
    bundle exec jekyll serve
    

    访问http://localhost:4000/查看效果

GitHub Pages

GitHub Pages是直接从GitHub仓库托管的个人网站和项目网站。

基于GitHub Pages托管网站

  1. 创建一个仓库
    前往GitHUb创建一个新的仓库,仓库名称为username.github.io,其中username是你的GitHub用户名或者组织名称。

  2. 克隆仓库
    把步骤一创建的仓库克隆到本地。

    1
    2
    
    git clone https://github.com/username/username.github.io
    
  3. 创建第一个页面
    进入项目目录,新建一个index.html的文件。

    1
    2
    3
    
    cd username.github.io
    echo "Hello World" > index.html
    
  4. 推送到远程仓库
    增加、提交和推送你的更改

    1
    2
    3
    4
    
    git add --all
    git commit -m "初始提交"
    git push -u origin master
    
  5. 你已经成功完成
    访问https://username.github.io查看效果

整合部署

将Jekyll生成的静态网站复制到username.github.io仓库并提交推送到GitHub

1
cp -r myblog/** username.github.io

后面直接修改仓库文件,用Jekyll编译提交即可。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值