Fork me on GitHub

Hexo -- 在GitHub搭建博客

利用Hexo+GitHub搭建属于你自己的静态博客,文科妹都能看得懂的教程。

Hexo -- 在GitHub搭建博客

Hexo简介

Hexo是一款轻量级博客框架。和动态页面不同,她利用Node.js生成静态页面。她使用Markdown解析文章,只需掌握少数Markdown语法,即可快速排版。(→_→)不打广告了,具体的可去官网了解。

本文将使用最详(fei)细(hua)的文字,介绍如何在GitHub页面上搭建Hexo博客,保证文科妹也能看懂。我觉得这套博客程序很适合文科妹写字来着,纯粹,好吧其实是我想多了。

GitHub配置

GitHub是全球最大的代码托管平台(同性交友平台),程序猿的乐园(笑)。GitHub免费提供一个300MB的空间,对于存放展示Hexo生成的静态页面那是绰绰有余了。

注册帐号

首先我们需要到github官网注册一个帐号。(已有的可跳过)oh,对了。GitHub是个英文网站,不用怕哦,连我这个英语渣都能轻松驾驭,实在不行浏览器上装个翻译插件吧。

进入GitHub官网,点击右上角的“sign up”,balabala,填写一堆信息注册一个帐号。

!!! 用户名一般不会更换,所以请抢注一个比较好的名字。

然后点击“sign in”登陆。点击“setting”进入设置选项,进一步完善个人信息,看着办吧。

!!! “emals”下的“Keep my email address private”不要勾上,即设置公共邮箱,不然后面Git连接不上GitHub的。

不要勾上私人邮箱选项

务必设置为公共邮箱

创建仓库

点击右上角的“+”,“new repository”,创建一个新仓库。

!!! 作为个人展示页面的话命名必须是“你的GitHub用户名.github.io”。

描述那里随便写一个吧。勾选“public”,私人仓库是要收费的。“readme”写不写随意,这玩意儿也是用Markdown语法写的。

创建仓库

环境搭建

安装Git

Node.js下载页面下载最新客户端,并安装。只需更改安装目录,其他选项都保持默认。

ps. Git属国外网站,下载很慢,自备梯子。

连接到GitHub

打开“Git Bush”,输入以下代码,生成本机“ssh key”。(以下带“$”符号没说明的情况都是在Git Bush中执行,copy的时候别把“$”带进去哦~)

1
$ ssh-keygen -t rsa -C "Github的注册邮箱地址"

然后默认敲三下“Enter键”,你会得到两个文件,“id_rsa”和”id_rsa.pub”。从返回代码中可以看到它们的储存路径,默认是在“C:\Users\你的用户名.ssh”目录下。(“.shh”可能是隐藏文件夹,需要设置后才能看到)用记事本打开”id_rsa.pub”,复制里面的全部内容。然后进入SSH设置页面,单机按钮“new ssh key”,将你的key复制进去,命名可以随意自己清楚就好了。

ps. 只有配置过“ssh key”,你的电脑才能连接到GitHub,换台电脑就要重新配置。

1
$ ssh -T git@github.com

如果返回如下图所示,说明配置成功了。

Git配置成功

安装Node.js

同理,到Node.js下载页面下载最新客户端,并安装。只需更改安装目录,其他选项都保持默认。

安装Hexo

找个目录,新建一个文件夹。然后Git Bush中cd到改文件夹

1
$ cd 文件夹

安装Hexo

1
$ npm install -g hexo-cli

完成后输入

1
$ hexo

出现下图所示,说明安装成功。

Hexo安装成功

安装依赖包

1
$ npm install

至此Hexo安装完成,看下目录结构,应该是我酱紫的。

目录结构

部署Hexo

“_config.yml”是Hexo博客的部署文件,用notepad+等文本软件打开编辑(建议别用系统记事本)。

!!! 先做个说明,配置项中“:”后面都是带个空格的,键入时别忘了加,不然出错的。

  • 站点部署
1
2
3
4
5
6
title: zhaoo	#标题
subtitle: zhaoo's blog #小标题
description: 兆兆的自留地,分享技术,记录生活。 #描述
author: zhaoo #作者
language: zh-Hans #语言,天朝人改成我这样
timezone: Asia/Shanghai #时区,大陆居民改成我这样
  • URL部署
1
2
3
4
url: http://note.izhaoo.com	#如果使用个人域名这里设置
root: / #根目录,站点不在子目录保持默认
permalink: :title/ #固定链接,原来带时间的格式看着麻烦且不利于SEO,还是改成只显示文件名吧
permalink_defaults:
  • 代码仓库部署
1
2
3
4
deploy:
type: git
repo: https://github.com/izhaoo/izhaoo.github.io.git #改成你的GitHub代码仓库地址
branch: master

GitHub代码仓库地址

创建文章

1
$ nmp new "文章标题"

然后到“博客目录 –> source –> _post”可以看到这篇文章了。.md后缀说明是MarkDown文档,用文本编辑器打开,就可以按照MarkDown语法写字了。当然也可以下载MarkDown编辑器或是去在线MarkDown编辑器写字,比较直观。当然,还是推荐直接用MarkDown语法写,简单纯粹。

上传页面

先安装上传插件,不然会出错的。

1
$ npm install hexo-deployer-git --save

文章写好后保存,可以先在本地实时预览一下,检查错误。

1
$ hexo server	#实时预览

没问题的话我们就可以生成静态Html文件上传了。

1
2
3
4
5
$ hexo clean	#清除缓存

$ hexo generate #生成静态文件,储存在“public”文件夹内

$ hexo deploy #将文件上传到GitHub上

ps. 以上命令其实可以简写成“hexo s/c/g/d”

至此,你的Hexo博客就算搭建完成啦。

zhaoo wechat
0%