零基础搭建Hexo炫酷静态页面博客

GitHubPages + hexo 简介

最近花了两天的时间搭建了一个博客,使用GitHubPages + hexo

为什么选用GitHubPages + hexo 优点如下:

1.超快速度
Node.js 所带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染。

2.支持 Markdown
Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。

3.一键部署
只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。

4.丰富的插件
Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript。

博客地址

blok.png

前期准备

github账号
node.js
npm
hexo
注意:(node.js 集成带有npm,因此只要下载 node.js 就可以了)

github上创建GitHubPages仓库
GitHubPages
官方参考地址

注意

创建仓库的时候仓库名一定严格按照 git用户名.github.io 来命名
创建仓库完成之后,在本地创建一个站点文件夹 git用户名.github.io/blog

下载node.js

我是在mac系统上搭建的,下载用的终端brew命令,如果其他系统或者没有翻墙,可能会有问题,如果下载失败可以移步Node.js官网,下载最新版本一路安装即可。
检测安装是否成功 终端输入 node -v ,npm -v 成功则显示版本号

➜  blog git:(master) ✗ npm -v
5.3.0
➜  blog git:(master) ✗ 

下载 hexo

hexo官方
有详细的windows和mac用户的安装文档,如果因为防火墙等原因安装失败,请使用下面命令安装,sudo赋予命令最高权限,避免权限不足

➜  blog git:(master)  sudo npm install hexo --no-optional

下载git

文档说明,上面有各个平台的git下载安装步骤,按照步骤安装即可

本地关联github仓库

git下载安装完成之后,需要跟你的github仓库关联起来,你需要一个私钥和公钥,首先查看本地有没有

➜  ~ git:(master) ✗ cd ~/.ssh 
➜  .ssh git:(master) ✗ ls
config      id_rsa      id_rsa.pub  known_hosts
➜  .ssh git:(master) ✗ 

如果没有id_rsa(私钥)和id_rsa.pub(公钥)就需要手动生成一个,执行命令

➜  ~ git:(master) ✗ ssh-keygen 

生成双钥,然后把公钥放到github仓库上,点击头像选择settings

githubkey1.png

左侧找到SSH,然后点击New SSH key,把公钥的文本内容粘贴进去,就可以了

githubkey2.png

部署hexo

命令介绍

准备工作完成,就可以部署看一下博客界面效果了,先介绍一下hexo常用命令

  • hexo clean 清除编辑后生成的静态文件,一般部署前都会执行一遍,防止上次部署结果影响新的文件内容
  • hexo generate 编辑生成静态页面等
  • hexo server 启动服务
  • hexo develop 部署到远程github,需要修改配置文件,稍后介绍

基本上用到的就是这些命令,为了方便可以设置快捷指令,执行如下命令,会在跟目录生成一个.bash_profile文件,同时打开.bash_profile进入编辑模式

➜  ~ git:(master) ✗ cd ~
➜  ~ git:(master) ✗ vi .bash_profile 

然后输入以下内容,进行保存,linux命令

alias hexo clean=hexo c
alias hexo generate=hexo g
alias hexo server=hexo s
alias hexo develop=hexo d
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
-- INSERT --

执行如下命令,让文件生效

➜  ~ git:(master) ✗ source .bash_profile

至此,快捷指令设置完成

本地部署

然后cd进入本地博客根目录,执行命令

➜  ~ git:(master) ✗ hexo c
➜  ~ git:(master) ✗ hexo d
➜  ~ git:(master) ✗ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

看到如下信息就可以在本地访问http://localhost:4000/ 查看博客主页了

远程部署

部署到元辰github上需要修改一下本地博客配置文件,找到根目录的_config.yml文件,修改以下内容

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:你的github名/你的github名.github.io.git
  branch: master

然后就可以执行如下命令部署到github

➜  ~ git:(master) ✗ hexo d

看到如下信息说明部署完成,就可以通过https://你的github名.github.io/ 访问你的主页了

INFO  Deploy done: git

部署完成

至此,一个博客模板搭建完成,hexo还支持丰富的插件,包括RSS订阅,评论系统的接入,文章阅读量,打赏功能,第三方链接,如微博,发邮件等。

接入以上功能,让自己的博客更加炫酷!可以联系博主,博客主页有邮箱,微博,文章底部有微信公众号等联系方式。

谢谢!

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

推荐阅读更多精彩内容