搭建个人博客（基础）

前端博客 hexo github

hexo

发布日期: 2019-03-20

文章字数: 954

阅读时长: 3 分

阅读次数:

如何搭建自己的github.io博客

github.io是基于github的仓库进行管理，据本人浅显地理解就是我们借用了github的仓库管理器来充当个人的服务器（这个服务器是免费的嘿嘿），下面我将根据来柏荧的博客来搭建属于自己的github.io的个人博客。

1.注册一个github账号

作为全球最大的同性交友网站，github值得你拥有（唉，但是全英文的界面对我这种菜菜的人就很不友好了）。
话不多说，上图

github注册页面

在这里插入图片描述

**2.拉取博客模板

注册结束之后点击此链接（这里因为我也是刚刚fork此位大佬的模板，所以这里直接奉上他的仓库链接）
在这里插入图片描述

点击fork把此模板代码拉取到自己的账号下

修改仓库名，绑定个人域名
点击setting进入设置
在这里插入图片描述
修改仓库名为自己的github账号名.github.io,然后点击rename

此时在浏览器输入github账号名.github.io，如Looles.github.io

绑定自己的域名，在github pages下找到custom domain在里面填写到自己申请的域名（并且需要在自己的域名设置里绑定自己github仓库的地址）
在这里插入图片描述

此时还需要修改博客的配置才能变成自己的博客（此时打开网址内容的博客还仍是别人的内容，你只是复制粘贴到了自己github仓库下）

网站结构

修改之前我们了解一下jekyll网站的基础结构

├── _config.yml
├── _drafts
|   ├── begin-with-the-crazy-ideas.textile
|   └── on-simplicity-in-technology.markdown
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
|   └── 2009-04-26-barcamp-boston-4-roundup.textile
├── _data
|   └── members.yml
├── _site
├── img
└── index.html

_config.yml全局配置文件
_posts放置博客文章的文件夹
img存放图片的文件夹

官方教程链接奉上jekyll教程

修改博客配置

来到我们的仓库，找到_config.yml文件，这是网站的全局配置文件。

在这里插入图片描述
点击修改

一下具体讲解一下配置文件的内容

基础配置

# Site settings
title: You Blog                     #你博客的标题
SEOTitle: 你的博客 | You Blog        #显示在浏览器上搜索的时候显示的标题
header-img: img/post-bg-rwd.jpg     #显示在首页的背景图片
email: You@gmail.com    
description: "You Blog"              #网站介绍
keyword: "BY, BY Blog, 柏荧的博客, qiubaiying, 邱柏荧, iOS, Apple, iPhone" #关键词
url: "https://qiubaiying.github.io"          # 这个就是填写你的博客地址
baseurl: ""      # 这个我们不用填写

侧边栏

# Sidebar settings
sidebar: true                           # 是否开启侧边栏.
sidebar-about-description: "说点装逼的话。。。"
sidebar-avatar:/img/avatar-by.JPG      # 你的个人头像 这里你可以改成我在img文件夹中的两张备用照片 img/avatar-m 或 avatar-g片

社交平台：

# SNS settings
RSS: false
weibo_username:     username
zhihu_username:     username
github_username:    username
facebook_username:  username
jianshu_username:   jianshu_id

评论系统
采用了Gitalk评论插件（Disqus在国内加载较慢）
奉上给博客添加Gitalk评论链接Gitalk评论教程

好友

friends: [
    {
        title: "简书·BY",
        href: "http://www.jianshu.com/u/e71990ada2fd"
    },{
        title: "Apple",
        href: "https://apple.com"
    },{
        title: "Apple Developer",
        href: "https://developer.apple.com/"
    }
]

保存
在这里插入图片描述
再次进入主页

个人博客已搭建完成（还未完全更改为自己的配置）