手把手教你使用hexo搭建屬於你的我的博客

前言

每當看到別人精美的我的博客時，不知你是否有一點點的羨慕。別急，如今我就來手把手教你搭建本身的我的博客。
在技術日趨成熟的今天，有着不少種快速生成博客的框架:Hexo,Jekyll,Wordpress等等。今天咱們就用Hexo來帶着你們完成本身的博客

---

什麼是Hexo?

Hexo官網中說是這麼描述的：A fast, simple & powerful blog framework,即:一個快速、簡單且強大的博客快速生產工具。它的簡單體如今你徹底有可能在30分鐘內就生成屬於你的我的博客。而它的強大致如今你對細節的調整上徹底有可能花上一天的時間。

1、巧婦難爲無米之炊:準備搭建環境

1.安裝node.js

Node.js 的實質是一個JavaScript運行環境,這裏咱們主要使用它來生成咱們博客的靜態頁面。從官網下載最新的安裝包進行默認安裝就好。安裝過程略。

2.安裝git環境

git是最流行的分佈式版本控制系統，咱們使用它主要是與github進行交互。安裝git使用默認選項安裝便可，安裝過程略。若是你還對git不是特別熟悉，推薦一個學習git的教程:傳送門

3.註冊github

github就不用說了吧，它是一個面向開源及私有軟件項目的託管平臺。幾乎全部的程序員都據說過它的大名。就正常註冊一個帳號就行了。
註冊號之後首先給咱們的帳號添加本機的SSH，具體方法及緣由在這篇文章已經有了詳細說明，而且方法也很簡單

2、上正菜：開始搭建博客

環境都準備好後，咱們就能夠開始安裝博客了:
1.建立文件夾

在本地新建一個文件夾用於存放咱們的博客，而且右鍵菜單選擇Git Bash Here,而後在Git Bash裏輸入：

npm install hexo

而後回車，如圖：

我在執行這個的時候出現了下圖的警告,可是並不影響咱們的安裝，不用理會它。

若是沒有輸出err之類的錯誤而且目錄下多了一個node_modules文件夾，那這步就算成功了

2.執行hexo命令
依次執行如下3個命令:

hexo init  --初始化hexo環境,這時會在目錄下自動生成hexo的文件
    npm install --安裝npm依賴包
    hexo generate --生成靜態頁面
    hexo server --生成本地服務

好了，這時候咱們打開瀏覽器輸入http://localhost:4000看看可不能夠訪問。若是默認的hexo博客出現，那麼恭喜你，你已經搭建好了本身的博客，接下來咱們就要將它發佈到網上。

3.可能遇到的報錯:

• 日誌報錯
  這個報錯通常是因爲在命令執行中用戶使用Ctrl+C強制中斷了命令的執行，致使log中記錄已經執行，但實際沒有執行完成。解決辦法:刪除圖中路徑下的.log文件

• 在非空文件夾下執行hexo init命令
  hexo init這個命令是自動生成hexo目錄時使用的命令，使用他有一個前提是必須是空文件夾，若是出現了這個錯誤，把全部文件刪除就行。若是仍是報錯，彆着急，看看是否是有隱藏文件沒有刪除。

• hexo命令未找到
  有的同窗可能會出如今執行hexo命令時出現conmand not found的提示，這是因爲hexo沒有配到環境變量中，只須要手動配置一下就行了，這裏演示一下win7的配置方式，其餘系統也差很少，自行百度就好:

1.找到並進入根目錄下node_modules文件夾,這時咱們發現裏面有不少文件夾，找到hexo文件夾,這裏咱們能夠看到一個bin文件夾，進到bin目錄下，複製當前路徑:

2.右鍵個人電腦-->高級系統設置-->高級-->環境變量。在系統變量那欄找到Path並雙擊這行,在彈出的編輯系統變量這欄的變量值的最後先輸入一個分號；表示與前一個變量隔開,而後再把剛纔複製的hexo路徑添加到分號後面。

3、萬事具有，只欠東風：將本地博客發佈到網絡上

這時候就要用到了咱們的github：
1.建立遠程倉庫
新建一個跟本身帳號名字同樣的空倉庫，如圖：


2.鏈接本地與遠程github倉庫
打開本地博客的文件夾，打開_config.yml進行編輯

翻到文件最下方，將deploy的選項改爲如下的形式，並將yournmae修改成你本身的名稱：

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

而後在GitBash中執行

npm install hexo-deployer-git --save

這時候，咱們再最後執行一句

hexo deploy

就能夠在瀏覽器中訪問http://yourname.github.io/來進入你的博客啦
大功告成！！

4、一氣呵成：詳細瞭解Hexo

博客已經能夠訪問了，但我相信你們對Hexo仍是一頭霧水，如今咱們來深刻學習一下Hexo:
1.Hexo的基本命令

hexo generate --生成我的博客所需的靜態頁面
    hexo server --本地預覽
    hexo deploy --部署咱們的我的博客
    hexo clean --清除緩存

這幾個命令都能用首字母縮寫完成

hexo g --generate 
    hexo s --server 
    hexo d --deploy

2.寫文章的須要用到下面的命令

hexo new "postName" --新建文章
    hexo new page "pageName" --新建頁面

編輯咱們的博客的時候可使用

hexo s --debug

而後訪問http://localhost:4000/來進入調試模式，更改了配置或文章後隨時刷新頁面來查看效果。
Hexo的文章支持的是MarkDown語法。網上有不少資料，這裏提供一個傳送門。

3.咱們每次部署的步驟是

hexo clean 
    hexo generate 
    hexo deploy

後兩步能夠簡寫爲hexo g -d，另外咱們也可使用hexo help來查看hexo命令幫助

4.目錄結構說明
hexo init 出來的文件各自的做用以下:

`-----------
      |  +-- .deploy       #hexo deploy生成的文件
      |  +-- node_modules  #npm組件
      |  +-- public        #生成的靜態網頁文件
      |  +--scaffolds      #模板
      |  +-- source        #博客正文和其餘源文件
      |  |   +-- _posts    #咱們本身寫的文章以md結尾
      |  +-- themes        #主題
      |  +-- _config.yml   #全局配置文件
      |  `-- package.json  #定義了hexo所須要的各類模塊

5.配置文件
搭建好博客後，咱們的各類細節配置基本都是在配置文件中完成的，Hexo中的配置文件一共分2中，在文件夾跟目錄下的_config.yml叫作站點配置文件,一樣的文件名咱們能夠在theme文件夾下的主題文件夾裏面也找的。而主題文件夾下的_config.yml叫作主題配置文件。這裏說明一下站點配置文件：

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site #站點信息
title:  #標題
subtitle:  #副標題
description:  #站點描述，給搜索引擎看的
author:  #做者
email:  #電子郵箱
language: zh-CN #語言
# URL #連接格式
url:  #網址
root: / #根目錄
permalink: :year/:month/:day/:title/ #文章的連接格式
tag_dir: tags #標籤目錄
archive_dir: archives #存檔目錄
category_dir: categories #分類目錄
code_dir: downloads/code
permalink_defaults:
# Directory #目錄
source_dir: source #源文件目錄
public_dir: public #生成的網頁文件目錄
# Writing #寫做
new_post_name: :title.md #新文章標題
default_layout: post #默認的模板，包括 post、page、photo、draft（文章、頁面、照片、草稿）
titlecase: false #標題轉換成大寫
external_link: true #在新選項卡中打開鏈接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight: #語法高亮
  enable: true #是否啓用
  line_number: true #顯示行號
  tab_replace:
# Category & Tag #分類和標籤
default_category: uncategorized #默認分類
category_map:
tag_map:
# Archives
2: 開啓分頁
1: 禁用分頁
0: 所有禁用
archive: 2
category: 2
tag: 2
# Server #本地服務器
port: 4000 #端口號
server_ip: localhost #IP 地址
logger: false
logger_format: dev
# Date / Time format #日期時間格式
date_format: YYYY-MM-DD #參考http://momentjs.com/docs/#/displaying/format/
time_format: H:mm:ss
# Pagination #分頁
per_page: 10 #每頁文章數，設置成 0 禁用分頁
pagination_dir: page
# Disqus #Disqus評論，替換爲多說
disqus_shortname:
# Extensions #拓展插件
theme: landscape-plus #主題
exclude_generator:
plugins: #插件，例如生成 RSS 和站點地圖的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment #部署，將 lmintlcx 改爲用戶名
deploy:
  type: git
  repo: github創庫地址.git
  branch: master

有時候咱們部署了之後本身博客的連接打不開,查看生成的靜態文件也沒有index.html,或者是各類奇怪的報錯。這時候有多是咱們的站點配置文件_config.yml格式出現了問題。這時候不妨去一些YAML格式檢測網站去檢測一下格式是否正確:傳送門。

5、結語

完成上面的操做,你就已經一隻腳踏進了hexo的大門,這時的你確定還有不少疑問,好比博客的頭像怎麼更換，博客的主題怎麼配置等等等等。這裏先留下一個懸念,有興趣的同窗能夠先行查詢一些資料^_^

---

本文做者： catalinaLi
本文連接： http://catalinali.top/2017/fi...版權聲明： 原創文章，有問題請評論中留言。非商業轉載請註明做者及出處。