利用github page和jekyll搭建个人博客网站(一)

本人根据这篇博客https://blog.csdn.net/KNIGH_YUN/article/details/79774344所描述的步骤搭建了属于自己的博客网站,现在
在这里对博客搭建的过程进行复述和总结。

前言

说到搭建博客网站,有些同学可能会想到要首先要搭建一个服务器,还要购买域名,还要写前后端代码等等,不仅过程繁琐,而且要花费一定金钱。然而,利用一些工具,可以搭建一个永久的能访问的博客网站(这里指的是静态的博客网站)并不是一件困难的事,并且还不用担心服务器、域名等问题。这些工具就是github pagejekyll

使用github page

注册github账号

首先前往github官网注册账号,这个步骤比较简单。

新建一个仓库

在个人主页上,点击左侧栏的New按钮,如下图所示
在这里插入图片描述

进入新建页面,将仓库的repository name设置为username.github.io,其中username替换为自己的用户名,如下图所示。之所以这样子设置,是因为github只向每个人提供了一个github page,而要使用这个github page,就将自己的某个仓库的repository name设置成username.github.io的形式,这样该仓库里的内容就可以变成成网页内容,进入https://username.github.io就可以查看。
在这里插入图片描述

利用git工具克隆到本地

在前面的步骤中,我们创建了一个仓库,并配置为github page,但里面还什么内容都没有,我们需要利用git工具的git clone命令将该仓库克隆到本地文件夹,然后在文件夹里添加内容,再提交到github的个人仓库上。git工具的使用请参考这篇博客https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

使用Jekyll

jekyll的下载安装

  1. 安装ruby:因为jekyll依赖于ruby,所以必须先安装ruby,前往https://www.ruby-lang.org/en/downloads/根据自己的系统下载安装ruby。
  2. 安装gem:安装了ruby之后,默认会安装gem,可以在命令行里测试是否已经安装成功,如下图。如果没有安装gem,可以前往此处https://rubygems.org/pages/download下载安装
    在这里插入图片描述
  3. 安装jekyll:在命令行中输入gem install jekyll,jekyll安装完成后,还不能使用,还要安装一些组件。此时在命令行中输入gem install bundler,安装完成后,再在命令行中输入bundle install。这些步骤做完之后,jekyll就可以使用了。

jekyll的使用

关于Jekyll的使用,可以前往Jekyll官网查看,这里给出简单的使用方法。

  1. 利用命令行进入一个空文件夹,然后执行jekyll new my-first-website,然后jekyll就生成一个my-first-website文件夹,里面的内容是这样的:
    在这里插入图片描述
  2. 在命令行中进入该文件夹,执行jekyll server,然后再浏览器中打开地址http://127.0.0.1:4000/,就可以看到网页的内容在这里插入图片描述

更换jekyll主题

寻找jekyll主题

前面可以看到,Jekyll默认生成的网页主题单调,我们可以换一个更好的主题。前往jekyll theme网站寻找自己喜欢的主题,我是用的主题是Less-Or-More。点击下图中的dowload按钮即可下载。
在这里插入图片描述

使用jekyll主题

将刚刚下载好的主题压缩包解压,然后在命令行中进入LessOrMore-master文件夹,执行jekyll server命令,然后再浏览器中打开地址http://127.0.0.1:4000/LessOrMore/,即可看到网站内容。那么,使用了这个主题之后,之前利用jekyll new my-first-website生成的文件夹及里面的内容就可以删掉不要了。
在这里插入图片描述

将本地网站内容部署到github上

  1. 复制文件:之前的步骤我们利用git工具将github上一个名为username.github.io的空仓库克隆到了本地文件夹,那么我们将LessOrMore主题文件夹里面的全部文件复制到那个本地文件夹里。(注意,是复制LessOrMore主题文件夹里面的全部文件,而不是LessOrMore主题文件夹),即以下文件
    在这里插入图片描述

  2. 修改_config.yml文件:注意,该主题的README.md文件里面有些一些注意事项,即我们要做一个修改,把_config.yml文件里的baseurl属性值修改为空,如下图所示:
    在这里插入图片描述

  3. 提交到github:利用git工具执行git add -Agit commit -m "xxx"命令,然后再执行git push命令,就能将这些文件提交到自己的github账号上,如下图
    在这里插入图片描述

  4. 浏览器查看网站:在浏览器中输入https://username.github.io/,把username修改为自己的github用户名,即可查看网站内容。

如何更新博客

这一点在LessOrMoreREADME.md文件里面有提到,我把那段文字复制下来。

LessOrMore/_posts目录下新建一个文件,可以创建文件夹并在文件夹中添加文件,方便维护。在新建文件中粘贴如下信息,并修改以下的titile,date,categories,tag的相关信息,添加* content {:toc}为目录相关信息,在进行正文书写前需要在目录和正文之间输入至少2行空行。然后按照正常的Markdown语法书写正文。

---
layout: post
#标题配置
title:  标题
#时间配置
date:   2016-08-27 01:08:00 +0800
#大类配置
categories: document
#小类配置
tag: 教程
---

* content
{:toc}


我是正文。我是正文。我是正文。我是正文。我是正文。我是正文。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值