使用Github+Hexo+Material搭建私人博客

在一次偶然的机会中,发现了有人演示的个人博客很漂亮,域名就是xxxx.github.io,遂生出了研究一下使用Github建立个人博客的念头,本质上的原理还是用Github托管了静态网页的源代码,并将其显示在前端。

前言

身为一名程序猿,记录自己的成长是至关重要的,而写博客是一种比较好的记录方式。你可以选择博客园、开源中国、简书等等,当然自己搭建一个博客站点也是可以的。本篇文章将会手把手的教你使用Github+Hexo搭建属于自己的博客,不需要自己搭建服务器,可以任意编辑内容和主题,简直爽歪歪了。

关于Github

优点

  • GitHub是基于git实现的代码托管。git可能是目前最好用的版本控制系统了,非常受欢迎。
  • GitHub可以免费使用,并且快速稳定。
  • Github上面的世界很精彩,用久了你的眼界会开阔很多。

为什么要使用Github Pages

  • 可以绑定你的域名(但暂时貌似只能绑定一个)。
  • 简单快捷,使用Github Pages可以为你提供一个免费的服务器,免去了自己搭建服务器和写数据库的麻烦。

安装Node.js

在 Windows 环境下安装 Node.js非常简单,仅须到官网下载安装文件并执行即可完成安装。

安装Node.js

安装Git

HEXO

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

Hexo安装

再项目目录的文件夹下右键鼠标,点击Git Bash Here,输入npm命令即可安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

Hexo初始化配置

安装完成后,根据自己建好的目录,执行以下操作。

$ hexo init
$ npm install

安装 Hexo 完成后,文件目录显示如下


Hexo安装完成

安装Hexo插件

npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save

本地查看效果

执行下面语句,执行完即可登录localhost:4000查看效果

hexo generate
hexo server
执行效果

localhost:4000 效果展示


执行效果

至此,Hexo咋本地的环境搭建就完成了。

部署到Github

注册Github账户

略过

New repository

注册完成之后登录点击new repository
新建

配置SSH密钥

配置Github的SSH密钥可以让本地git项目与远程的github建立链接,让我们在本地写了代码之后直接通过git操作就可以实现本地代码库与Github代码库同步。操作如下:

查看是否存在SSH密钥

打开Git Bush,并执行

cd ~/. ssh

这是检查User目录下是否存在.ssh目录
如果不存在目录则执行如下操作

创建SSH密钥并在Github账户中添加

创建SSH密钥

打开Git Bush,并执行

ssh -keygen -t rsa -C "your_email@example.com"
#这将按照你提供的邮箱地址,创建一对密钥
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/you/.ssh/id_rsa): [Press enter]

直接回车,则将密钥按默认文件进行存储。此时也可以输入特定的文件名,比如/c/Users/you/.ssh/github_rsa

接着,根据提示,你需要输入密码和确认密码(说到这里,如果你很放心,其实可以不用密码,就是到输密码的地方,都直接回车,所以每次push就只管回车就行了。所谓的最安全的密码,就是没有密码 哈哈)。相关提示如下:

Enter passphrase (empty for no passphrase): [Type a passphrase]
Enter same passphrase again: [Type passphrase again]

输入完成之后,屏幕会显示如下信息:

Your identification has been saved in /c/Users/you/.ssh/id_rsa.
Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.
The key fingerprint is:
01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db your_email@example.com
在Github账户中密钥
  • 配置密钥
ssh

ssh

ssh
  • 测试

可以输入下面的命令,看看设置是否成功,git@github.com的部分不要修改:

ssh -T git@github.com

如果是下面的反馈:

The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

输入yes即可

Hi cnfeat! You've successfully authenticated, but GitHub does not provide shell access.
设置用户信息

现在你已经可以通过SSH链接到GitHub了,还有一些个人信息需要完善的。
Git会根据用户的名字和邮箱来记录提交。GitHub也是用这些信息来做权限的处理,输入下面的代码进行个人信息的设置,把名称和邮箱替换成你自己的,名字必须是你的真名,而不是GitHub的昵称。

git config --global user.name "cnfeat"//用户名
git config --global user.email  "cnfeat@gmail.com"//填写自己的邮箱

将本地的Hexo文件部署到Github

  • 登录Github,打开username.github.io的项目
  • 复制https类型的地址
  • 用记事本打开_config.yml文件
  • 在配置文件中保存如下内容
deploy:
  type: git
  repository: https://github.com/Username/username.github.io.git
  branch: master
  • 在Hexo文件夹下执行
hexo g
hexo d

或者

hexo g -d

执行完之后会让你输入github的账号和密码,输入完后就可以登录我们自己的部署在Github Pages服务器上的博客了。

使用皮肤

为Hexo开发的主题有很多,你可以在https://hexo.io/themes/中找到。下面以我使用的Material主题为例。

Clone主题

打开Hexo文件夹并执行Git Bash,执行命令:

git clone https://github.com/viosey/hexo-theme-material(此处地址替换成你需要使用的主题的地址) themes/hexo-theme-material

修改Hexo配置文件

下载完成后,打开Hexo文件夹下的配置文件 _config.yml
修改参数为:

theme: hexo-theme-material

重新部署到本地

如果效果满意,将它部署到Github上

打开Hexo文件夹,右键Git Bash

hexo clean (必须要,不然有时因为缓存问题,服务器更新不了主题)
hexo g -d

写文章

Hexo的博文都是以*.md即markdown文件的形式统一管理在source_posts文件夹下面的
新增一篇博文只需要在此文件夹下新建一个md文件即可。

markdown

Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑,Markdown 的语法十分简单。常用的标记符号也不超过十个,这种相对于更为复杂的HTML 标记语言来说,Markdown 可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永逸的效果。

Markdown有什么优点?

  • 专注你的文字内容而不是排版样式。
  • 轻松的导出 HTML、PDF 和本身的 .md 文件。
  • 纯文本内容,兼容所有的文本编辑器与字处理软件。
  • 可读,直观。适合所有人的写作语言。

Markdown语法

编辑器

END

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

推荐阅读更多精彩内容