Hexo NexT 博客與Github page 關聯指南

上篇文章　Hexo 博客框架NexT主題搭建指南

咱們已經在本地搭建好了Hexo博客框架NexT 主題的博客程序，可是這感受仍是遠遠不夠。

咱們還想把它部署到咱們的Github上，讓其餘人能夠看到咱們的博客。

那麼這節課就跟我一塊兒來學習吧～

0x01 準備工做

一個Github賬號

一個域名

一個Hexo NexT主題的博客程序

0x02 開始操做

1. 點擊 'New repository',建立一個版本倉庫

2. 設置倉庫名稱時有兩個注意的地方

好比好比個人GitHub 地址： https://github.com/geekxingyun

那麼名稱必須是geekxingyun,後綴必須是github.io

最後全稱： geekxingyun.github.io

頁面訪問到這個地址，咱們記錄下

把這個git地址處理記錄下，待會要用

https://github.com/geekxingyun/geekxingyun.github.io.git

3. 我以前已經購買了阿里雲域名，這裏配置下解析

這裏記錄類型咱們選擇CNAME,由於這種類型能夠將咱們的域名指向另一個域名。

 

 4. Github 配置

 

  往下滾動到最下面咱們能夠看到這個

輸入自定義域名後，點擊Save 以後你會看到下面這樣

到這裏我忍不住點擊打開了下，發現這個

到這裏咱們已經成功了一半了，咱們還須要將代碼部署到咱們的GitHub 上

5. 修改博客配置文件

修改_config.yml，在文件最底部添加以下代碼

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

Tips:這裏有個坑，我開始前綴用的https://github.com,結果後面一直部署失敗,必須改爲下面這種才行

repository: ssh://git@github.com/geekxingyun/geekxingyun.github.io.git

 完整配置文件：

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo
subtitle:
description:
keywords:
author: John Doe
language:
timezone:

# 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
  auto_detect: false
  tab_replace:
  
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
# 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
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

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

View Code

6. 初始化本身的賬號和密碼

這一步驟是爲了之後咱們用git命令提交再也不須要繁瑣的輸入咱們的Github賬號和密碼。

在C:\Users\fairy\Documents\HexoBlog 目錄下，執行下列命令配置你的用戶名

git config --global user.name "geekxingyun"

配置郵箱

git config --global user.email "fairy_xingyun@hotmail.com"

執行結果如圖所示：

進入.ssh 隱藏文件夾

cd  ~/.ssh

連續三個回車，生成密鑰，最後獲得了兩個文件：id_rsa和id_rsa.pub

ssh-keygen -t rsa -C "fairy_xingyun@hotmail.com"

生成文件默認路徑

 

輸入eval "$(ssh-agent -s)"，添加密鑰到ssh-agent

eval "$(ssh-agent -s)"

結果會像這樣：

 再次輸入命令

ssh-add ~/.ssh/id_rsa

 

7. 添加賬號SSH Keys

登陸Github，點擊頭像下的settings，添加ssh

 新建一個new ssh key，將id_rsa.pub文件裏的內容複製上去

輸入下列命令進行驗證是否成功

ssh -T git@github.com

Tips:出現上述字樣說明鏈接成功。

0x03 部署項目

這裏須要補充點部署方面的知識：https://hexo.io/docs/deployment.html

須要安裝一個Hexo插件

npm install hexo-deployer-git --save

 以後你應該能夠看到這樣的結果：

好了，咱們如今能夠把代碼進行下處理了 

清理下項目

hexo clean

 從新生成

hexo generate

部署

hexo deploy

 執行成功後會出現這個樣子：

打開咱們的域名：

http://www.520geek.cn/

訪問結果如圖所示：