使用Github+Hexo搭建私人博客

在一次偶然的机会中,发现了有人演示的个人博客很漂亮,域名就是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命令即可安装

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

Hexo初始化配置

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

1
2
$ hexo init
$ npm install

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

安装Hexo插件

1
2
3
4
5
6
7
8
9
10
11
12
13
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查看效果

1
2
hexo generate
hexo server

执行效果

localhost:4000 效果展示
执行效果
至此,Hexo咋本地的环境搭建就完成了。

部署到Github

注册Github账户

略过

New repository

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

配置SSH密钥

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

查看是否存在SSH密钥

打开Git Bush,并执行

1
cd ~/. ssh

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

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

创建SSH密钥

打开Git Bush,并执行

1
2
3
4
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就只管回车就行了。所谓的最安全的密码,就是没有密码 哈哈)。相关提示如下:

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

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

1
2
3
4
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的部分不要修改:

1
ssh -T git@github.com

如果是下面的反馈:

1
2
3
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即可

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

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

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

将本地的Hexo文件部署到Github

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

或者

1
hexo g -d

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

使用皮肤

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

Clone主题

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

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

修改Hexo配置文件

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

1
theme: hexo-theme-material

重新部署到本地

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

打开Hexo文件夹,右键Git Bash

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

写文章

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

markdown

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

Markdown有什么优点?

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

Markdown语法

编辑器

END

文章目录
  1. 1. 前言
  2. 2. 关于Github
    1. 2.1. 优点
    2. 2.2. 为什么要使用Github Pages
  3. 3. 安装Node.js
  4. 4. 安装Git
  5. 5. HEXO
    1. 5.1. Hexo安装
    2. 5.2. Hexo初始化配置
    3. 5.3. 安装Hexo插件
    4. 5.4. 本地查看效果
  6. 6. 部署到Github
    1. 6.1. 注册Github账户
    2. 6.2. New repository
    3. 6.3. 配置SSH密钥
      1. 6.3.1. 查看是否存在SSH密钥
      2. 6.3.2. 创建SSH密钥并在Github账户中添加
        1. 6.3.2.1. 创建SSH密钥
        2. 6.3.2.2. 在Github账户中密钥
        3. 6.3.2.3. 设置用户信息
    4. 6.4. 将本地的Hexo文件部署到Github
  7. 7. 使用皮肤
    1. 7.1. Clone主题
    2. 7.2. 修改Hexo配置文件
    3. 7.3. 重新部署到本地
    4. 7.4. 如果效果满意,将它部署到Github上
  8. 8. 写文章
    1. 8.1. markdown
    2. 8.2. 编辑器
|