Hexo+NexT+GitHub简易建站流程

一直以来,我都急切的渴望拥有一个属于自己的博客网站,但是两年来,由于各种原因一直没能是真正的实践。正好这几天闲了下来,无意中看他人博客时发现了个人建站的曙光。

温馨提示:该网站使用Hexo+NexT+GitHubPage构建,如果你已了解并成功建立了自己的网站,那么请及时下车,免得耽误您的时间。如果你还不了解并用建站的渴望,那么接着往下看。下面开始开车啦...

先打个广告哈,这是我刚建的网站:Welcome to KCrason's blog ,期待大佬们的践踏!

搭建环境


  • 安装git客户端。鉴于git客户端在国内的下载速度慢的感人,在此提供一个超快的下载地址。传送门
  • 安装Node.js。这里只要直接从官网首页下载他的.exe的文件直接安装即可。
  • 安装Hexo。安装Hexo需要使用Git Bash,因此先找到刚才安装的git客户端找到Git Bash并打开。
    1、输入$ npm install -g hexo-cli,该命令为在本地安装Hexo。
    2、在任意一个盘中的任意位置建立一个文件夹,名称随便取,最好为youname.github.io。比如我在D盘建立了一个名为kcrason.github.io的文件夹。
    3、复制你创建的文件夹地址,接着在Git Bash中输入$ hexo init D:\kcrason.github.io(注意,将路径该成你自己的)。该命令将会复制建站所需文件,并初始化相关建站参数。这个过程为需要网络,耐心登录片刻。
    4、接着,输入$ cd D:\kcrason.github.io命令。
    5、最后,输入$ npm install命令。
    6、输入$ hexo g,该命令用于生成静态文件。
    7、输入$ hexo s,改命令为启动Hexo服务。
    8、在浏览器输入:localhost:4000,回车,出现下面这个界面,恭喜你,成功了三分之一了。
    Hexo+NexT+GitHub简易建站流程_第1张图片
    Hexo建站

Hexo安裝NexT主題


Hexo的默认主题为landscape。本教程将使用另一款现极为流行的主题NexT为基础。后续的主题相关配置都是基于NexT的。如果你要建站,我也强烈建议你使用该主题。

  • 安装步骤并切换至NexT主题
    1、使用Git Bash输入$ cd D:\kcrason.github.io进入网站文件夹。
    2、接着输入$ git clone https://github.com/iissnan/hexo-theme-next themes/next克隆最新版本的Next主题。当然你也可以使用稳定版,详情请查看官网。下载会有点慢哦,别着急~
    3、使用Notepad++/Sublime Text打开站点配置文件,即\kcrason.github.io\_config.yml文件。找到 theme字段,并将其值由默认的landscape更改为next
    4、输入$ hexo g,重新生成静态文件。
    5、输入$ hexo s,启动Hexo服务。
    6、再次输入在浏览器输入:localhost:4000,回车。这时候你会看到你的网站界面已经是下面这样啦。
    Hexo+NexT+GitHub简易建站流程_第2张图片
    NexT主题下的站点

Hexo站点配置和主题配置


Hexo的配置包括多个部分,广义上来说主要是Hexo本身的配置和Hexo主题的配置。Hexo本身配置主要在\kcrason.github.io\_config.yml配置。而主题的配置则在\kcrason.github.io\themes\next\_config.yml配置。其中,以主题配置为主。

Hexo站点配置

Hexo站点的配置是在\kcrason.github.io\_config.yml文件中进行的,其一般包括以下几个部分,自行根据需求修改站点配置文件当中的值。

Hexo+NexT+GitHub简易建站流程_第3张图片
站点配置一般内容

Hexo主题配置

Hexo的主题配置是在\kcrason.github.io\themes\next\_config.yml文件进行配置,主题的配置包括多个方面。这方面的配置查看NexT的官方文档即可。

将Hexo站点托管至GitHub


  • 在GitHub创建一个新的repository,名称为:youname.github.io
    Hexo+NexT+GitHub简易建站流程_第4张图片
    Create a new repository
  • 站点部署
    1、打开Git Bash,输入$ npm install hexo-deployer-git --save。该命令用于安装hexo-deployer-git。目的是将本地和Hexo网站部署到刚刚在GitHub创建的repository中。
    2、打开\kcrason.github.io\_config.yml,找到其中的deploy字段。修改和增加如下内容。
deploy:
  type: git
  repo: https://github.com/KCrason/kcrason.github.io.git(你自己的在GitHub的repository地址)
  branch: master

3、在Git Bash中输入$ hexo clean && hexo g && hexo d命令。该命令为三条命令的合并:清理本地缓存->重新编译生成静态页面->上传站点内容至GitHub仓库。
4、此时在浏览器输入:https://youname.github.io就能访问了。比如我的为https://kcrason.github.io。至此,免费的个人博客算是完成了,如果你想使用自己的域名。那么就要花一点钱买一个域名了。下面讲如何将现有的站点绑定自己购买的域名。

将Hexo站点绑定新的域名


域名购买

1、本人是在阿里的万网上购买的,阿里巴巴还是不错的。现在买.com域名送一个.xyz的域名。

域名

成功购买域名后,先在站点的source路径下建立一个名为 CNAME的文件,比如我的路径为 D:\kcrason.github.io\source。注意文件名称必须大写。然后在文件中填写你的域名(去掉前面的 www)。如:我申请的域名为: www.kcrason.com,就只要在文件中填写 kcrason.com即可。
2、打开Git Bash,输入 $ hexo d命令,将 CNAME上传到GitHub的仓库中。

域名解析

打开阿里云后台,打开你所购买的域名列表,点击指定域名右边的解析。然后添加解析。

  • 第一个解析,记录类型选择CHAME,主机记录为@,记录值为youname.github.com(也就是你所建立的站点域名)。其他默认即可。
    Hexo+NexT+GitHub简易建站流程_第5张图片
    添加@解析
  • 再次点击添加解析,记录类型选择CHAME,主机记录为www,记录值为youname.github.com(也就是你所建立的站点域名)。其他默认即可。
    Hexo+NexT+GitHub简易建站流程_第6张图片
    添加www解析

    最后,等待几分钟,输入新的域名,发现可以访问啦!

你可能感兴趣的:(Hexo+NexT+GitHub简易建站流程)