使用GitHubpages+hexo 搭建一个心仪的个人博客

(一)前言:

建议:慢慢看,也就这一篇用心了点写

说来话长,一把辛酸泪,可算是弄好了。

1 起因:在很早很早,大一的时候,估计快记不得日子了,那时候来到PC吧创业团队,一个大一级的学长通过买源码创建了一个社区论坛,因为那时候的社区比较流行,学长让我们注册个账号,发个心情,然后加个积分,再升个等级,常来逛逛,呵呵,好满足的感觉。从那以后,我就想着是否有一天我也可以做出让身边的小伙伴都来观摩一下我的网站。


2 没想到的是,这一想就想了9年之久,一干就干了快十年,这次终于可以很难勉勉强强的对学长们说:诺,欢迎来到我的博客小屋,如果你想了解我,那么请你翻到底吧,(kidding.gif)

逗比的话,就那么点,生活中的我也是很逗比,但是更是一个爱学向上的骚年,闷骚而不失态。


好吧,我要开始干活了。

我的各大blog:

  1. 国外的Github地址:
    GitHub
  2. 国内的GitHub地址:
    码云
  3. 我的单纯网站:
    http://xudailong.cc/

可能你们会想,写个博客就写个博客呗,为什么还装这么低级的A,弄三个出来,老实回答你们吧,我我也不想啊,

  1. 我怕哪一天3.我的单纯网站 挂了,因为3是用的阿里云买的域名,花钱的额,要是哪天我没钱了,或者域名解析出错, 那不就挂了嘛,毕竟我已经挂掉一个域名了,现在还没修好,我才用了一个礼拜没出头啊,蛋蛋的忧伤。
  2. 1.国外的GIthub地址,现在是因为天朝,访问速度可能更不上,可能网络访问速度慢些,但是,我依旧是很喜欢Github的,毕竟我感觉,里面有很多Object让我happy,所以Github这个就不算是备胎,真正的备胎是:
  3. 2.国内的Github地址:码云 ,此码云非彼马云, 把它当做备胎无非就一点,国内服务器,访问网络速度快一些,其他的,我也不知道,第一次知道。

现在上几张成果图,呵呵,使用的轮子真高(滑稽.gif):

(二) 关于我的博客

(1)Home页:

Home页面.png

(2) 分类与标签页:

右边的分类与标签页.png

(3)单个文章的编辑日期,作者,分类,标签,查看更多

单个文章.png

(4)顶部Tab栏

顶部Tab.png

(5)底部分页,访客量统计,回到顶部按钮

底部内容.png

(6)博客详情页

博客详情页.png

以上就是整个博客的页面,其实这个博客也是后来发现的,一位比较低调的阿里前端哥哥撸出来的,且一直在维护中的Blog。

(三) 其他博客类型

类型一:

吴小龙的博客.png

类型二:

与佳期的博客.png

类型三:

柏荧的博客.png

类型四:

Litten的博客.png

类型五:

TGOYO的博客.png

暂且就这么多吧,类型一是现在大多数ITer 常用的个人博客类型,Hexo强力驱动,虽然我到现在也不知道HexoJekyll有什么不同的区别

(四)搭建博客辛酸shift

  1. 前面的坑

能成功搭建成这篇博客是根据类型三:柏荧的博客进行搭建的,但是又不是很喜欢那样的界面,毕竟我这对前端能懂个屁的味道就很不错了,于是在博客三的基础上进行进行博客五的Fork历程

可谁知道博客五上传的代码不全,提供的搭建博客教程却没有,一脸懵逼脸,在这里我能说博客五是在博客四的基础上进行个性化设置的吗?博客四是位鹅哥哥,博客五我现在看来,实现的功能应该不算多,可能是多了个网易音乐播放的位置吧,

当时硬是不想使用柏荧的博客,对TGOYO的博客有感觉些,于是,找啊找,找到了浩阳猫哥哥的博客,离我也就5Km不到的厂子里面工作的路人。

于是:我索性跟着博客Fork下来进行个人博客的修改

  1. 路上的风景
  1. 注册一个Github账号 or 码云账号

Github官网

  1. Fork(拉取)我的博客模板
    在Github上搜索:xudailong.github.io 进入到我的仓库中

可能你已经进入到了这个页面,那么接下来我们要进行的操作。

红色的Fork.png

点击红色的Fork后,就可以变成我们自己的仓库了。

Fork成功页.png

Fork成功后,就成我们自己的名下了,这时候,我们需要进行博客的简单设置。

Settings位置.png

找到Settings点击,进行页面的设置。

重新rename.png

这里我们找到Rename下的前面的框内的内容,我们要改成与我们自己的github一样的;用户名,这里我已经改过了,一定要记得用户名与仓库名要一致,就是两处画红线的地方。

当rename完后,我们在当前页面往下拉,直到出现GitHub Pages

GitHub Pages页面.png

这里有一句话:

Your site is published at https://643435675.github.io/

好了,现在就能正常的访问刚刚我们Fork过来的页面,此时你的博客地址应该是:xxx.github.io
xxx 是你的Github用户名*

当你在浏览器的新窗口输入:xxx.github.io
此时能就能访问到你的博客了,但是你的博客里面依旧显示是我的博客内容,所以,接下来,我们进行博客的修改。

(五) 将博客修改成自己的博客

(1)先说个概念,现在的github个人搭建博客方式有两种,

一种是:
GitHub Pages + Hexo 的方式
另外一种是:
GitHub Pages + jekyll 的方式

我采用的搭建博客的方式是第二种:
使用GitHub Pages +jekyll的方式。

我们现在用Git工具将整个项目Git clone下来,可以看一下现在的目录结构:

_config的设置.png

这里进行一下各个文件(夹)的用途

  • _config.yml :全局配置文件
  • posts :放文章的文件夹

其他的文件夹是各页面的HTML文件,你可以点进去看看,尝试改变一下

其中:_config.yml 文件中:

# Welcome to Jekyll!
#
# This config file is meant for settings that affect your whole blog, values
# which you are expected to set up once and rarely need to edit after that.
# For technical reasons, this file is *NOT* reloaded automatically when you use
# 'jekyll serve'. If you change this file, please restart the server process.

# Site settings
title: 徐代龙的技术专栏
brief-intro: Android and Python Coder
baseurl: "" # the subpath of your site, e.g. /blog
url: "https://643435675.github.io" # the base hostname & protocol for your site

permalink: /:year/:month/:day/:title/

# other links
twitter_username: #gaohaoyang126
facebook_username: #gaohaoyang.water
github_username:  643435675
email: 643435675@QQ.com
weibo_username: 3115521wh
zhihu_username: hll643435675
linkedIn_username: gaohaoyang
dribbble_username:

description_footer: 来自徐代龙的个人专栏!

# comments
# two ways to comment, only choose one, and use your own short name
# 两种评论插件,选一个就好了,使用自己的 short_name
duoshuo_shortname: #hygblog
disqus_shortname: #gaohaoyang

# statistic analysis 统计代码
# 百度统计 id,将统计代码替换为自己的百度统计id,即
# hm.src = "//hm.baidu.com/hm.js?xxxxxxxxxxxx";
# xxxxx字符串
baidu_tongji_id: 1cc1fc4b4b456bf7c99ce80aec5bf009
google_analytics_id: UA-72449510-4 # google 分析追踪id

# Build settings
markdown: kramdown

kramdown:
  input: GFM
  syntax_highlighter: rouge

# port
# port: 1234

# url
category_dir: category/
tag_dir: tag/

# excerpt
excerpt_separator: "\n\n\n\n"

# paginate
plugins: [jekyll-paginate]
paginate: 6
port: 4001

你可以一边修改一边进行调试,

# paginate
plugins: [jekyll-paginate]
paginate: 6
port: 4001

paginate中paginate的6为每页显示6篇文章,port:4001 是jekyll启动端口号,

# statistic analysis 统计代码
# 百度统计 id,将统计代码替换为自己的百度统计id,即
# hm.src = "//hm.baidu.com/hm.js?xxxxxxxxxxxx";
# xxxxx字符串
baidu_tongji_id: 1cc1fc4b4b456bf7c99ce80aec5bf009
google_analytics_id: UA-72449510-4 # google 分析追踪id

这里进行了百度统计与谷歌统计,只要替换一下统计id就可以成为你自己的id了。

(2)使用Jekyll修改静态博客

请详细跟这篇教程走:
Jekyll 搭建静态博客

请务必走完,因为上面这博客讲的很清楚,很详细,环境搭建好,剩下的就简单了。

我再简明一下步骤:
一 :安装Ruby
二 :安装RubyGems
三:用RubyGems安装Jekyll
四:cd到博客文件夹,开启服务器
五:访问 http://localhost:4000/
六:提交代码到远程GitHub上

我按照上面的教程走完,大概步骤是这样子的:

spencer@spencer-it1 MINGW64 /f/myself/643435675.github.io (master)
$ gem install jekyll
Successfully installed jekyll-3.6.2
Parsing documentation for jekyll-3.6.2
Done installing documentation for jekyll after 2 seconds
1 gem installed

spencer@spencer-it1 MINGW64 /f/myself/643435675.github.io (master)
$ jekyll s
Configuration file: F:/myself/643435675.github.io/_config.yml
            Source: F:/myself/643435675.github.io
       Destination: F:/myself/643435675.github.io/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 5.499 seconds.
  Please add the following to your Gemfile to avoid polling for changes:
    gem 'wdm', '>= 0.1.0' if Gem.win_platform?
 Auto-regeneration: enabled for 'F:/myself/643435675.github.io'
    Server address: http://127.0.0.1:4001/
  Server running... press ctrl-c to stop.


spencer@spencer-it1 MINGW64 /f/myself/643435675.github.io (master)
$ jekyll serve
Configuration file: F:/myself/643435675.github.io/_config.yml
            Source: F:/myself/643435675.github.io
       Destination: F:/myself/643435675.github.io/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 2.859 seconds.
  Please add the following to your Gemfile to avoid polling for changes:
    gem 'wdm', '>= 0.1.0' if Gem.win_platform?
 Auto-regeneration: enabled for 'F:/myself/643435675.github.io'
    Server address: http://127.0.0.1:4001/
  Server running... press ctrl-c to stop.

Git Bash操作.png

最后是提交到github上面:
可以参照这一篇文章:
git 提交代码到github上

博客搭建参考:
(一)浩阳神:https://gaohaoyang.github.io/(特别感谢浩阳哥哥,虽然你离我只有五公里远)
(二)Devin哟神:http://www.jianshu.com/p/f389ad8c49bd
(三)BYQiu神:http://www.jianshu.com/p/e68fba58f75c

最后博客就这样子搭建完了,至于域名解析的话,还有把博客搭建在码云上,这里可以自己去摸索。

(3)域名解析的情况:

(三)BYQiu神:http://www.jianshu.com/p/e68fba58f75c
这篇只是说对了部分,理应域名解析是不把值直接用github的服务器地址值进行设置的,因为我这里面试过了,他有可能会变,在公司跟在自己的电脑ping的是不一样的地址,有的情况可能会遇到域名解析失败的情况,这里一定要先实名认证了,然后再做其他操作才不会出现域名解析失败的情况 ,当然你可以看一下这篇文章,可能会稍微懂一些:
注册局设置暂停解析(serverHold)

下面就写完了,这对于很小白的我都可以做出来,如果你想弄一个的话,你觉着你行不行呢?

(o( ̄︶ ̄)o)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,245评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,749评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,960评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,575评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,668评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,670评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,664评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,422评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,864评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,178评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,340评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,015评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,646评论 3 323
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,265评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,494评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,261评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,206评论 2 352

推荐阅读更多精彩内容