Hexo+NexT+GitHub Pages从零开始搭建博客

网上可以进行博文写作和更新的地方很多,像简书就是一个非常优秀的平台。但是总觉得,在别人网站上的文章就像是寄宿,假如有一个拥有自己域名的空间来更新博客就像是有了自己的家。但是大部分人都预算有限,也不愿意为了一时的冲动去花这无所谓的银子,所幸GitHubPage可以免费托管自己的网站,在万网上注册一个域名也不算贵(最便宜的4块钱首年),于是就花了点时间鼓捣了属于自己的博客空间。

我使用的Hexo的静态博客框架,NexT的主题,本地调通了后推送到了GitHub,并且在万网申请了域名,设置好域名解析后,把GitHub的网站地址绑定到了我申请的域名。稍微美化后,具体效果就是这样的:陌浅轩。欢迎收藏!

一、环境配置

配置Hexo环境需要git和node.js,安装git和node.js需要HomeBrew的环境。

1. HomeBrew

在Mac终端输入brew,发现能够出现一大串提示信息,说明你的HomeBrew已经安装了,如果没有,就输入如下命令进行安装:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. git

如果Mac上本来就已经安装了Xcode,那么就不用另外安装git了,Xcode已经自带了。
如果需要安装,那么输入以下命令:

brew install git

3. node.js

最方便的方式就是直接从node.js的官网上面去下载安装包,然后直接进行安装。请下载LTS版本(目前为v6.10.1 LTS)。

Node.js安装包

这时候在终端输入npm可以看到有一串命令提示,说明安装成功,接下来,就可以配置Hexo了。

二、Hexo安装

关于Hexo的安装在Hexo官网上有很详细的步骤。

  1. 安装,使用以下命令行:
npm install -g hexo-cli
  1. 选取你想要放置Hexo文件的位置,比如我想放在文稿里面,于是我输入了:cd ~/Documents
  2. 输入以下命令来在这个目录下面建立一个Hexo的目录。
hexo init <folder>
cd <folder>
npm install

注意这个folder的名字最好使用username.github.io的形式,其中的username是你GitHub账号的昵称。假如我GitHub的昵称为abc,那么我就输入hexo init abc.github.io。这种命名方式涉及到GitHub Pages的命名规则,在下面再说。

  1. 你可以看到abc.github.io文件夹下面出现了如下的文件:


    Hexo文件系统
  2. 输入hexo s或者hexo server,出现如下提示,输入下面的网址(localhost:4000/),就能看到博客的雏形了。

    hexo s命令通常用来测试用,可以在你上传改动之前,在本地提前看到改动的样子。

其实到了现在,你的博客就已经初步搭建完成了,只是这个博客你只能自己在本地才能看到而已。如果想要大家能够访问到,就应该放到Internet环境里面去。因为GitHub Pages可以帮助我们把存进仓库的Hexo博客转为网页内容,所以我们下一步就是把刚刚在本地创建的Hexo博客放到GitHub里面去。

三、上传到GitHub

1. 创建仓库

首先,你要有一个GitHub账号,没有的自己去申请,我这里就不啰嗦了。登录GitHub
然后点击“New repository”创建一个新的仓库,仓库名前缀一定要和用户名一样,格式一定要是*****.github.io这样的。其他地方不需要修改,直接点“Create repository”。

创建Hexo仓库

原因就是GitHub Pages的域名就是github.io,如果想使用这个服务就要用这个域名,不然你的网页是呈现不出来的。

上图是四种GitHub Pages站点创建方式,我使用的是第一种。发现没,不管哪种,域名都是github.io。分支一般使用master分支,还可以使用gh-pages分支和master分支下的/docs文件夹存放Hexo博客,但是我就不舍近取远了。

2. 关联远程仓库

在本地打开根目录下面的_config.yml文件(可以使用vim,我用的Sublime神器)。最下面有个deploy,type设置为git,branch设置为master,repo设置为你的HTTPS或者SSH方式的URL:



我使用的SSH,如下图:



当然,如果怕麻烦,你们也可以使用HTTPS,因为使用SSH需要配置本地秘钥,HTTPS只需要在需要的时候输入账号密码就可以了。

3. 进行推送

推送一般分三步

  • hexo clean
  • hexo generate (或者hexo g)
  • hexo deploy (或者hexo d)

第二步和第三步可以精简为hexo d -g或者hexo g -d
这时候,在浏览器输入*.github.io,应该能看到之前你在本地测试的时候看到的网页了。

四、添加NexT主题

NexT主题作为一款“精于心,简于形”的主题,很受Hexo用户的喜爱,相关的文档可以参考官方文档。上面说的很清楚,自我感觉讲的没官方的清除,就不多浪费你们的眼球了。注意_config.yml文件是站点配置文件,还是主题配置文件的区别就好了。

Next主题的最新版本的GitHub库位置已经更换,Next官网上是旧的https://github.com/iissnan/hexo-theme-next ,最新的Next主题请转到https://github.com/theme-next/hexo-theme-next .

到这里,你只需要把文件进行推送就可以看到你的崭新的NexT主题的博客页面了(别忘了先clean再推送)。

五、绑定个人域名

虽然别人能通过*.github.io访问到你的博客,但是使用这个域名毕竟有些不爽,要是能使用自己的个性域名多好啊!

1. 拥有一个域名

我是在万网申请的个人域名。打开万网,登录阿里云(如果没有就注册一个)。首先检查自己想要注册的域名有没有被占用。


点击“查域名”后,你看到一个域名的列表,可以看到有没有被注册,以及价格等。你可以选择合适的域名进行购买。我购买的.win的域名很便宜,首年4块钱,以后每年7块。如果稍微资金充裕些,建议配套上云解析热销版,不到20块钱,增加一些安全服务,加快解析速度,也是很划算的。
购买后,这个域名就是属于你的了,一定要实名认证,不然无法进行绑定。

2. 配置解析

  • 进入万网控制台,进入域名服务,可以看到自己刚刚购买的域名,如果没有实名认证,是不会显示“正常”的。


  • 点击右侧的“解析”,进入云解析界面。点击添加解析(不要进入新手引导),添加如下的三个解析:

    主机记录分别是*,@,www,记录值是(你的用户名).github.io. ,一定不要丢掉最后那个点。
  • 其中就是所有的你注册的域名的子域名都指向咱们的博客,@的是前面没有www之类的字段的域名,最后的www作为常用的,可以也单独设置一下,不过你们也看到了,我最后一个是暂停状态,不过也不影响我使用啊~因为就包括www了。
  • 最后一步,在本地根目录下的source文件夹下面建立一个CNAME文件,一定要全部大写!一定不要后缀名!然后在里面输入你的域名。比如我输入的是lifan666.win。这个是有重定向功能的,你的所有其他子域名(比如www.lifan666.win)会被重定向到这个域名(比如lifan666.win)。我更希望使用的是www.lifan666.win,所有我在这个文件里面最后改成了www.lifan666.win。所有你们可以试试,网址输入lifan666.win,最后是不是显示的是www.lifan666.win啦~
  • 最最后一步,hexo clean然后hexo d -g,然后等待DNS生效后,就能定向成功了!

到这里,你的博客就基本搭建成功啦,剩下的工作,就是对博客进行各种细节优化啦,添加各种效果啦,尽力去完善吧!O(∩_∩)O

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

推荐阅读更多精彩内容