手把手教你建 GitHub 技術(shù)博客

“

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

”

修訂歷史

適合人群

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

環(huán)境準(zhǔn)備

安裝 Git

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

安裝 Node.js

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

安裝 hexo

利用 npm 命令即可安裝。（在任意位置點(diǎn)擊鼠標(biāo)右鍵，選擇 Git bash）

npm?install?-g?hexo

問題：

• npm ERR! registry error parsing json 錯(cuò)誤

可能需要設(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)點(diǎn)擊鼠標(biāo)右鍵，選擇 Git bash)，Hexo 即會(huì)自動(dòng)在目標(biāo)文件夾建立網(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 被單獨(dú)出來了，需要安裝 server，安裝的命令如下：

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

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

GitHub 創(chuàng)建博客

注冊(cè)賬號(hào)

地址：https://github.com/
輸入賬號(hào)、郵箱、密碼，然后點(diǎn)擊注冊(cè)按鈕。

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

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

查看配置：

git?config?--list

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

這個(gè)倉(cāng)庫(kù)的名字需要和你的賬號(hào)對(duì)應(yīng)，格式: yourname.github.io，輸入基本信息，然后點(diǎn)擊創(chuàng)建倉(cāng)庫(kù)。

注意：

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

查看 SSH

SSH 公鑰默認(rèn)儲(chǔ)存在賬戶的主目錄下的 ~/.ssh 目錄。

進(jìn)入 .ssh 目錄下，命令行：

?ls

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

生成 SSH 密鑰

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

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

按 3 個(gè)回車，密碼為空。

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

在 GitHub 上添加 SSH 密鑰

打開 id_rsa.pub，復(fù)制全文到 https://github.com/settings/ssh ，Add SSH key，粘貼進(jìn)去。

hexo 使用

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

├──?.deploy???????#需要部署的文件
├──?node_modules??#Hexo插件
├──?public????????#生成的靜態(tài)網(wǎng)頁(yè)文件
├──?scaffolds?????#模板
├──?source????????#博客正文和其他源文件，404、favicon、CNAME?都應(yīng)該放在這里
|???├──?_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?#站點(diǎn)信息
title:??#標(biāo)題
subtitle:??#副標(biāo)題
description:??#站點(diǎn)描述，給搜索引擎看的
author:??#作者
email:??#電子郵箱
language:?zh-CN?#語言
#?URL?#鏈接格式
url:??#網(wǎng)址
root:?/?#根目錄
permalink:?:year/:month/:day/:title/?#文章的鏈接格式
tag_dir:?tags?#標(biāo)簽?zāi)夸?/span>
archive_dir:?archives?#存檔目錄
category_dir:?categories?#分類目錄
code_dir:?downloads/code
permalink_defaults:
#?Directory?#目錄
source_dir:?source?#源文件目錄
public_dir:?public?#生成的網(wǎng)頁(yè)文件目錄
#?Writing?#寫作
new_post_name:?:title.md?#新文章標(biāo)題
default_layout:?post?#默認(rèn)的模板，包括?post、page、photo、draft（文章、頁(yè)面、照片、草稿）
titlecase:?false?#標(biāo)題轉(zhuǎn)換成大寫
external_link:?true?#在新選項(xiàng)卡中打開連接
filename_case:?0
render_drafts:?false
post_asset_folder:?false
relative_link:?false
highlight:?#語法高亮
??enable:?true?#是否啟用
??line_number:?true?#顯示行號(hào)
??tab_replace:
#?Category?&?Tag?#分類和標(biāo)簽
default_category:?uncategorized?#默認(rèn)分類
category_map:
tag_map:
#?Archives
2:?開啟分頁(yè)
1:?禁用分頁(yè)
0:?全部禁用
archive:?2
category:?2
tag:?2
#?Server?#本地服務(wù)器
port:?4000?#端口號(hào)
server_ip:?localhost?#IP?地址
logger:?false
logger_format:?dev
#?Date?/?Time?format?#日期時(shí)間格式
date_format:?YYYY-MM-DD?#參考http://momentjs.com/docs/#/displaying/format/
time_format:?H:mm:ss
#?Pagination?#分頁(yè)
per_page:?10?#每頁(yè)文章數(shù)，設(shè)置成?0?禁用分頁(yè)
pagination_dir:?page
#?Disqus?#Disqus評(píng)論，替換為多說
disqus_shortname:
#?Extensions?#拓展插件
theme:?landscape-plus?#主題
exclude_generator:
plugins:?#插件，例如生成?RSS?和站點(diǎn)地圖的
-?hexo-generator-feed
-?hexo-generator-sitemap
#?Deployment?#部署，將?lmintlcx?改成用戶名
deploy:
??type:?git
??repo:?剛剛GitHub創(chuàng)庫(kù)地址.git
??branch:?master

注意

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

hexo 命令行使用

常用命令：

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

簡(jiǎn)寫：

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

編輯文章

新建文章

hexo?new?"標(biāo)題"

在 _posts 目錄下會(huì)生成文件標(biāo)題.md：

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

編輯完后保存，hexo server 預(yù)覽

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

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

圖床

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

1、墻裂推薦七牛云儲(chǔ)存，注冊(cè)地址。

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

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

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

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

域名

將獨(dú)立域名與 GitHub Pages 的空間綁定

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

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

DNS 設(shè)置

用 DNSpod，快，免費(fèi)，穩(wěn)定。注冊(cè) DNSpod，添加域名，如下圖設(shè)置。其中 A 的兩條記錄指向的 ip 地址是 GitHub Pages 的提供的 ip 如何知道你的 GitHub 上項(xiàng)目的 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

生成站點(diǎn)地圖

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

生成百度站點(diǎn)地圖

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 更新，個(gè)人博客評(píng)論使用 Gitalk 是目前最穩(wěn)妥的方案。

”

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

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

創(chuàng)建 Github 倉(cāng)庫(kù)

需要在自己的 Github 賬號(hào)下創(chuàng)建一個(gè)倉(cāng)庫(kù)BlogComment來存放評(píng)論，創(chuàng)建的倉(cāng)庫(kù)只要 public 就行。

創(chuàng)建 Github Application

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

配置 Gitalk

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

gitalk:
??enable:?true
??github_id:??WuXiaolong?#?Github?repo?owner
??repo:?BlogComment?#?存放評(píng)論倉(cāng)庫(kù)名
??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 需要初始化，可以每篇博客都點(diǎn)點(diǎn)，會(huì)自動(dòng)創(chuàng)建 issue 存放評(píng)論。

同臺(tái)電腦同時(shí)使用多個(gè) GitHub

“

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

”

比如有兩個(gè) GitHub 賬戶 Name1 和 Name2。

生成 SSH 密鑰

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

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

新建 config 文件

在 ~/.ssh 目錄下新建一個(gè) config 文件

touch?config

添加內(nèi)容

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

#賬號(hào)2配置
Host?Name2
HostName?github.com
User?git
IdentityFile?~/.ssh/Name2

測(cè)試指令

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

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

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

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

修改 hexo 文件 git 地址

Hexo 目錄下的_config.yml 文件，找到 deploy 關(guān)鍵字，配置，拿一個(gè) 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 其他項(xiàng)目這里 git 地址同 hexo 文件 git 配置，可以cd .git進(jìn)入項(xiàng)目的 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 同樣要修改，有點(diǎn)麻煩哦。

總結(jié)

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