使用GitHub搭建我的博客

时间 2019-11-19

标签使用 github 搭建我的博客栏目 Git 繁體版

原文原文链接

博客已经从博客园慢慢搬到GitHub 上，可能在博客园上显示不是很规整，能够移步到另外的一个上面看 Blog

两边博客同时更新。欢迎各位star 和 follower

搭建过程

在搭建博客时候也踩了很多坑，以前写博客在博客园上面写的，无奈博客园的界面太……，本身本来写了过一个博客系统可是也部署在了阿里云的服务器上面，可是后期没有续费就GG了。在后面看各路大佬在Github上搭建博客，本身也学着搭建了一个，在这过程当中也是踩了很多的坑。其中仍是要谢谢几位博主的，我也是根据几位博主的博客本身一点点的搭建起来的。html

废话少说咱们下面就开始搭建博客git

咱们的博客系统是基于Jekyll开源的，部署GitHub上面。这样咱们能够省去搭建服务器的过程。github

转载修改自 BYBlog 感谢这位同窗。由于他的博客少走了不少弯路web

展现效果

首先咱们看下博客的展现效果浏览器

网页版本的展现效果缓存

手机版本展现效果服务器

开始进入搭建的过程

注册GitHub帐号markdown

咱们搭建博客的方式是Github Pages + jekyll 的方式。app

咱们注册一个GitHub 帐号dom

若是你不知道GitHub，那你就应该先google下GitHub。而后在本身注册下登录下在Starr Fock 下项目体验下

拉取博客模版

在GitHub 上搜索下个人博客系统 wsccoder.github.io 进入到个人仓库

点击这里

点击右上角的 Fork 将这个仓库 Fork到你本身的帐号下面。等一会以后在刷新你的GitHub界面，你就会发现这个仓库已经在你的GitHub帐号下面了

Star 和 Fork的区别在于star的项目对其进行修改以后不能将其推到源仓库中，而Fork能够进行推送。推送以后源仓库的做者能够进行审核，而后将你的代码整合到源仓库中

修改仓库名

点击setting 进入修改

将这个仓库的名称修改成 你的Github帐号名.github.io，而后 Rename保存

而后在浏览器界面输入 你的Github帐号名.github.io 就会显示下面的界面

下面你已经离成功不远了，如今你的博客已经完成初步了。后续的配置可使你的博客更加的丰富

咱们看下整个网站的结构

 
  ├── _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 
 

这里面的内容较多，要是想深刻的了解的话google下文档。咱们在基本配置的时候只须要记住下面几个就好了

_config.yml 全局配置文件 //咱们配置的主要地方
_posts 放置博客文章的文件夹
img 存放图片的文件夹

修改配置

在大家的项目根目录上面找到_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: "wsc, wsccoder Blog, 王守昌的博客, Java, Go, iPhone, mac pro, book" 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 
 

评论系统

我以前使用的是根据前博主的 Disqus 评论系统，可是博主说了这个评论系统会被墙因此咱们只着重的介绍另外的以恶搞评论系统 Gitalk 评论系统

具体配置评论系统能够参考另一个博主的博客为博客添加 Gitalk 评论插件

网站统计

由于咱们这个博客系统是没有本身的访问统计的，因此咱们须要本身进行配置访问统计而后借用第三方平台进行统计

咱们可使用 Baidu Analytics 和 Google Analytics 拿到在这两个网站注册的时候获取的track_id 进入到咱们的配置文件中进行替换

由于我没有使用百度的，因此将百度的给注释掉了。切记要更换 track_id 不然的话你的网站的反问记录会记录在个人后台中（尴尬😅）

要是目前不想统计能够直接都给注释掉

 
  # Analytics settings # Baidu Analytics ba_track_id: 83e259f69b37d02a4633a2b7d960139c # Google Analytics ga_track_id: 'UA-90855596-1' # Format: UA-xxxxxx-xx ga_domain: auto  
 

咱们如今能够看下Google Analytics后台的界面是什么样的

好友

 
  # Friends friends: [ { title: "Tuya", href: "http://tuya.com" },{ title: "cctv", href: "http://www.cctv.com" },{ title: "Apple", href: "https://apple.com" },{ title: "Apple Developer", href: "https://developer.apple.com/" } ]  
 

保存

各位大哥切记要保存啊，提交啊。要否则我们配置的都没有用了。。

过几十秒而后刷新下你的主页

铛铛铛。恭喜你你的我的博客搭建完成啦。

写文章

在这里写文章的话就不像通常的博客网站你在后台编写或者在本身的文本编辑器上面写让后复制到后台编辑器里面。咱们这里须要本身建立文件而后将你的日志文件push到你GitHub上面。

建立文章

咱们建立的文章都保存在这个文件夹得下面。

每次咱们要建立发表新文章的时候止须要在这个文件夹下面建立一个新的md的文件就ok了

咱们在GItHub的界面上建立一个文章

而后在编辑这个文章

以后点击保存，估计过个十几秒，你再刷新你的博客首页就能看见你发布的新文章了。

格式

每一篇文章文件命名采用的是2017-02-04-Hello-2017.md时间+标题的形式，空格用-替换链接。

文件的格式是 .md 的 MarkDown 文件。

咱们的博客文章格式采用是 MarkDown+ YAML 的方式。

YAML 就是咱们配置 _config文件用的语言。

MarkDown 是一种轻量级的「标记语言」，很简单。花半个小时看一下就能熟练使用了

大概就是这么一个结构。

 
  ---
layout:     post   				    # 使用的布局（不须要改）
title:      My First Post 				# 标题 
subtitle:   Hello World, Hello Blog #副标题
date:       2017-02-06 				# 时间
author:     BY 						# 做者
header-img: img/post-bg-2015.jpg 	#这篇文章标题背景图片
catalog: true 						# 是否归档
tags:								#标签
    - 生活
---

## Hey
>  这是一遍博客

 哈哈哈哈哈  博客完成了 
 

按格式建立文章后，提交保存。进入你的博客主页，新的文章将会出如今你的主页上.

到这里，恭喜你！）。

到这里的话，一个博客的所有是大功告成了。

首页标签

在首页能够看到这些特点标签，当你的文章出现相同标签（默认相同的标签数量大于1），才会自动生成。

因此当你只放一篇文章的时候是不会出现标签的。

建站的初期，博客比较少，若你想直接在首页生成比较多的标签。你能够在 _congfig.yml中找到这段：

 
  # Featured Tags
featured-tags: true                     # 是否使用首页标签
featured-condition-size: 1              # 相同标签数量大于这个数，才会出如今首页 
 

将其修改成featured-condition-size: 0, 这样只有一个标签时也会出如今首页了。

相反，当你博客比较多，标签也不少时，这时你就须要改回 1 甚至是 2 了。

——————————— 后面部分是彻底将前博主的文章转载过来了————————————

自定义域名

搭建好博客以后你可能不想直接使用 baiyingqiu.github.io 这么长的博客域名吧, 想换成想 qiubaiying.top 这样简短的域名。那咱们开始吧！

购买域名

首先，你必须购买一个本身的域名。

我是在阿里云购买的域名

用阿里云 app也能够注册域名，域名的价格根据后缀的不一样和域名的长度而分，好比我这个 qiubaiying.top 的域名第一年才只要4元~

域名尽可能选择短一点比较好记住，注意，不能选择中文域名，好比 张三.top ,GitHub Pages 没法处理中文域名，会致使你的域名在你的主页上使用。

注册的步骤就不在介绍了

解析域名

注册好域名后，须要将域名解析到你的博客上

管理控制台 → 域名与网站（万网） → 域名

选择你注册好的域名，点击解析

添加解析

分别添加两个A 记录类型,

一个主机记录为 www,表明能够解析 www.qiubaiying.top的域名

另外一个为 @, 表明 qiubaiying.top

记录值就是咱们博客的IP地址，是 GitHub Pagas 在美国的服务器的地址 151.101.100.133

能够经过这个网站或者直接在终端输入ping 你的地址，查看博客的IP

ping qiubaiying.github.io

细心地你会发现全部人的博客都解析到 151.101.100.133 这个IP。

而后 GitHub Pages 再经过 CNAME记录跳转到你的主页上。

修改CNAME

最后一步，只须要修改咱们github仓库下的 CNAME 文件。

选择 CNAME 文件

使用的注册的域名进行替换,而后提交保存

这时，输入你本身的域名，就能够解析到你的主页了。

大功告成！

进阶

若你对博客模板进行修改，你就要看看 Jekyll 的开发文档,是中文文档哦，对英语通常的朋友简直是福利啊（好比说我😀）。

还要学习 Git 和 GitHub 的工做机制了及使用。

你能够先看看这个git教程，对git有个初步的了解后，那么相信你就能将本身图片传到GitHub仓库上，或者能够说掌握了使用git管理本身的GitHub仓库的技能呢。

对于轻车熟路的程序猿来讲，这篇教程就算就结束了，由于下面的内容对于大家来讲 so eazy~

但相信不少小白都一脸懵逼，那咱们继续👇。

利用GithHub Desktop管理GitHub仓库

GithHub Desktop 是 GithHub 推出的一款管理GitHub仓库的桌面软件，换句话说就是将你在Github上的文件同步到本地电脑上，并将修改后的文件同步到Github远程仓库。

下载

点击图片进入下载页面，选择对应的平台进行下载

下面以Mac平台为例：

安装

将下载好的文件解压，将这只小猫拖到应用程序文件夹中

就能够在Launchpad找到这只小猫咪~

登陆

点开应用,会弹出登陆框，

输入你的GitHub帐号和密码进行登陆

登陆后关闭窗口

而后返回引导窗，一直按 Continue 继续

Continue

仍是Continue~

进入主界面，先右键Remve 删除这个用户指导，贼烦~

克隆仓库

选择你的仓库克隆到本地

管理仓库

如今文件夹中打开

打开后你会的发现文件结构和你在Github上的如出一辙~

你最早关心的多是你的头像~在img文件夹中把替换个人头像就行了。

不只是图片，全部在Github上的的操做均可以进行。

保存修改

当你对仓库文件夹的文件下进行修改、添加或删除时，均可以在 GitHub Desktop 中看到

例如我在 img 中添加了一张图片 avatar-demo.png 添加了一张图片

就能够在看到GitHub Desktop显示了个人修改

保存修改只要按 Commit to master，而后能够写上你的修改说明

同步

将修改同步到 GitHub 远程仓库上只须要一步：点击右上角的同步按钮

完成

打开你的GitHub上的仓库，你就能够看到已经和本地同步了

能够看到你提交的详情： add img

这样，你已经能轻松管理本身的博客了。

想上传头像，背景，或者是删掉你不要的图片（个人头像😏）已是 so eazy了吧~

注意

你在 GitHub 网站上进行 Commit 操做后，须要在GitHub Desktop上按一下同步按键才能同步网站上的修改到你的本地。

修改我的介绍

修改我的介绍须要修改根目录下的 about.html 文件

看不懂 HTML 标签？不要紧，对照着修改就行了~ 还有注意这个有中英介绍

常见问题

最近有不少人给我提问题，我这边总结一下

配置文件修改后没有效果

刷新几遍浏览器就行了~

不行的话，先清除浏览器缓存再试试。

404错误

检查你的仓库名是否有按照要求填写
肯定 Fork 的是否是个人仓库~

修改CNAME文件，域名仍是不变

清除浏览器缓存就OK~

其余问题

直接在评论中提出来或私信我，我会一一替你们解决的😀

其余

最近有人往个人远程仓库不停的 push，一天连收几十封邮件！例如像这样的

缘由大可能是直接Clone了个人仓库到本地，没有删除个人远程仓库地址，添加完本身的仓库地址后，一口气推送到全部远程仓库（包括个人😂）~

打扰了个人工做和生活~

因此，请不要往个人仓库上推送分支！

我发现一个问题是，不少人每次修改博客的内容都commit一次到远程仓库，而后再查看修改结果，这样效率很是低！

来，上车！

在本地调试博客

注：下面的操做是在 Mac 终端进行的。 Windows 环境下的配置请参考 @梦幻之云提供的这篇文章。

有心的同窗在 jekyll官网就会发现 jekyll 的提供的实例代码。

 
  ~ $ gem install jekyll bundler
~ $ jekyll new my-awesome-site
~ $ cd my-awesome-site
~/my-awesome-site $ bundle install
~/my-awesome-site $ bundle exec jekyll serve
# => 打开浏览器 http://localhost:4000 
 

这段命令建立了一个默认的 jekll 网站，而后在本机的 4000 窗口展现。聪明的你应该发现怎么作了吧~

安装 jekyll和 jekyll bundler

 
  $ gem install jekyll
$ gem install jekyll bundler

进入你的 Blog 所在目录，而后建立本地服务器

$ jekyll s

而后会显示

 
  Auto-regeneration: enabled for '/Users/baiying/Blog'
Configuration file: /Users/baiying/Blog/_config.yml
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop. 
 

你就能够在 http://127.0.0.1:4000/ 看到你的博客，你对本地博客的修改都会在这个地址进行显示，这大大提升了对博客的配置效率。

使用ctrl+c就能够中止 serve

Star

若本教程顺利帮你搭建了本身的我的博客，请不要害羞，给个人 github仓库点个 star 吧！

由于最近发现 Fork 将近破百，加上直接 Clone 仓库的，保守估计已经帮助上百人成功的搭建了本身的博客，~~但是 Star 却仅仅只有 12！可能仍是作的不够好吧！~~如今已经破百了，感谢你们的Star！

别无他求，点个 Star 吧！

心满意足！

补充

修改网站的 icon

要修改如图所示的网站 icon：

在博客 img 目录下找到并替换 favicon.ico 这个图标便可，图标尺寸为32x32。

修改主页的座右铭

最近有很多小伙伴私信我：如何修改主页的座右铭？

就是这个：

很简单，找到博客目录下的 index.html 文件，修改这句话就能够了。

如何在博客文章中上插入图片

博客的文章用的是 MarkDown 格式，若是没用过 MarkDown 真的强烈推荐花半个小时学习一下。

MarkDown 中添加图片的形式是 :![](图片的URL)

例如：

![MarkDown示例图片](//upload-images.jianshu.io/upload_images/2178672-eb2effd6b942a500.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)就会显示下面这张图片

https://ws3.sinaimg.cn/large/006tNc79gy1fj9xhjzobbj30yg0my75z.jpg就是这张图片的URL，咱们能够在浏览器输入这个URL找到或下载这张图片。

因此，要在 MacDown 中插入图片，这张图片就须要上传到图床（网上），而后在引用这张图片的URL。

将图片上传到图床

Mac 上的图床神器：iPic

直接在App Store上下载，谁用谁知道！

使用方法很简单，直接拖动图片到 P 图标上，或者选中图片按快捷键 ⌘+U，就能请示上传。

上传成功就能直接粘贴图片的URL。

用 iPic 上传图片后，获取URL插入文章中就能够了。