基于Hexo+GitHub Pages+独立域名 搭建博客详细教程

## 1、摘要


这是一篇利用GitHub Pages以及Hexo以及本身的独立域名来搭建本身的我的博客。

本文参考多篇文章（具体参看文章最后）并记录了过程当中遇到的问题以及解决方案！

此博客用于之后须要备用，并为其余人提供指导。

<!-- more -->


## 2、系统环境配置
咱们须要如下环境：
   Windows 10 
   Node.js
   Git
### 安装node.js
   [下载Node.js](https://nodejs.org/download/)
在 Windows 环境下安装 Node.js 很是简单，仅须到官网下载安装文件并执行便可完成安装。
### 安装Git
   [下载Git](http://git-scm.com/download/)
一样一路next便可！

  · 安装教程： [如何在Windows下安装Git](http://jingyan.baidu.com/article/90895e0fb3495f64ed6b0b50.html)

## 3、安装Hexo


Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其余渲染引擎）解析文章，在几秒内，便可利用靓丽的主题生成静态网页。

在任意盘新建hexo文件夹并右键，选择Bit Bash Here，如图：

   
     
而后输入安装hexo命令
     
    $ npm install -g hexo-cli


接下来咱们对hexo 进行初始化

    $ hexo init
而后执行如下命令，系依赖包统会自动根据package.json文件中dependence的排位置安装全部的
    $ npm install
而后生成部署文件，启动本地服务

    $ hexo g #或者hexo generate
    $ hexo s #或者hexo server

以后再http：//localhost：4000/ 查看

hexo的几个经常使用命令

    hexo generate (hexo g) 生成静态文件，会在当前目录下生成一个新的叫作public的文件夹
    hexo server (hexo s) 启动本地web服务，用于博客的预览
    hexo deploy (hexo d) 部署博客到远端服务器
    hexo new "postName" #新建文章
    hexo new page "pageName" #新建页面

能够简写为

    $ hexo n == hexo new
    $ hexo g == hexo generate
    $ hexo s == hexo server
    $ hexo d == hexo deploy

其实就是单词的首字母

之后新建文章或者修改，能够先在本地预览以后进行部署




## 4、GitHub Pages设置


### GitHub的优势
GitHub是基于git实现的代码托管。git多是目前最好用的版本控制系统了，很是受欢迎。 

GitHub能够无偿使用，而且快速稳定。 

Github上面的世界很精彩，用久了你的眼界会开阔不少。

### 什么是GitHub Pages？
Github Pages能够被认为是用户编写的、托管在github上的静态网页。GitHub Pages 本用于介绍托管在GitHub的项目，不过，因为他的空间免费稳定，用来作搭建一个博客再好不过了。

### 为何使用GitHub Pages
能够绑定你的域名(但只能绑定一个)。 

简单快捷，使用Github Pages能够为你提供一个免费的服务器，免去了本身搭建服务器和写数据库的麻烦.



## 5、相关操做



### 注册GitHub帐号

在建立博客以前，固然必须有GitHub的账号，该账号将用来建立项目，默认的域名username.github.com/projectName中的username也要用到这个账号。（请记住username，以后会屡次用到）

注意：下面涉及到的一些命令凡是更用户名和项目名有关的一概会用这里的username和projectName代替，注意替换 

访问：[http://www.github.com/](http://www.github.com/)，注册你的username和邮箱，邮箱十分重要，GitHub上不少通知都是经过邮箱的。好比你的主页上传并构建成功会经过邮箱通知，更重要的是，若是构建失败的话也会在邮件中说明缘由。


### 建立项目仓库


在建立博客以前，还须要用已有的账号建立一个项目，上面那个连接的projectName将是这里即将建立的项目名称。

在Git中，项目被称为仓库(Repository)，仓库顾名思义，固然能够包含代码或者非代码。未来咱们的网页或者模板实际上都是保存在这个仓库中的。

登陆后，访问[https://github.com/new](https://github.com/new)，建立仓库以下图：

   

每一个账号只能有一个仓库来存放我的主页，并且仓库的名字必须是username/username.github.io，这是特殊的命名约定。你能够经过http://username.github.io 来访问你的我的主页。

建立了仓库后，咱们就须要管理它，不管是管理本地仓库仍是远程仓库都须要Git客户端；Git客户端实际上十分强大，它自己就能够offline的建立本地仓库，而本地仓库和远程仓库之间的同步也是经过Git客户端完成的。


### 配置SSH


上传文件须要配置ssh key，否则没法上传。 
首先先检查一下本地是否已经存在ssh key,在Git Bash输入如下指令（任意位置点击鼠标右键），检查是否已经存在了SSH keys。

    $ ls -al ~/.ssh

若是不存在就不要紧，存在就删除其中的全部文件

  

设置你的那么和email（若是你安装git时已经有了这步操做就跳过，name能够随意，但最好设置成你的github的name防止遗忘。邮箱与你的github邮箱没什么关系，可是最好写为同一个，好记住）

    $ git config --global user.name "name"
    $ git config --global user.email "<your email>"


### 生成ssh密钥


输入如下指令（邮箱就是你注册Github时候的邮箱）后，回车：
    $ ssh-keygen -t rsa -C "XXXXX@qq.com"

一路回车就能够了，若是设置了密码就记住。

这一步在~/.ssh/下生成了两个文件id_rsa 和 id_rsa.pub


### 获取key


    $ cat ~/.ssh/id_rsa.pub

而后拷贝key（key是以ssr（应该是这个开头的）开头 你的邮箱结尾的一长串字符。


### 在GitHub上添加SSH密钥


在[https://github.com/settings/keys](https://github.com/settings/keys)下 add new ssh key 
  

title可随意填写，key就是咱们拷贝的key

接下来测试一下是否配置正确。

输入一下命令：

    $ ssh git@github.com

成功后大概会出现一下内容：（可能会有部分不一致）

    The authenticity of host 'github.com (192.30.252.128)' can't be established.
    RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
    Are you sure you want to continue connecting (yes/no)? yes
    Warning: Permanently added 'github.com,192.30.252.128' (RSA) to the list of known hosts.
    Hi git-xuhao! You've successfully authenticated, but GitHub does not provide shell access.
    Connection to github.com closed.




##  6、部署到GitHub


### 配置_config.yml

编辑 你所创建的hexo文件夹中_config.yml（用记事本打开）修改deployment部分。

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

自行替换成你的GitHub的名称。注意：每一个：后面必须有一个空格！！！


### 安装Git包


    $ npm install hexo-deployer-git --save


### 部署到GitHub上


    $ hexo deploy

如今咱们能够经过访问 [http://git-xuhao.github.io/](http://git-xuhao.github.io/) 来访问咱们本身的博客啦,能够看到咱们的博客已成功搭建，接下来就是一些主题的优化和配置呢。

    ### 配置文件的相关说明

    # Hexo Configuration
    ## Docs: http://hexo.io/docs/configuration.html
    ## Source: https://github.com/hexojs/hexo/
    
    # Site  这下面的几项配置都很简单，你看个人博客就知道分别是什么意思
    title: blog name    #博客名
    subtitle: Goals determine what you are going to be  #副标题
    description: Goals determine what you are going to be #用于搜索，没有直观表现
    author: huangjunhui #做者
    language: zh-CN #语言
    timezone:   #时区，此处不填写，hexo会以你目前电脑的时区为默认值

    # URL   暂不配置，使用默认值
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: http://yoursite.com
    root: /
    permalink: :year/:month/:day/:title/
    permalink_defaults:

    # Directory     暂不配置，使用默认值
    source_dir: source
    public_dir: public
    tag_dir: tags
    archive_dir: archives
    category_dir: categories
    code_dir: downloads/code
    i18n_dir: :lang
    skip_render:

    # Writing   文章布局等，使用默认值
    new_post_name: :title.md # File name of new posts
    default_layout: post
    titlecase: false # Transform title into titlecase
    external_link: true # Open external links in new tab
    filename_case: 0
    render_drafts: false
    post_asset_folder: false
    relative_link: false
    future: true
    highlight:
      enable: true
      line_number: true
      tab_replace:

    # Category & Tag    暂不配置，使用默认值
    default_category: uncategorized
    category_map:
    tag_map:

    # Date / Time format    时间格式，使用默认值
    ## Hexo uses Moment.js to parse and display date
    ## You can customize the date format as defined in
    ## http://momentjs.com/docs/#/displaying/format/
    date_format: YYYY-MM-DD
    time_format: HH:mm:ss

    # Pagination    
    ## Set per_page to 0 to disable pagination
    per_page: 10    #每页显示的文章数，0表示不分页
    pagination_dir: page
    
    # Extensions    插件配置，暂时不配置
    ## Plugins: http://hexo.io/plugins/
    ## Themes: http://hexo.io/themes/
    plugins:
    - hexo-generator-feed
    theme: light    #使用的主题

    feed:   #以后配置rss会用，此处先不配置这个
      type: atom
      path: atom.xml
      limit: 20  

    # Deployment    用于部署到github，以前已经配置过
    ## Docs: http://hexo.io/docs/deployment.html

    deploy:
      type: git
      repo: ssh://git@github.com/Asuna520/Asuna520.github.io
      branch: master





## 7、如何添加一篇文章

新建一篇博文可经过如下的命令

    $ hexo new "name"

其中name为博文的名字，创建完成以后，能够在./source/_posts文件夹下发现咱们刚刚创建的 name.md文件。使用你熟悉的编辑器打开，即可以进行博文的撰写。博文支持MarkDown语法的编写，下面是一个示例文件的内容（推荐使用MarkDown）（使用MarkDown时须要安装[awesomium_v1.6.6_sdk_win](http://markdownpad.com/download/awesomium_v1.6.6_sdk_win.exe
))
MarkDown界面以下：
  


    ---
    title: name 
    date: 2016-04-06 10:34:21
    permalink: （url中显示的标题）
    tags: 
    - 开始
    - 日志
    categories: 
    - 日志
    ---
    Hello world，Test！！

博文写好以后，在每次部署前，须要将博客生成静态文件

    $ hexo g

生成以后进行部署

    $ hexo d

而后打开咱们的博客 http://Asuna520.github.io/ 已经能够看到刚刚新建的博文。




## 8、主题相关

你会发现你预览的博客会很大众化，你想让你的博客不同凡响？吸引更多的关注？

能够参考知乎的主题推荐：

[有哪些好看Hexo主题](https://www.zhihu.com/question/24422335)

我使用的是第一个next主题，具体相关操做，更多关于主题的设置请自行查阅相关文档，固然若是你认识我，也能够联系我进行询问。




## 9、专属域名的绑定

这时候，你会发现你的域名不怎么好使用，你想要一个属于本身的独特的域名。

恩，首先，你须要去买一个域名。（**推荐阿里云 .xyz的域名 第一年只须要6元，并且.xyz颇有潜力，谷歌母公司也是使用的.xyz域名哦**）

进入阿里云,选择解析

 

按照图片所示添加解析，其中ip地址，以及其余相关内容所有换成本身的

 

ip地址 能够经过为192.30.252.154   和192.30.252.153这两个固定ip！
**（图片因为本身一开始使用时，没注意，因此ip错了。。。懒得改了）**

 

最后，在source中添加文件  CHAME  不带有任何后缀！！！

用记事本打开以后，加入你本身的域名xxxxx.xyz 不须要www也不须要http的前缀！！！！

从新部署一下！

恭喜，过一下子就能够经过你的域名看到你的博客啦~~~~



# 10、总结 #



大体过程基本上就是这样了，其中个别步骤，或者部分细节性问题没有赘述，有问题请自行百度或者联系我~~~

做为一个程序员必定要有本身独立解决问题的能力哦~~~记住Google与你同在~~~~

加油！！！




本文主要部分来自于：[基于Hexo+GitHub Pages 搭建我的博客教程](http://xuhaoblog.com/hexo-github-pages.html)