使用Jekyll和github搭建个人博客

一、下载Git for windows和Ruby并安装

二、Jekyll环境配置

  • Jekyll的中文网:http://jekyllcn.com
  • Jekyll的官网:https://jekyllrb.com/
  • 在一个空文件夹中右键选择打开Git Bash Here,然后依次按以下命令执行,可能会比较慢,因为要下载安装,所以要耐心等待:
$ gem install jekyll bundler
$ jekyll new blog
$ cd blog
$ bundle install
$ bundle exec jekyll serve
  • 执行$ bundle exec jekyll serve后,打开浏览器输入http://127.0.0.1:4000/,就可以看到如下图:
    使用Jekyll和github搭建个人博客_第1张图片
  • 默认使用的是minima主题

三、使用Github Pages服务

  • 创建仓库,Repository name填写username.github.io,username是你的github用户名,其它的默认。
    使用Jekyll和github搭建个人博客_第2张图片
  • 进入username.github.io仓库,点击Settings进入选择一个模板主题。
    使用Jekyll和github搭建个人博客_第3张图片
    使用Jekyll和github搭建个人博客_第4张图片
  • 在浏览器中输入https://username.github.io/ ,可以看到如下图。
    使用Jekyll和github搭建个人博客_第5张图片

四、部署我们电脑上的blog

  • 在前面那个空文件夹中再次右键选择打开Git Bash Here,git clone我们github上的仓库。如git clone我的$ git clone https://github.com/lcfu1/lcfu1.github.io.git
  • 打开刚刚下载的username.github.io文件夹,把我们电脑上的blog复制粘贴到这个文件夹上,相同的就选择替换,执行$ jekyll serve,打开浏览器输入http://127.0.0.1:4000/,同样可以看到如下图:
    使用Jekyll和github搭建个人博客_第6张图片
  • 依次执行以下命令,如果不懂Git,可以找一下相关文章看一下,我也写了一篇关于git的,可以去找来看一下。
$ git status       //检查本地项目的状态
$ git add .        //添加全部文件到追踪列表
$ git commit -m "first commit"       //提交到本地仓库
$ git push         //推送到github
  • 在浏览器中输入https://username.github.io/,就可以看到如下图,以前的模板改变了,变的跟我们在电脑上配置的一样。
    使用Jekyll和github搭建个人博客_第7张图片

五、修改我们的博客信息和写博客

  • _config.yml 按自己实际情况修改。
  • 我都是用Markdown写博客的,你也可以用Textile和HTML。以YEAR-MONTH-DAY-title.MARKUP格式命名并放到_posts中。
  • 然后依次执行
$ git status       //检查本地项目的状态
$ git add .        //添加全部文件到追踪列表
$ git commit -m "first commit"       //提交到本地仓库
$ git push         //推送到github
  • 过一会儿在浏览器中输入https://username.github.io/就可以看到你的修改信息和博客了。

六、绑定域名

  • 到github上打开我们的username.github.io仓库,点击Settings进入,在下图圈圈中输入你的域名并保存,但是前提需要你的域名已经解析并添加了你的博客github域名。
    使用Jekyll和github搭建个人博客_第8张图片
  • 购买域名,然后到控制台按下图做类似修改进行域名解析。
    使用Jekyll和github搭建个人博客_第9张图片

七、修改主题

  • 主题
  • 选择一个你喜欢的主题,这里我选的一个Jasper2主题,git clone 到一个空文件夹下,依次执行以下命令,
$ git clone https://github.com/myJekyll/jasper2.git
$ cd jasper2
$ gem install jekyll bundler
$ bundle install
$ bundle exec jekyll serve
  • 执行完$ bundle exec jekyll serve,打开浏览器输入http://127.0.0.1:4000/,可以看到如下图:
    使用Jekyll和github搭建个人博客_第10张图片
  • 可以把Jasper2文件夹下的文件复制到你的blog文件夹下,相同的就选择替换,右键选择打开Git Bash Here,$ bundle exec jekyll serve,然后再打开浏览器输入http://127.0.0.1:4000/,可以看到主题变为Jasper2主题了。$ bundle exec jekyll serve后可能会提示一些error,这就需要你后面的修改了。
  • 修改和写博客后可以再次推送到github上。
$ git status       //检查本地项目的状态
$ git add .        //添加全部文件到追踪列表
$ git commit -m "first commit"       
//提交到本地仓库
$ git push         //推送到github

八、结束

  • 到这里你的博客就完成差不多了,后面看个人需要可以添加一些功能。
  • 如果遇到问题,可以自己摸索或谷歌一下,也可以找相关博客文章文档查看。
  • 当然也可以在简书上评论私信我,我知道的尽量帮你解决难题。

你可能感兴趣的:(博客)