利用github page和jekyll搭建个人博客网站
本人根据这篇博客https://blog.csdn.net/KNIGH_YUN/article/details/79774344所描述的步骤搭建了属于自己的博客网站,现在
在这里对博客搭建的过程进行复述和总结。
前言
说到搭建博客网站,有些同学可能会想到要首先要搭建一个服务器,还要购买域名,还要写前后端代码等等,不仅过程繁琐,而且要花费一定金钱。然而,利用一些工具,可以搭建一个永久的能访问的博客网站(这里指的是静态的博客网站)并不是一件困难的事,并且还不用担心服务器、域名等问题。这些工具就是github page和jekyll。
使用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的下载安装
- 安装ruby:因为jekyll依赖于ruby,所以必须先安装ruby,前往https://www.ruby-lang.org/en/downloads/根据自己的系统下载安装ruby。
- 安装gem:安装了ruby之后,默认会安装gem,可以在命令行里测试是否已经安装成功,如下图。如果没有安装gem,可以前往此处https://rubygems.org/pages/download下载安装
- 安装jekyll:在命令行中输入
gem install jekyll
,jekyll安装完成后,还不能使用,还要安装一些组件。此时在命令行中输入gem install bundler
,安装完成后,再在命令行中输入bundle install
。这些步骤做完之后,jekyll就可以使用了。
jekyll的使用
关于Jekyll的使用,可以前往Jekyll官网查看,这里给出简单的使用方法。
- 利用命令行进入一个空文件夹,然后执行
jekyll new my-first-website
,然后jekyll就生成一个my-first-website
文件夹,里面的内容是这样的:
- 在命令行中进入该文件夹,执行
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上
-
复制文件:之前的步骤我们利用git工具将github上一个名为
username.github.io
的空仓库克隆到了本地文件夹,那么我们将LessOrMore
主题文件夹里面的全部文件复制到那个本地文件夹里。(注意,是复制LessOrMore
主题文件夹里面的全部文件,而不是LessOrMore
主题文件夹),即以下文件
-
修改_config.yml文件:注意,该主题的
README.md
文件里面有些一些注意事项,即我们要做一个修改,把_config.yml
文件里的baseurl属性值修改为空,如下图所示:
-
提交到github:利用git工具执行
git add -A
和git commit -m "xxx"
命令,然后再执行git push
命令,就能将这些文件提交到自己的github账号上,如下图
-
浏览器查看网站:在浏览器中输入
https://username.github.io/
,把username修改为自己的github用户名,即可查看网站内容。
如何更新博客
这一点在LessOrMore
的README.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}
我是正文。我是正文。我是正文。我是正文。我是正文。我是正文。