部署前介紹

Hexo 是什么

• Hexo 的中文官網(wǎng)：http://hexo.io/zh-cn/
• 作者 Tommy Chen：https://zespia.tw/
• 在我的理解里面：Hexo 是一個基于 Node.js 快速搔课、簡潔且高效的博客框架庶喜，可以將 Markdown 文件快速的生成靜態(tài)網(wǎng)頁，托管在 GitHub Pages 上。
• 而官網(wǎng)自己是這樣說的：

Hexo 是一個快速、簡潔且高效的博客框架狂窑。Hexo 使用 Markdown（或其他渲染引擎）解析文章走越，在幾秒內(nèi)杏糙，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁玫芦。

為什么要用 Hexo

• 我：因為其他博客框架太爛了
• Tommy Chen：https://zespia.tw/blog/2012/10/11/hexo-debut/

適合人群

• 有 IntelliJ IDEA 基礎(chǔ)的程序員（或者你使用的是 JetBrains 家的其他產(chǎn)品）
• 只想搭建一個技術(shù)博客的人（真心別搞太多衷快，你沒那么多精力）

文章要求

• 如果是 Git，Node.js 的新人姨俩，則這篇文章不要間斷操作，要一氣呵成师郑，不然可能會遇到各種問題环葵。

本文環(huán)境

• 系統(tǒng)：
  • Windows 10（64 位）
• 軟件：
  • git：2.7.0.2-64-bit
  • IntelliJ IDEA：15.0.4
  • node.js：v5.7.0-64-bit Stable
• 賬號：
  • Github：https://github.com/
  • DNSPOD：https://www.dnspod.cn/

搭建所需軟件

• 各個軟件官網(wǎng)：
  • git：http://git-scm.com/
  • IntelliJ IDEA：https://www.jetbrains.com/idea/
  • node.js：http://nodejs.org/
• 所需軟件集合：
  • 上面三者集合包：http://pan.baidu.com/s/1bvbo8e

文章前提

• 如果你對上面要求的軟件一個都不了解的話，建議你先看如下內(nèi)容（只是讓你們先了解下宝冕，當(dāng)時別照著文章內(nèi)容做）：
  • http://www.reibang.com/p/05289a4bc8b2
  • http://www.reibang.com/p/858ecf233db9
  • http://ibruce.info/2013/11/22/hexo-your-blog/
  • http://www.reibang.com/p/701b1095da11
  • http://www.reibang.com/p/05289a4bc8b2
  • http://www.reibang.com/p/e858a90d0a17
  • http://www.reibang.com/p/db7e64d86067
  • http://mritd.me/2015/12/31/Github-%E6%90%AD%E5%BB%BA-Hexo-%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2/
  • http://www.reibang.com/p/e7413116e9d4

域名綁定

• 如果你一開始就打算要綁定域名张遭，則下面教程中所有可以填寫域名的地方你都填寫上你要綁定的域名，如果你沒獨立域名地梨，那就使用 Github 默認(rèn)給你的：XXXXXX.github.io 域名即可菊卷。

部署開始

git 安裝

• 雙擊運行 Git-2.7.0.2-64-bit.exe，接下來一律下一步宝剖，不需要多余的選擇洁闰，假設(shè)你安裝的目錄位置跟我一樣：C:\Program Files\Git
• 打開 Git Bash（路徑：C:\Program Files\Git\git-bash.exe），輸入：git --version
  • 如下圖万细，如果出現(xiàn)：git version 2.7.0.windows.2扑眉，這表示安裝成功
  • 驗證 git 安裝

Node.js 安裝

• 雙擊運行 node-v5.7.0-x64.msi，接下來一律下一步，不需要多余的選擇腰素。
• 安裝完之后聘裁，打開 Git Bash，輸入：npm -v
  • 如下圖弓千，如果出現(xiàn)：3.6.0衡便，則表示 Node.js 安裝成功
  • 驗證 node.js 安裝

Node.js 源設(shè)置

• 在安裝 Hexo 之前，先說一下 Node.js 的源洋访，Node.js 官方源默認(rèn)是：http://registry.npmjs.org镣陕，但是由于在國外，說不定你使用的時候就抽風(fēng)無法下載任何軟件捌显。所以我們決定暫時使用淘寶提供的源茁彭，淘寶源官網(wǎng)：http://npm.taobao.org/
• 在 Git Bash 中我們執(zhí)行下面這一句（這是一整句的）：

alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

• 現(xiàn)在驗證下是否可以使用淘寶的 cnpm 命令：cnpm info express
  • 如果能輸出一大堆介紹，則說明成功了扶歪，以后每次要使用淘寶的源都需要這樣來±矸危現(xiàn)在除了默認(rèn)的 npm，還多了一個 cnpm 可以使用善镰，我們下面有關(guān)安裝的講解內(nèi)容也都是基于此臨時命令妹萨。
  • 如果輸出：bash: cnpm: command not found，則表示沒成功炫欺，需要你在排查下

安裝 Hexo 框架

• 安裝 Hexo（注意乎完，現(xiàn)在是 cnpm 開頭了，不是 npm 了）：cnpm install -g hexo-cli
  • 安裝時間不一定很快品洛，有可能需要等 3 ~ 5 分鐘树姨。
  • 安裝完有 WARN 警告也沒關(guān)系的。

創(chuàng)建 Hexo 項目

• 現(xiàn)在假設(shè)我要創(chuàng)建一個名為 hexo 的項目桥状，項目目錄就放在：E:\git_work_space 目錄下帽揪，所以我們在 E:\git_work_space 目錄下創(chuàng)建一個 hexo 目錄。現(xiàn)在這個項目的全路徑是：E:\git_work_space\hexo
• 打開 Git Bash：
  • 進(jìn)入該目錄：cd e:/git_work_space/hexo
  • 然后執(zhí)行：hexo init辅斟，這個時間也會比較長转晰，也有可能要等幾分鐘，有顯示 WARN 也不用管
  • 最后執(zhí)行：cnpm install士飒，有顯示 WARN 也不用管
  • 安裝完成之后查邢，E:\git_work_space\hexo 目錄結(jié)構(gòu)是這樣的：
    • 安裝 hexo 后的目錄結(jié)構(gòu)
  • 現(xiàn)在我們啟動 hexo 本地服務(wù)，看下默認(rèn)的博客是怎樣的酵幕，命令：hexo server
  • 現(xiàn)在用瀏覽器訪問：http://localhost:4000/扰藕，效果如下圖
    • 默認(rèn)模板效果
  • 如果要停止 hexo 服務(wù)：在 Git Bash 下按 Ctrl + C 即可

選用其他主題

• 由于默認(rèn)主題太大眾了，所以現(xiàn)在我們換個主題芳撒。
• 你可以去這里找主題：
  • hexo-theme：https://hexo.io/themes/
  • hexo-github-theme-list：https://github.com/hexojs/hexo/wiki/Themes
  • 有那些好看的hexo主題实胸？：http://www.zhihu.com/question/24422335
• 我這里選擇的 yelee：https://github.com/MOxFIVE/hexo-theme-yelee
  • 原因是能最大化襯托出：目錄他嫡、文章內(nèi)容、代碼塊庐完。因為我對這個博客的定位就是用來放技術(shù)類內(nèi)容钢属，所以不會讓它太雜或是太花。只是目前這個顏色偏淺门躯，后續(xù)還需要調(diào)整淆党。
• 現(xiàn)在假設(shè)你跟我要用的模板是一樣：
  • 還是讓 Git Bash 保持在 E:\git_work_space\hexo 目錄下，然后輸入命令：git clone https://github.com/MOxFIVE/hexo-theme-yelee.git themes/yelee
  • 這樣就在 E:\git_work_space\hexo\themes 目錄下生成了一個 yelle 文件夾讶凉，里面有我們剛剛 clone 下來的主題內(nèi)容染乌。
  • 如果以后你不自己修改這個主題的話，可以考慮經(jīng)常更新下作者的更新內(nèi)容：
    • cd e:/git_work_space/hexo/themes/yelee
    • git pull origin master
• 下載好主題文件之后懂讯，我們現(xiàn)在要修改 E:\git_work_space\hexo 目錄下的項目配置文件：_config.yml荷憋，把對應(yīng)的主題目錄名改下，編輯如下圖褐望。
  • 修改主題目錄
• 更改主題目錄名后勒庄，我們還要重新生成主題靜態(tài)內(nèi)容：
  • 繼續(xù)在 Git Bash 中輸入命令：
    • 重新生成靜態(tài)博客的所有內(nèi)容：hexo generate
    • 重啟 hexo 本地服務(wù)：hexo server
    • 重新訪問：http://localhost:4000/，效果如下圖
    • 新主題效果

創(chuàng)建 Github pages 并 SSH 授權(quán)

• 現(xiàn)在假設(shè)你已經(jīng)有一個 Gtihub 賬號瘫里，你還需要一個特別的倉庫实蔽，特別在倉庫名就是你的 Github 賬號登錄名，比如我的用戶名是：judasn谨读，那我要創(chuàng)建的倉庫名字完整滴填寫是：judasn.github.io局装，具體效果如下圖。
  • 創(chuàng)建 github pages
• 創(chuàng)建好倉庫之后劳殖，要本地生成 SSH 秘鑰铐尚，方便電腦上的 git 軟件好提交內(nèi)容到 Github 上
  • 在 Git Bash 中，輸入：ssh-keygen -t rsa -C "你的郵箱地址"哆姻，然后回車宣增，回車，再回車填具，一共 3 次回車，具體含義自己 Google匆骗。
  • 比如我的：ssh-keygen -t rsa -C "jn3.141592654@gmail.com"劳景，生成后效果如下圖：
  • 生成 ssh 密鑰
  • 此時，生成密鑰后碉就，在你電腦目錄：C:\Users\你的計算機用戶名.ssh 下盟广，會生成兩個文件：
    • 私鑰：id_rsa
    • 公鑰：id_rsa.pub
    • 如果生成的不是這樣的文件，那刪除掉這兩個生成的瓮钥，重新執(zhí)行上面的命令筋量，讓它再一次生成烹吵。
  • 現(xiàn)在用記事本打開 id_rsa.pub，復(fù)制文件中的所有內(nèi)容桨武。
    • 訪問：https://github.com/settings/ssh肋拔，添加新秘鑰，效果如下圖
      • Title：自己隨便取
      • Key：把剛剛復(fù)制的都粘貼進(jìn)來
      • 添加密鑰

把本地的博客內(nèi)容同步到 Github 上

• 要把本地的靜態(tài)博客同步到 Github呀酸，我們還需要先安裝兩個跟部署相關(guān)的 hexo 插件：
  • 繼續(xù)在 Git Bash 中輸入：
  • cnpm install hexo -server --save
  • cnpm install hexo-deployer-git --save
• 編輯全局 hexo 的配置文件：_config.yml
  • 官網(wǎng)對此配置的介紹：https://hexo.io/zh-cn/docs/configuration.html
  • 我自己的編輯內(nèi)容初稿（你需要認(rèn)真看的是含有中文注釋的內(nèi)容）：

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

# Site凉蜂，這一塊區(qū)域主要是設(shè)置博客的主要說明，需要注意的是：每個冒號后面都是有一個空格性誉，然后再書寫自己的內(nèi)容的
title: YouMeek Code
subtitle: 這里只有代碼相關(guān)窿吩，要了解更多 >>> YouMeek.com
description: 這里是 YouMeek.com 一部分
author: Judas.n
email: 363379444@qq.com
language: zh-CN
timezone:

# URL，這一塊一般可以設(shè)置的是 url 這個參數(shù)错览，比如我要設(shè)置綁定域名的纫雁，這里就需要填寫我的域名信息
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://code.youmeek.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:

# 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: yelee

# Deployment
## 這里是重點，這里是修改發(fā)布地址倾哺，因為我們前面已經(jīng)加了 SSH 密鑰信息在 Github 設(shè)置里面了轧邪，所以只要我們電腦里面持有那兩個密鑰文件就可以無需密碼地跟 Github 做同步。
## 需要注意的是這里的 repo 采用的是 ssh 的地址悼粮，而不是 https 的闲勺。分支我們默認(rèn)采用 master 分支，以后你翅膀硬了要換其他也無所謂扣猫。
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:judasn/judasn.github.io.git
  branch: master
  

• 編輯全局配置后我們需要重新部署：
  • 繼續(xù)在 Git Bash 中輸入命令：
  • 先清除掉已經(jīng)生成的舊文件：hexo clean
  • 再生成一次靜態(tài)文件：hexo generate
  • 在本地預(yù)覽下：hexo server
  • 本地沒問題之后菜循，Ctrl + C 停掉本地預(yù)覽，使用部署命令部署到 Github 上：hexo deploy申尤，有彈出下面提示框癌幕，請輸入：yes
    • 確認(rèn)提交
  • 提交成功效果如下：
    • 提交成功
  • 訪問服務(wù)器地址進(jìn)行檢查：http://judasn.github.io，效果如下
    • 服務(wù)器效果
• 通過上面幾次流程我們也就可以總結(jié)：以后昧穿，每次發(fā)表新文章要部署都按這樣的流程來：
  • hexo clean
  • hexo generate
  • hexo deploy
• 也因為這幾個命令太頻繁了勺远，所以又有了精簡版的命令：
  • hexo clean == hexo clean
  • hexo g == hexo generate
  • hexo s == hexo server
  • hexo d == hexo deploy

綁定域名

• 綁定域名不排除會遇到很多網(wǎng)絡(luò)問題或是七七八八，所以這里先提供先官網(wǎng)的一些說明：
  • https://help.github.com/articles/setting-up-your-pages-site-repository/
  • https://help.github.com/articles/quick-start-setting-up-a-custom-domain/
  • https://help.github.com/articles/setting-up-an-apex-domain/
  • https://help.github.com/articles/troubleshooting-custom-domains/
  • https://help.github.com/articles/custom-domain-redirects-for-github-pages-sites/
• 首先我們要一個 CNAME 文件（文件名叫 CNAME时鸵，沒有文件后綴的）胶逢，把該文件放在 E:\git_work_space\hexo\source 目錄下，以后一些需要放在根目錄的資源文件都可以放這里饰潜。如果你找不到這樣的文件可以到我的項目上下載：https://github.com/judasn/judasn.github.io
  • CNAME 上的內(nèi)容需要寫你具體要綁定的域名信息初坠，比如我是：code.youmeek.com，具體你可以參考下圖：
    • 設(shè)置 CNAME 文件
• 接著我們需要到 DNSPOD 上設(shè)置域名解析：https://www.dnspod.cn/
  • 設(shè)置域名解析
  • 設(shè)置域名解析
• 設(shè)置好之后彭雾，等過幾分鐘域名解析好之后碟刺，我們訪問：http://code.youmeek.com，效果如下：
  • 域名訪問效果

整合 IntelliJ IDEA 提高效率

• 為了提交寫作效率薯酝，我個人建議使用 IntelliJ IDEA 作為 Markdown 編輯工具
  • IntelliJ IDEA 有各種各樣的快捷鍵支持你的操作
  • IntelliJ IDEA 可以快速地全文檢索項目所有的文件
  • 對 JavaScript半沽、CSS爽柒、HTML 等常見語言的良好支持，方便你修改你的主題
• 如果你還不會使用 IntelliJ IDEA 或是 JetBrains 家其他產(chǎn)品者填，你可以看下我寫一整套教程：http://wiki.jikexueyuan.com/project/intellij-idea-tutorial/
• 現(xiàn)在我們用 IntelliJ IDEA 打開我們本地目錄：E:\git_work_space\hexo浩村，打開后效果如下圖：
  • IntelliJ IDEA 打開項目
• 由于 IntelliJ IDEA 在 Windows 下的默認(rèn)終端是 cmd 不好用，我們現(xiàn)在需要重新修改下 IntelliJ IDEA 的終端工具幔托，把它指向我們習(xí)慣的 Git Bash穴亏，這樣方便操作，如下圖 gif 演示重挑。
  • IntelliJ IDEA 下操作 hexo
  • 如 gif 演示嗓化，我們可以 IntelliJ IDEA 里面安心寫文章、做發(fā)布等操作谬哀。
• 為了更穩(wěn)定地使用 IntelliJ IDEA刺覆，在不修改主題的情況下，我們還需要這樣做：
  • IntelliJ IDEA 下操作 hexo
• hexo 新文章內(nèi)容的開頭需要這樣定義：
  • categories：表示文章所屬分類
  • tags：表示文章所屬標(biāo)簽

---
title: 這是文章標(biāo)題
date: 2016-02-28 17:58:27
categories: [Hexo,IntelliJ IDEA]
tags: [Hexo,IntelliJ IDEA,Git,Github,Node.js]
---

結(jié)束語

• 我希望從這一篇你也可以再一次了解到 IntelliJ IDEA 的美麗之處史煎。
• 最后谦屑，歡迎再次來到 IntelliJ IDEA 的世界！