网上可以进行博文写作和更新的地方很多,像简书就是一个非常优秀的平台。但是总觉得,在别人网站上的文章就像是寄宿,假如有一个拥有自己域名的空间来更新博客就像是有了自己的家。但是大部分人都预算有限,也不愿意为了一时的冲动去花这无所谓的银子,所幸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)。
这时候在终端输入
npm
可以看到有一串命令提示,说明安装成功,接下来,就可以配置Hexo了。
二、Hexo安装
关于Hexo的安装在Hexo官网上有很详细的步骤。
- 安装,使用以下命令行:
npm install -g hexo-cli
- 选取你想要放置Hexo文件的位置,比如我想放在文稿里面,于是我输入了:
cd ~/Documents
。 - 输入以下命令来在这个目录下面建立一个Hexo的目录。
hexo init <folder>
cd <folder>
npm install
注意这个folder的名字最好使用username.github.io的形式,其中的username是你GitHub账号的昵称。假如我GitHub的昵称为abc,那么我就输入hexo init abc.github.io
。这种命名方式涉及到GitHub Pages的命名规则,在下面再说。
-
你可以看到abc.github.io文件夹下面出现了如下的文件:
- 输入
hexo s
或者hexo server
,出现如下提示,输入下面的网址(localhost:4000/),就能看到博客的雏形了。
hexo s
命令通常用来测试用,可以在你上传改动之前,在本地提前看到改动的样子。
其实到了现在,你的博客就已经初步搭建完成了,只是这个博客你只能自己在本地才能看到而已。如果想要大家能够访问到,就应该放到Internet环境里面去。因为GitHub Pages可以帮助我们把存进仓库的Hexo博客转为网页内容,所以我们下一步就是把刚刚在本地创建的Hexo博客放到GitHub里面去。
三、上传到GitHub
1. 创建仓库
首先,你要有一个GitHub账号,没有的自己去申请,我这里就不啰嗦了。登录GitHub。
然后点击“New repository”创建一个新的仓库,仓库名前缀一定要和用户名一样,格式一定要是*****.github.io这样的。其他地方不需要修改,直接点“Create repository”。
原因就是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