Github Pages+Hexo+阿里云域名绑定

1.Github Pages

Github Pages能够免费托管,因此把博客托管到github上。node

首先,建立一个github仓库,仓库的命名格式为:yourusername.github.io,而后根据提示进行下一步。
git

2.Hexo搭建博客

本博客中使用了Anisina的主题,因此会详细介绍下按照Anisina主题搭建的步骤。github

1.准备工做

1.首先要安装下node.js(官网下载),若是已经安装能够跳过。
2.安装git(官网下载)
3.安装Hexo:npm

$ npm install -g hexo复制代码

安装成功后,使用version命令查看是否安装成功json

& hexo version复制代码

4.本地静态hexo博客缓存

  • 新建一个文件夹,做为你博客文件的根目录
  • 命令行进入该文件夹下,输入如下命令,生成模板:
$ hexo init复制代码
  • 模板生成后,输入如下命令:
$ npm install复制代码
  • 最后能够运行hexo s命令查看是否搭建成功

2.下载主题

git clone https://github.com/Haojen/hexo-theme-Anisina.git themes/Anisina复制代码

3.配置博客

1.配置博客封面图

将img的alt属性设置为post-cover便可bash

2.用户信息配置

注意:必须在主题的_config.yml中配置一下信息,而非博客根目录下的_config.yml中配置。hexo

user_name: your name
user_avatar: your avatar
user_location: your location
user_description: about you introduction

// this info will show About page
user_contact: 
user_introduction:

// config you share info
weibo_username: 
zhihu_username: 
github_username:
twitter_username: 
facebook_username:  
linkedin_username:复制代码

3.建立About页面

在根目录下的source文件夹里建立一个about文件夹,而后在about文件夹里新建index.md文件,在文件中添加以下代码,并保存:app

title: about
date: 2017-09-11 23:12:50
layout: about复制代码

须要提一下的是,做者尚未支持对About页面内容的修改,因此本博客搭建的时候,直接在themes/Anisina/layout/about.ejs中修改的内容。框架

4.建立Works页面

在根目录下的source文件夹中建立works文件夹,如上新建一个index.md,添加以下内容到文件中,并保存:

title: My Works
date: 2017-09-11 23:16:50
layout: works复制代码

而后在source文件夹下建立一个_data文件夹,打开文件夹,新建project.json文件,文件格式以下:

{
  "Apple 官网临摹": {
    "title": "Apple 官网临摹",
    "subTitle": "根据美版apple官网临摹",
    "img_link": "http://o7bkkhiex.bkt.clouddn.com/item-apple.jpg",
    "use" : ["jQuery"],
    "link": "http://haojen.github.io/apple-linmo/",
    "data":"2016.3",
    "direction": "临摹 2016 年三月份 Apple 美版单页面。"
  },
   "Anisina (阿尼丝娜)": {
    "title": "Anisina",
    "subTitle": "基于 Hexo 制做的我的博客主题",
    "img_link": "http://o7bkkhiex.bkt.clouddn.com/Anisina.png",
    "use" : ["jQuery","Bootstrap","Node.js","EJS","Hexo","SASS"],
    "link": "http://haojen.github.io/",
    "data": "2016.5",
    "direction":
        "Hexo 是某位台湾友人基于 Node.js 编写的博客框架"
  }
}复制代码

5.添加评论系统

主题中支持来比力的配置,因此在_config.yml配置文件中添加两行配置代码便可。

use_livere: true
livere_uid: 你的来比力的注册uid复制代码

6.添加百度统计

主题中添加了百度统计的js代码,在配置文件中直接添加track_id便可:

ba_track_id: your track id复制代码

7.部署Hexo博客

  • 建站
hexo init yourname
cd yourname 
npm install复制代码
  • 配置_config.yml的部署:
deploy:
  type: git
  repo: http://github.com/yousername/yourusername.github.io
  branch: master #默认master复制代码
  • 清除缓存
$ hexo clean复制代码
  • 生成静态网页
$ hexo g复制代码
  • 本地查看效果,执行完后能够经过http://localhost:4000查看本地效果
$ hexo s复制代码
  • 部署到git
$ hexo d复制代码

3.绑定阿里云域名

以前在阿里云买了域名,域名购买成功以后要等待实名认证。

1.添加CNAME文件

在根目录下的source文件夹下新建CNAME文件,没有后缀。

在Sublime Text中打开CNAME文件,在里边添加你的域名信息,如图:

保存以后,从新部署到github pages上。

2.给github项目添加

在项目的Settings中,添加Custom domain到本身的域名:

3.给域名添加解析记录

1.ping你本身的yourname.github.io获取到ip地址:

2.打开域名的解析列表,添加两条解析记录:

更换以后,可能须要等一段时间才能生效,差很少就大功告成啦。

相关文章
相关标签/搜索