前言
习惯自己写Blog的朋友一定不会陌生Wordpress,或许也曾在新浪博客和QQ空间留过脚印,但静心认真思考一下,似乎我们又总是向往更加简单自由的写作方式。GitHub给我们提供了一个无限的空间,我们需要珍惜使用,而Hexo的出现从某种意义上来说代替了Jekyll,让我们可以更专注于写作本身。
喜欢写Blog的人,会经历三个阶段。
第一阶段,刚接触Blog,觉得很新鲜,试着选择一个免费空间来写。
第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客。
第三阶段,觉得独立博客的管理太麻烦,最好在保留控制权的前提下,让别人来管,自己只负责写文章。
大多数Blog作者,都停留在第一和第二阶段,因为第三阶段不太容易到达:你很难找到俯首听命、愿意为你管理服务器的人。
但是六年前,情况出现变化,一些程序员开始在GitHub网站上搭建blog。他们既拥有绝对管理权,又享受GitHub带来的便利----不管何时何地,只要向主机提交commit,就能发布新文章。更妙的是,这一切还是免费的,GitHub提供无限流量,世界各地都有理想的访问速度。
今天,我就来示范如何在GitHub上搭建Blog,你可以从中掌握GitHub的Pages功能,以及Hexo软件的基本用法。更重要的是,你会体会到一种建立网站的全新思路。
概要
GitHub Pages 是什么?
如果你对编程有所了解,就一定听说过GitHub。它号称程序员的Facebook,有着极高的人气,许多重要的项目都托管在上面。
简单说,它是一个具有版本管理功能的代码仓库,每个项目都有一个主页,列出项目的源文件。
但是对于一个新手来说,看到一大堆源码,只会让人头晕脑涨,不知何处入手。他希望看到的是,一个简明易懂的网页,说明每一步应该怎么做。因此,GitHub就设计了Pages功能,允许用户自定义项目首页,用来替代默认的源码列表。
所以,GitHub Pages可以被认为是用户编写的、托管在GitHub 上的静态网页。
GitHub 提供模板,允许站内生成网页,但也允许用户自己编写网页,然后上传。有意思的是,这种上传并不是单纯的上传,而是会经过Hexo或Jekyll等程序的再处理。
什么是Hexo?
Hexo 是一个快速、简洁且高效的基于Node.js的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。作者是来自台湾的@tommy351。
A fast, simple & powerful blog framework, powered by Node.js.
类似于jekyll、Octopress、Wordpress,我们可以用Hexo创建自己的博客,托管到github、Heroku或Coding上,绑定自己的域名,用markdown写文章。本博客即使用hexo创建并托管在github上。
为什么要用hexo
不可思议的快速 ─ 只要一眨眼静态文件即生成完成
支持 Markdown
仅需一道指令即可部署到 GitHub Pages 和 Heroku
已移植 Octopress 插件
高扩展性、自订性
兼容于 Windows, Mac & Linux
- 易用。不仅部署简单,平时使用中仅需要
hexo new
hexo generate
hexo server
hexo deploy
四个命令。不像Jekyll需要很多繁琐的git
命令。 - 轻。文件少、小,易理解,方便自定义。
- 用户多。虽然赶不上Jekyll和Octopress,但遇到什么问题都能搜索到答案,或者找到同样使用hexo的用户进行参考和咨询。
谁能使用hexo
这是一个免费开源的博客程序,任何人都可以使用和修改。但是不同于wordpress,hexo由于需要使用Github,Git,Markdown,Node.js这样的工具,好多插件、widget都需要自己安装、设置。所以适合那些有一定计算机基础,喜欢折腾的人。但是,不要恐惧,只要跟着本教程走,就能很方便地让自己的博客”飞起来”。
怎样搭建hexo博客
正题来了,请认真往下看吧。
准备工作
注意本文主要针对Windows
平台和Hexo 3.x
安装GIT
下载 Git 并执行即可完成安装。
So Easy
安装Node.JS
在 Windows 环境下安装Node.js非常简单,仅须下载Node.JS并执行即可完成安装。
So Easy
安装Hexo
在任意位置右键,选择Git Bash Here
npm install -g hexo-cli
#如果命令无法运行,可以尝试更换taobao的npm源
npm config set registry https://registry.npm.taobao.org
#或者安装使用cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
Hexo初始化配置
创建hexo文件夹
安装完成后,根据自己喜好建立目录(如D:\hexo
),在该文件夹下右键--Git Bash Here。执行以下命令
hexo init
安装依赖包
npm install
该命令会将hexo所需文件自动下载到hexo文件夹下。
#新建完成后,指定文件夹的目录如下
.
├── _config.yml
├── package.json
├── scaffolds
├── scripts
├── source
| ├── _drafts
| └── _posts
└── themes
安装Hexo插件(可选)
npm install hexo-generator-feed --save
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
npm install hexo-generator-json-content --save
npm install hexo-deployer-git --save
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-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
查看本地运行效果
现在我们已经搭建起本地的Hexo博客了,继续执行以下命令(在D:\Hexo
),成功后即可登录localhost:4000
查看效果,运行显示了相关页面,说明当前网站已经在本地建立。
hexo generate
hexo server
好了,至此,本地博客已经搭建起来了,只是本地哦,别人看不到的。下面,我们要部署到Github。
配置GitHub
注册Github账号
已有账号可以跳过,没有的,请登录GitHub进行注册,很简单,这里就不介绍了。
创建repository
在自己Github主页右下角,创建New repository
。
比如我的Github账号是viosay,那么我应该创建的repository名字应该是viosay.github.io
。
首次创建耐心等待10分钟左右审核,之后即可访问静态主页如http://viosay.github.io
配置部署
编辑_config.yml
(在D:\hexo
下)。你在配置时,要把下面的viosay都换成你的账号名。
deploy:
type: git
repository: https://github.com/viosay/viosay.github.io.git
branch: master
注意:type:空格git
。都要使用空格,否则会出错。
配置本机的ssh key
通过ssh keys就可以将本地的项目与Github关联起来
检查本机ssh key
cd ~/.ssh
提示:没使用过Git就会显示:No such file or directory
生成新的ssh keys
$ ssh-keygen -t rsa -C "邮件地址@youremail.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车>
注意:-C为大写的C接下来会让你输入密码
Enter passphrase (empty for no passphrase):<输入加密串>
Enter same passphrase again:<再次输入加密串>
注意:输入密码时是不会显示密码的,依次输入就好了如果显示为下界面,就说明设置ssh key成功了
添加ssh key到Github
- 搜索本机上的
id_rsa.pub
文件。或在C:\Users\用户名\.ssh
路径下找到该文件,以记事本打开,复制其中的内容。 - 进入自己的Github,右上角齿轮setting---左边列表SSH keys---Add SSH key。将内容复制到文本框(不用取title名字)。
注意:这时Github会给你的邮箱发送一封邮件,打开邮件确认下就好了。
测试通信
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 yourusername! You've successfully authenticated, but GitHub does not provide shell access.
这时候说明能够通过SSH链接到你的Github了,接下来完善一下你的个人信息。Git会根据用户的名字和邮箱来记录提交。
GitHub也是用这些信息来做权限的处理,输入下面的代码进行个人信息的设置,把名称和邮箱替换成你自己的,名字必须是你的真名,而不是GitHub的昵称。
git config --global user.name "Tim" #用户名
git config --global user.email "tim@gmail.com" #填写自己的邮箱
使用Hexo克隆主题
自己使用的是Yilia主题,比较喜欢,以这款主题为例。
克隆主题
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
配置
修改hexo根目录下的_config.yml
:
theme: yilia
更新
cd themes/yilia
git pull
本地查看
hexo g
hexo s
浏览器输入localhost:4000,查看主题是否成功。
部署上传
hexo clean
hexo g
hexo d
会让你输入用户名和密码,依次输入就好。
部分Hexo主题推荐
选择主题建议遵循
KISS
原则
Hexo Themes -http://hexo.io/themes/
Themes · hexojs/hexo Wiki - https://github.com/hexojs/hexo/wiki/Themes
Yilia -http://litten.github.io/2014/08/31/hexo-theme-yilia/
Jacman -http://wsgzao.github.io/post/hexo-jacman/
NexT - http://theme-next.iissnan.com/
绑定域名和DNS设置
设置CNAME
- 打开Github--空间Repository的根目录下--点击“+”creat a new file--命名为
CNAME
,文本框中输入自己需要绑定的域名如inplus.top
。 - 点击右下角的【Download ZIP】,下载项目,解压压缩包,将其中的
CNAME
文件复制到hexo根目录下。
hexo g
hexo d
DNS设置
注册登录DNSPod,先添加域名,然后添加记录,设置如下
主机记录 | 记录类型 | 线路类型 | 记录值 | MX优先级 | TTL |
---|---|---|---|---|---|
@ | CNAME | 默认 | viosay.github.io. | - | 10 |
www | CNAME | 默认 | viosay.github.io. | - | 10 |
域名推荐
GoDaddy makes registering Domain Names fast, simple, and affordable.
【推荐理由】两个字“靠谱”,支持支付宝,附优惠码链接
http://www.godaddy.com
http://www.gdcodecoupon.com
万网
【推荐理由】被阿里收入麾下,实力和价格都不错
https://wanwang.aliyun.com
DNS推荐
致力于为您提供最稳定、最安全的域名解析服务
【推荐理由】依然是两个字“靠谱”,被腾讯收入麾下以后扔不忘初心,感谢他们一直以来对于公益的坚持
https://www.dnspod.cn
开始写文章
hexo new "postName"
或路径D:\hexo\source\_posts
下新建文件postName.md
就可以了
文章内容和格式如下:
---
title: 标题
date: YYYY-MM-DD hh:mm:ss
tags: 标签 #多标签时以[tag1,tag2]格式填写
categories: 类别 #多类别时以[category1,category2]格式填写
---
主页可显摘要
<!-- more --> #阅读全文分隔符
展开余下全文
正文内容使用Markdown语法进行书写
图床推荐
七牛云
【推荐理由】体系完善,操作简便易懂
测试用户每月1G流量,实名后每月10G,小站够用。
需要注意的是未备案网站无法使用CDN,存在盗图和恶意刷流量的可能,而且七牛是先使用后付费,自己领悟吧。
http://www.qiniu.com
Simple Free Image Hosting
【推荐理由】免费,强大,无限制,用了都说好
缺点:后期无法对上传的图片进行管理
https://sm.ms
说明:https://www.v2ex.com/t/182703
其他相关
常见问题
- 修改配置文件时注意
YAML
语法,参数冒号:
后一定要留空格
- 中文乱码请修改文件编码格式为
UTF-8
Error代码:「warning: LF will be replaced by CRLF」
在hexo deploy
时,有时会出现这个提示信息warning: LF will be replaced by CRLF
,虽然看起来挺乱糟糟的,但不影响使用,可以忽略不计。若想不提示,可以使用如下方法:
- 切换到博客的根目录,执行如下命令:
git config --global core.autocrlf false
- 删除掉该目录下的
.git
文件夹(可能是隐藏的),命令:rm -rf .git
- 重新
git init
。
再deploy试试吧,清新脱俗了。
Error代码:hexo deploy 没反应
好多网友遇到过这个问题,目前来看,主要问题出在config.yml
的deploy
配置上。注意缩进,同时注意冒号后面要有一个空格。
Error代码:hexo update -g 升级错误,hexo命令失效
我升级时遇到了这个问题,原因不详。这种情况下,可执行npm install hexo-cli -g
重新安装一遍Hexo,效果跟升级一样。
Error代码:hexo指令无法执行
可能是升级方法不对,导致hexo generate指令也无法执行,后来索性重装了git和node,重新安装hexo,generate和server指令都能执行了,但是出现了“Deployer not found: github”。
Error代码:Deployer not found: git
更改_config.yml主配置文件为utf-8编码时导致的异常。
执行npm install hexo-deployer-git --save
然后重新deploy即可。
各版本所做更新修正,请参考这里。
如何迁移至Hexo
http://hexo.io/zh-cn/docs/migration.html
Hexo命令
hexo init <folder> #初始化一个网站目录 我是直接cd到目标目录执行hexo init的
hexo new "postName" #新建文章,或者source\_posts手动编辑
hexo new page "pageName" #新建页面 默认链接为:主页地址/pageName/
hexo clean #清除缓存文件db.json和已生成的静态文件public
hexo generate #生成public静态文件至public目录
hexo server #本地发布预览效果 http://localhost:4000 ('ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
hexo --debug #在终端中显示调试信息并记录到 `debug.log`
hexo help #查看帮助
hexo version #查看Hexo的版本
Hexo简写命令
hexo n "postName" #新建文章,或者source\_posts手动编辑
hexo g #生成public静态文件至public目录
hexo s #本地发布预览效果 http://localhost:4000 ('ctrl + c'关闭server)
hexo d #将.deploy目录部署到GitHub
Hexo复合命令
hexo d -g #生成并部署上传
hexo s -g #生成并本地发布预览
hexo clean && hexo d -g #清空缓存然后生成并部署上传
hexo clean && hexo s -g #清空缓存然后生成并本地发布预览
本文部分说明来自互联网
特别感谢 @wsgzao @阮一峰 @TimFei @Litten @陈素封 @zippera @不如