“

很多朋友私信問我，我的個人博客是用什么服務器，其實我并沒有服務器，用的 GitHub Pages，沒錯，無需服務器，看完這篇文章，你也可以擁有個人博客。

”

修訂歷史

適合人群

• 喜歡寫 Blog 的人
• 有一定的編程基礎(chǔ)
• 愛折騰的人
• 熟練使用版本控制 Git
• 了解使用 GitHub
• 熟悉基本的 MarkDown 語法

環(huán)境準備

安裝 Git

下載 msysgit 并執(zhí)行即可完成安裝。

安裝 Node.js

在 Windows 環(huán)境下安裝 Node.js 非常簡單，僅須下載安裝文件并執(zhí)行即可完成安裝。

安裝 hexo

利用 npm 命令即可安裝。（在任意位置點擊鼠標右鍵，選擇 Git bash）

npm?install?-g?hexo

問題：

• npm ERR! registry error parsing json 錯誤

可能需要設(shè)置 npm 代理，執(zhí)行命令

npm?config?set?registry?http://registry.cnpmjs.org

• hexo:command not found 刪除剛剛安裝的 npm 目錄，重新執(zhí)行命令：

npm?install?-g?hexo

來安裝 hexo。

創(chuàng)建 hexo 文件夾

安裝完成后，在你喜愛的文件夾下（如 H:\hexo），執(zhí)行以下指令(在 H:\hexo 內(nèi)點擊鼠標右鍵，選擇 Git bash)，Hexo 即會自動在目標文件夾建立網(wǎng)站所需要的所有文件。

hexo?init

安裝依賴包

npm?install

本地查看

現(xiàn)在我們已經(jīng)搭建起本地的 hexo 博客了，執(zhí)行以下命令(在 H:\hexo)，然后到瀏覽器輸入 localhost:4000 看看。

hexo?generate
hexo?server

好了，至此，本地博客已經(jīng)搭建起來了，只是本地哦，別人看不到的。下面，我們要部署到 GitHub。

問題：

• 執(zhí)行 hexo server 提示找不到該指令 解決辦法：在 Hexo 3.0 后 server 被單獨出來了，需要安裝 server，安裝的命令如下：

npm?install?hexo?-server?--save

安裝此 server 后再試，問題解決

GitHub 創(chuàng)建博客

注冊賬號

地址：https://github.com/
輸入賬號、郵箱、密碼，然后點擊注冊按鈕。

設(shè)置用戶名/郵箱

git?config?--global??user.name?"你的GitHub名字"
git?config?--global??user.email?"你注冊GitHub郵箱"

查看配置：

git?config?--list

創(chuàng)建頁面?zhèn)}庫

這個倉庫的名字需要和你的賬號對應，格式: yourname.github.io，輸入基本信息，然后點擊創(chuàng)建倉庫。

注意：

命名規(guī)則：你的 GitHub 賬號.github.io，我這里被坑了，之前是 jekell 寫的，現(xiàn)在換成 hexo，所以我是另建創(chuàng)庫了。

查看 SSH

SSH 公鑰默認儲存在賬戶的主目錄下的 ~/.ssh 目錄。

進入 .ssh 目錄下，命令行：

?ls

查看，如果返回 something 和 something.pub，說明已經(jīng)有 SSH 公鑰。

生成 SSH 密鑰

沒有的話，生成，還是在 .ssh 目錄下，命令行：

ssh-keygen?-t?rsa?-C?"你的郵箱地址"

按 3 個回車，密碼為空。

在 C:\Users\Administrator.ssh 下，得到兩個文件 id_rsa 和 id_rsa.pub。

在 GitHub 上添加 SSH 密鑰

打開 id_rsa.pub，復制全文到 https://github.com/settings/ssh ，Add SSH key，粘貼進去。

hexo 使用

目錄結(jié)構(gòu)

├──?.deploy???????#需要部署的文件
├──?node_modules??#Hexo插件
├──?public????????#生成的靜態(tài)網(wǎng)頁文件
├──?scaffolds?????#模板
├──?source????????#博客正文和其他源文件，404、favicon、CNAME?都應該放在這里
|???├──?_drafts???#草稿
|???└──?_posts????#文章
├──?themes????????#主題
├──?_config.yml???#全局配置文件
└──?package.json

全局配置 _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:??#網(wǎng)址
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?#生成的網(wǎng)頁文件目錄
#?Writing?#寫作
new_post_name:?:title.md?#新文章標題
default_layout:?post?#默認的模板，包括?post、page、photo、draft（文章、頁面、照片、草稿）
titlecase:?false?#標題轉(zhuǎn)換成大寫
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?#每頁文章數(shù)，設(shè)置成?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創(chuàng)庫地址.git
??branch:?master

注意

• 配置文件的冒號“:”后面有一個空格
• repo: 剛剛 GitHub 創(chuàng)庫地址.git

hexo 命令行使用

常用命令：

hexo?help?#查看幫助
hexo?init?#初始化一個目錄
hexo?new?"postName"?#新建文章
hexo?new?page?"pageName"?#新建頁面
hexo?generate?#生成網(wǎng)頁，可以在?public?目錄查看整個網(wǎng)站的文件
hexo?server?#本地預覽，'Ctrl+C'關(guān)閉
hexo?deploy?#部署.deploy目錄
hexo?clean?#清除緩存，**強烈建議每次執(zhí)行命令前先清理緩存，每次部署前先刪除?.deploy?文件夾**

簡寫：

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

編輯文章

新建文章

hexo?new?"標題"

在 _posts 目錄下會生成文件標題.md：

title:?Hello?World
date:?2015-07-30?07:56:29?#發(fā)表日期，一般不改動
categories:?hexo?#文章文類
tags:?[hexo,github]?#文章標簽，多于一項時用這種格式
---
正文，使用?Markdown?語法書寫

編輯完后保存，hexo server 預覽

hexo 部署

執(zhí)行下列指令即可完成部署。

hexo?generate
hexo?deploy

hexo deploy 問題：Deployer not found: git 執(zhí)行

npm?install?hexo-deployer-git?--save

再重新 hexo deploy ，以下提示說明部署成功：

[info]?Deploy?done:?git

點擊 GitHub 上項目的 Settings，GitHub Pages，提示 Your site is published at http://wuxiaolong.me (這是我買的域名)。

圖床

注意：七?，F(xiàn)在使用自己的域名，不然用不了，不再推薦使用，2018/10/28。

1、墻裂推薦七牛云儲存，注冊地址。

2、七牛云儲存提供 10G 的免費空間，以及每月 10G 的流量，存放個人博客圖片夠了。

3、七牛云儲存還有各種圖形處理功能、縮略圖、視頻存放速度也給力。

具體使用見 使用七牛作為 github 博客的圖床。

圖片目前都是放本地了，可能會導致博客訪問速度變慢，這也是無奈之舉。

域名

將獨立域名與 GitHub Pages 的空間綁定

方法一：在站點 source 目錄下面，新建一個名為 CNAME 的文本文件，里面寫入你要綁定的域名，比如 wuxiaolong.me。

方法二：在 Repository 的根目錄下面，新建一個名為 CNAME 的文本文件，里面寫入你要綁定的域名，比如 wuxiaolong.me。

DNS 設(shè)置

用 DNSpod，快，免費，穩(wěn)定。注冊 DNSpod，添加域名，如下圖設(shè)置。其中 A 的兩條記錄指向的 ip 地址是 GitHub Pages 的提供的 ip 如何知道你的 GitHub 上項目的 ip，如下：

去 Godaddy 修改 DNS 地址

更改 Godaddy 的 Nameservers 為 DNSpod 的 NameServers。

插件

“

2016.08.20 更新，安裝以下插件，據(jù)說博客訪問速度更快。

”

安裝插件

安裝插件：

npm?install?插件名?–save

卸載插件：

npm?uninstall?插件名

更新插件和博客框架：

npm?update

執(zhí)行以下命令安裝 RSS 插件

npm?install?hexo-generator-feed?--save

生成站點地圖

npm?install?hexo-generator-sitemap?--save

生成百度站點地圖

npm?install?hexo-generator-baidu-sitemap?--save

SEO 優(yōu)化

npm?install?hexo-generator-seo-friendly-sitemap?--save

HTML 壓縮

npm?install?hexo-html-minifier?--save

CSS 壓縮

npm?install?hexo-clean-css?--save

JS 壓縮

npm?install?hexo-uglify?--save

imagages 壓縮

npm?install?hexo-imagemin?--save

插件開啟配置

根目錄下的 _config.yml，添加以下代碼:

#?RSS
feed:
type:?atom
path:?atom.xml
limit:?20

#?sitemap
#?提交給谷歌搜素引擎，SEO優(yōu)化開啟配置是一樣的
sitemap:
????path:?sitemap.xml
#?提交百度搜索引擎
baidusitemap:
????path:?baidusitemap.xml

#?HTML壓縮
html_minifier:
??exclude:
#?css壓縮
clean_css:
??exclude:
??-?'*.min.css'
#?js壓縮
uglify:
??mangle:?true
??output:
??compress:
??exclude:
??-?'*.min.js'
#?image壓縮
imagemin:
??enable?????:?true
??interlaced?:?false
??multipass??:?false
??optimizationLevel:?2
??pngquant???:?false
??progressive:?false

package.json 可以看安裝了哪些插件。

Gitalk

“

2020.11.11 更新，個人博客評論使用 Gitalk 是目前最穩(wěn)妥的方案。

”

個人博客評論一言難盡，自從多說跪了，嘗試過暢言、友言，最后選定了網(wǎng)易云跟帖，沒想到網(wǎng)易云跟帖不久也跪了，Disqus 基本沒用，就這樣，我的博客一直沒評論，現(xiàn)在有了 Gitalk，評論以 issue 形式存在 GitHub，這個方案基本萬無一失，除非 GitHub 也……

hexo 使用最新的 Next 主題已經(jīng)集成了 Gitalk，只要配置下 Gitalk 就能擁有博客評論功能了。

創(chuàng)建 Github 倉庫

需要在自己的 Github 賬號下創(chuàng)建一個倉庫BlogComment來存放評論，創(chuàng)建的倉庫只要 public 就行。

創(chuàng)建 Github Application

需要創(chuàng)建一個 Github Application 用來授權(quán)登錄，如果沒有 點擊這里申請(https://github.com/settings/applications/new)，Authorization callback URL 填寫你主頁地址，比如我的就是 http://wuxiaolong.me/，其他都隨意填。

配置 Gitalk

在 themes/next/_config.yml 文件中添加 Gitalk 的配置。

gitalk:
??enable:?true
??github_id:??WuXiaolong?#?Github?repo?owner
??repo:?BlogComment?#?存放評論倉庫名
??client_id:?584799020****af79cd6?#?Github?Application?Client?ID
??client_secret:?f0e2e0137dc8f49****78e0f8627bdd815abfc40?#?Github?Application?Client?Secret
??admin_user:?cainiaofanshen?#?GitHub?repo?owner?and?collaborators,?only?these?guys?can?initialize?github?issues
??distraction_free_mode:?true?#?Facebook-like?distraction?free?mode

最后執(zhí)行 hexo clean && hexo g && hexo d 重新發(fā)布博客即可。

注意：

第一次使用 Gitalk 需要初始化，可以每篇博客都點點，會自動創(chuàng)建 issue 存放評論。

同臺電腦同時使用多個 GitHub

“

2020.12.20 更新，當有兩個 GitHub 賬戶，發(fā)現(xiàn)hexo d提交出現(xiàn)了點問題。

”

比如有兩個 GitHub 賬戶 Name1 和 Name2。

生成 SSH 密鑰

ssh-keygen?-t?rsa?-C?"[email protected]"?-f?~/.ssh/Name2

-f 后面的參數(shù)是自定義的 SSH Key 的存放路徑，將來生成的公秘鑰的名字分別是 Name2.pub 和 Name2

新建 config 文件

在 ~/.ssh 目錄下新建一個 config 文件

touch?config

添加內(nèi)容

#賬號1配置
Host?Name1
HostName?github.com
User?git
IdentityFile?~/.ssh/id_rsa

#賬號2配置
Host?Name2
HostName?github.com
User?git
IdentityFile?~/.ssh/Name2

測試指令

ssh?-T?git@Name2
Hi?Name2!?You've?successfully?authenticated,?but?GitHub?does?not?provide?shell?access.

取消全局用戶名/郵箱配置

如果已經(jīng)設(shè)置了全局的話，取消全局用戶名和郵箱配置：

git?config?--global?--unset?user.name
git?config?--global?--unset?user.email

單獨設(shè)置用戶名/郵箱

分別進入你的兩個 Hexo 博客.git目錄下執(zhí)行以下命令單獨設(shè)置用戶名/郵箱，.git目錄是隱藏的，位于：\Hexo.deploy_git\下：

git?config?user.name?"這里是用戶名"
git?config?user.email?"這里是你的郵箱"

修改 hexo 文件 git 地址

Hexo 目錄下的_config.yml 文件，找到 deploy 關(guān)鍵字，配置，拿一個 GitHub SSH 鏈接[email protected]:cainiaofanshen/FineBooks.git舉例，github.com換成Name2即可：

deploy:
??type:?git
??repository:?git@Name2:cainiaofanshen/cainiaofanshen.github.io.git
??#repository:?https://gitee.com/WuXiaolongBlog/WuXiaolongBlog.git
??branch:?master

這樣就能執(zhí)行hexo g -d就能成功將新的博客部署到 Github 上了。

注意：

GitHub 其他項目這里 git 地址同 hexo 文件 git 配置，可以cd .git進入項目的 Git 目錄，修改 config，vim config：

[core]
????????repositoryformatversion?=?0
????????filemode?=?true
????????bare?=?false
????????logallrefupdates?=?true
????????ignorecase?=?true
????????precomposeunicode?=?true
[remote?"origin"]
????????url?=?git@Name2:cainiaofanshen/FineBooks.git
????????fetch?=?+refs/heads/*:refs/remotes/origin/*
[branch?"main"]
????????remote?=?origin
????????merge?=?refs/heads/main

這里 url 同樣要修改，有點麻煩哦。

總結(jié)

之前用的 jekell 寫的，手把手教你建 github 技術(shù)博客 by jekyll，也是折騰了幾天才做成自己滿意的，昨天決定換成 hexo，也是花了一天半時間，為了追求更好，必須折騰！