手把手教你從零開始搭建個人博客，20分鐘上手

• 一、前言

• 二、Hexo基本介紹

• 三、Hexo+Github搭建博客網(wǎng)站流程

• 四、開始動手動腦

• 4.1 基礎(chǔ)準(zhǔn)備

• 4.2 安裝Hexo

• 4.3 初始化一個Hexo Blog

• 4.4 Hexo基本命令介紹

• 4.5 Hexo基本配置介紹修改

• 4.6 將Hexo博客部署到GitHub

• 4.7 設(shè)置應(yīng)用自己的域名

• 五、下集預(yù)告

一、前言

大家好，我是愛思思愛貓愛技術(shù)的老表，最近一直在研究個人博客搭建，目前正在進(jìn)行的有Django個人博客搭建系列，最近了解到還有很多現(xiàn)成的博客搭建框架，準(zhǔn)備后面依次給大家分享下。

本文是基于Hexo框架來構(gòu)建個人博客的，整個過程十分簡單，如果順利的話，可能只需要10-20分鐘就可以完美構(gòu)建部署好一個專屬于你的個人博客了，記得點(diǎn)贊～

二、Hexo基本介紹

Hexo 是一個快速、簡單且功能強(qiáng)大的博客框架。你用Markdown（或其他標(biāo)記語言）寫帖子，Hexo 會在幾秒鐘內(nèi)生成帶有漂亮主題的靜態(tài)文件。

三、Hexo+Github搭建博客網(wǎng)站流程

四、開始動手動腦

首先我們進(jìn)入Hexo的官網(wǎng)：https://hexo.io/

就可以看到對于Hexo的詳細(xì)介紹，直接下滑，然后點(diǎn)擊Get Started，即可進(jìn)入Hexo使用介紹文檔，也可以直接訪問：https://hexo.io/docs/ 進(jìn)入。

4.1 基礎(chǔ)準(zhǔn)備

在正式開始前，確保你已經(jīng)準(zhǔn)備好了：
1、一個GitHub賬號，可以直接去官網(wǎng)注冊：https://github.com/
2、安裝好了Git、Node.js

Git安裝方法很多，最簡單的是直接官網(wǎng)下載軟件包，然后安裝（Mac和Windows及其他版本都有），

https://git-scm.com/downloads

Mac電腦還可以直接利用brew install git 進(jìn)行安裝（默認(rèn)應(yīng)該自帶git），或者yum、apt-get等包管理工具安裝。

Node.js也可以直接去官網(wǎng)下載對應(yīng)系統(tǒng)安裝包，然后一步步安裝即可。

https://nodejs.org/zh-cn/download/

下載好后直接點(diǎn)擊軟件包，默認(rèn)會給我們安裝好Node.js和npm（Node.js的包管理工具）。

Windows系統(tǒng)可能需要自己設(shè)置環(huán)境變量，將對應(yīng)安裝目錄添加到系統(tǒng)環(huán)境變量即可，瀏覽器搜索下對應(yīng)方法即可。

查看下Git、Node.js版本，確保安裝無誤。

git?--version
node?-v??
npm?-v

4.2 安裝Hexo

首先我們需要新建一個項(xiàng)目目錄，以我為例：我會在桌面的Project目錄下新建一個HexoBlog文件夾用于存放改項(xiàng)目相關(guān)文件。

cd?Desktop/Project/
mkdir?HexoBlog&&cd?HexoBlog

這個時候如果直接運(yùn)行下面語句安裝Hexo，你可能會遇到rollbackFailedOptional。

npm install -g hexo-cli

這是因?yàn)榫W(wǎng)絡(luò)問題（npm的服務(wù)器位于國外下載慢），可以使用cnpm（淘寶團(tuán)隊(duì)做的國內(nèi)鏡像）的獲取鏡像或者直接修改npm的資源獲取地址為國內(nèi)的。

#?安裝cnmp
npm?install?-g?cnpm?--registry=https://registry.npm.taobao.org

#?直接修改npm資源獲取地址（推薦）
npm?config?set?registry?http://registry.npm.taobao.org

另外我自己還遇到了文件寫入權(quán)限問題，直接修改目錄文件權(quán)限即可，如：

chmod?-R?777?/usr/local/lib

解決上面問題后，我們在安裝就可以成功啦～（如下截圖所示）

4.3 初始化一個Hexo Blog

前面已經(jīng)準(zhǔn)備好了所有相關(guān)環(huán)境，接下來我們就正式來初始化一個Hexo博客吧～初始化的命令格式為hexo init <項(xiàng)目名稱>，這里我們暫且叫做blog。

hexo?init?blog

成功初始化后，會在當(dāng)前文件夾下生成一個新的文件夾blog，目錄結(jié)構(gòu)如下：

├──?_config.landscape.yml：主題配置文件，如果
├──?_config.yml：站點(diǎn)配置文件，對站點(diǎn)進(jìn)行配置。
├── node_modules：用來存儲已安裝的各類依賴包。
├── package-lock.json：包版本依賴鎖文件。
├── package.json：應(yīng)用數(shù)據(jù)，Hexo的版本以及相關(guān)依賴包的版本等。
├── scaffolds：博客模版文件夾，包含page.md，post.md，draft.md三種。
├──?source：資源文件夾，存放靜態(tài)資源如博客md文件、圖片等。
└── themes：主題文件夾，Hexo通過將網(wǎng)站內(nèi)容與主題組合來生成靜態(tài)網(wǎng)站。

初始化項(xiàng)目后，我們只需在本地執(zhí)行下面命令即可在本地進(jìn)行預(yù)覽，

cd?blog
hexo?s

首先我們需要進(jìn)入到新建的項(xiàng)目目錄下，然后執(zhí)行hexo s即可啟動項(xiàng)目，然后我們訪問http://localhost:4000/即可查看網(wǎng)站啦～目前是默認(rèn)的主題，另外還有一篇默認(rèn)的博客Hello World。

4.4 Hexo基本命令介紹

• 本地啟動項(xiàng)目，s表示server

hexo?s

• 創(chuàng)建一個新的博客，n表示new

hexo?n?[layout]?