利用github page免费搭建个人博客

最近趁着有点时间,完成了一件自己一直想做的事情,搭建一个个人博客!下面记录一下大致流程,本篇内容适合小白用户,大神可选择性跳过。

最终成果可见:xkw168.github.io


GitHub新建仓库

1、点击右上角“➕”,新建仓库

在这里插入图片描述

2、仓库名为github用户名.github.io,设置为共有,使用README初始化

在这里插入图片描述

3、新建仓库之后,点击进入Setting

在这里插入图片描述

4、一直向下划,直到github pages,字段含义如图

在这里插入图片描述


添加模板

推荐一个jekyll的模板网站

1、找到喜欢的模板,整个下载下来(可以先预览一下)

在这里插入图片描述

2、利用git将仓库代码克隆到本地

在github仓库首页,点击clone and download,复制地址(利用git)或者点击Open in Desktop(利用Github Desktop),下面只介绍用git命令行的方法,Github Desktop的方法请自行google。

在这里插入图片描述

cd /目标文件夹
git clone “刚刚复制的地址”

3、复制模板代码到本地仓库

ctrl+c, ctrl+v

4、提交并上传

git add --all
git commit -am "提交信息"
git push

5、测试结果

成果提交代码之后,回到github的该仓库,检查是否已经出现了最新的文件,并访问github用户名.github.io网址进行测试
在这里插入图片描述


模板使用

初步搭建起个人博客网站,接下来就要修改模板,以符合自己的需求。
注:以下内容以LessOrMore模板为例,节选自其README文件,有删改

配置

项目需要配置的只有一个文件_config.yml,打开之后按照如下进行配置。

特别注意baseurl的配置。如果是***.github.io项目,不修改为空’'的话,会导致JS,CSS等静态资源无法找到的错误

name: 博客名称
email: 邮箱地址
author: 作者名
url: 个人网站
# baseurl修改为项目名,如果项目是'***.github.io',则设置为空''
baseurl: "/LessOrMore"
resume_site: 个人简历网站
github: github地址
github_username: github用户名称
# 请到百度统计官网[https://tongji.baidu.com/](https://tongji.baidu.com/)申请自己的网站ID并在此处替换,否则将无法正常统计访问量
baidu_analysis: 94be4b0f9fc5d94cc0d0415ea6761ae9
# 请到revolvermaps [http://www.revolvermaps.com/?target=setupgl](http://www.revolvermaps.com/?target=setupgl)申请自己的网站ID并在此处替换,否则将无法正常统计访问量
revolvermaps: 5ytn1ssq6za

如何写文章

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}


我是正文。我是正文。我是正文。我是正文。我是正文。我是正文。

执行

jekyll server

效果

打开浏览器并输入URLhttp://localhost:4000/,回车。

关键文件介绍

  • _includes/header.html —— 控制网页抬头(页眉)
  • _includes/footer.html —— 控制网页页脚
  • _includes/lefttree.html —— 控制侧边栏(那个地图)
  • styles/images/favicon.jpg —— 浏览器页面的那个小图标
  • styles/images/logo.jpg —— 博客左上角的LOGO

欢迎大家来我的个人博客网站观看原文

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值