輕快裝B低成本–Win10搭建Hexo博客 | 初行博客

WinC2015 2019-04-14

展開全文

發(fā)現(xiàn)在VPS上部署Hexo博客看著太麻煩了，還是本地配合Github搞吧，這樣既不失裝B還能超低成本有自己的一個博客，不用自己出服務(wù)器錢，不用擔(dān)心被攻擊，如果你不要獨立域名直接就是0成本！

在dalao界Hexo博客一直令我等鶸膜拜，在網(wǎng)上找了很多資料后終于搞定了Hexo的博客，以后也可以裝B去了。不過你要是不差錢，就是個小白還是用WP吧，這玩意用著其實挺別扭的。。。

Table of Contents

一、Windows 10上的部署

本次以比較流行的Win10為例，Win7、8也差不多，XP直接打死。

1.安裝Git

Git是上傳到Github的工具，如果在Github上有項目都會用到這個。

下載：https:///download/win 選擇對應(yīng)系統(tǒng)的版本即可，一路下一步，記住選擇幾個功能，這樣操作更像是在Linux Shell里操作。

Use Git from Bash only、Checkout Windows-style,commit Unix-style line endings、Use MinTTY(the default terminal of MSYS2)

2.配置Git

安裝好后需要幾行命令說清楚你是誰，這樣才能認(rèn)對人。自行替換自己的用戶名和郵箱。

git config --global user.name "Your Name"

git config --global user.email "email@example.com"

3.生成密鑰文件

這個操作加密你的通信過程，同時后期上傳到Github都會用到。

1	ssh-keygen -t rsa -b 4096 -C "email@example.com"

按3次回車，全部無視，證書文件會在C:\User\用戶名\.ssh 生成兩個文件。

4.安裝NodeJS

去官網(wǎng)下載NodeJS Windows版本，建議選擇LTS版本，https:///en/，安裝的時候務(wù)必選擇Add to PATH選項。

5.安裝Hexo

在Git程序里運(yùn)行命令行即可安裝

1	npm install -g hexo-cli

至此在Win上的部署安裝已經(jīng)完成，接下來就是如何使用了。

二、Hexo的使用

1.新建站點

假設(shè)代碼存放在D:\hexo\blog

cd /d

mkdir hexo

cd hexo

hexo init blog

cd blog

npm install

在D:\hexo\blog 里就能看到所有文件了，下面是文件說明：

目錄名稱	說明
scaffolds	模版文件夾。當(dāng)您新建文章時，Hexo 會根據(jù) scaffold 來建立文件。 Hexo的模板是指在新建的markdown文件中默認(rèn)填充的內(nèi)容。例如，如果您修改scaffold/post.md中的Front-matter內(nèi)容，那么每次新建一篇文章時都會包含這個修改。
source	資源文件夾是存放用戶資源的地方。除 `_posts` 文件夾之外，開頭命名為 `_` (下劃線)的文件 / 文件夾和隱藏的文件將會被忽略。Markdown 和 HTML 文件會被解析并放到 `public` 文件夾，而其他文件會被拷貝過去。
themes	主題文件夾。Hexo 會根據(jù)主題來生成靜態(tài)頁面。
_config.yml	網(wǎng)站的配置信息，您可以在此配置大部分的參數(shù)。
package.json	應(yīng)用程序的信息。EJS, Stylus 和 Markdown renderer 已默認(rèn)安裝，您可以自由移除。

2.Hexo的配置

（1）替換主題

推薦NexT主題，這是一款知名的Hexo主題，非常漂亮簡潔。

1 2	cd /d/hexo/blog git clone https://github.com/iissnan/hexo-theme-next themes/next

回到根目錄，找到_config.yml 文件，在第66行的theme字段里把默認(rèn)主題名字換成next即可。

（2）插入圖片

Markdown支持插入本地圖片或外部鏈接圖片，要保證本地和網(wǎng)絡(luò)上都能訪問圖片，使用hexo-asset-image

# 安裝插件

npm install https://github.com/CodeFalling/hexo-asset-image --save

啟用插件，確保主題配置文件D:\hexo\blog\_config.yml中

post_asset_folder: true

# 新增博文后，會在D:\hexo\blog\source\_posts目錄下生成 xxx.md 和 xxx 目錄，將圖片存放該目錄中，使用時 ![](***.jpg)，這樣Typora預(yù)覽和發(fā)布到網(wǎng)上時Hexo博客都能正常顯示圖片

3.新建博文

1	hexo new "Hello World"

在目錄D:\hexo\blog\source\_posts下會生成Markdown文件Hello World.md

手動添加Markdown文件到D:\hexo\blog\source\_posts目錄效果一樣

4.本地預(yù)覽

如果以后修改了主題和寫了一篇新文章都可以使用這個方法在本地查看，解決BUG。

cd /d/hexo/blog

# 生成靜態(tài)文件

hexo generate

# 啟動本地服務(wù)器

hexo server --debug

打開瀏覽器，輸入http://localhost:4000 即可看到站點的預(yù)覽了。

提醒一點，生成靜態(tài)化可以使用簡化命令

hexo g

在后面的上傳到Github中，如果你發(fā)現(xiàn)明明寫了一篇文章，但是網(wǎng)站卻沒有？那么一定是MD的語法有問題，生成靜態(tài)化文件的時候就會報錯，務(wù)必檢查一下哪里出問題，修復(fù)后才能成功上傳和展現(xiàn)文章。

三、配置Github Pages或Coding Pages

Github比較出名些，Coding是國內(nèi)的平臺，和Github基本差不多，如果擔(dān)心訪問速度或者其他原因可以選擇國內(nèi)的。

Github的配置方法

1.注冊并登錄Github賬號。

新建一個倉庫，建好后可以在倉庫首頁的Setting里修改為：yourname.

2.添加SSH KEY

點擊Github右上角的頭像，有個Setting，找到SSH and GPG keys，新建一個New keys，隨便起名，把密鑰內(nèi)容復(fù)制進(jìn)去。密鑰是啥？就是最開始生成的那個密鑰，id_rsa.pub文件。

3.測試SSH連接

在本地的Git中執(zhí)行，

1	ssh -T git@github.com

如果出現(xiàn)Hi username! You've successfully authenticated, but GitHub does not provide shell access.提示，則表示連接成功。如果不行就重新生成一個密鑰再重新上傳密鑰試試。

Coding中的配置方法

Github免費用戶只能新建公開的代碼倉庫，而且是國外的服務(wù)器，而Coding可以新建私有代碼倉庫，國內(nèi)用戶訪問速度更快。注冊Coding，添加項目，項目名稱為Coding用戶名，分支選擇master，同時還需要在D:\hexo\blog\source目錄下創(chuàng)建一個空白文件Staticfile:

1 2	cd /d/hexo/blog/source touch Staticfile

添加SSH keys

https:///help/doc/git/ssh-key.html

在Coding 賬戶中找到SSH 公鑰，新增公鑰，復(fù)制公鑰文件id_rsa.pub中的內(nèi)容

測試SSH連接

在Git Bash中執(zhí)行:

1 2	ssh -T git@git.

如果出現(xiàn)Hello username! You have connected to Coding.net by SSH successfully!提示，則表示連接成功。

四、部署你的博客

注意站點配置文件D:\hexo\blog\_config.yml中deploy參數(shù)配置如下：

# Deployment

## Docs: https:///docs/deployment.html

deploy:

type: git

repo:

github: git@github.com:zrj766/zrj766..git,master

coding: git@git.:zrj766/zrj766.git,master

在本地Git中執(zhí)行：

# git方式需要先安裝插件

npm install hexo-deployer-git --save

# 上傳代碼到倉庫

hexo clean && hexo generate && hexo deploy

或者:

hexo clean && hexo generate -d

如果出現(xiàn)INFO Deploy done: git提示，則表示部署成功。訪問用戶名.和用戶名.coding.me都可以正常打開博客了。

五、獨立域名綁定

用個二級域名總是不爽，何況現(xiàn)在主流域名都不貴，現(xiàn)在來綁定自己的域名。

1.DNS解析

www和@記錄做CNAME解析到用戶名.

如果使用的是Coding同樣的方法解析到 pages.coding.me

2.Hexo上的設(shè)置

域名綁定Github

在D:\hexo\blog\source目錄下新建一個文件CNAME，內(nèi)容為要綁定的域名：

文件去掉格式，直接空白

1 2	www.example.com example.com

域名綁定Coding Pages

在Coding網(wǎng)站中進(jìn)入剛新建的項目，依次單擊代碼、Pages服務(wù)自定義域名：

重新部署一次代碼即可。

六、其他輔助工具

Markdown書寫工具

推薦Typora，介紹文章：http://www./typora.html

Markdown渲染插件

圖床

由于markdown要導(dǎo)入網(wǎng)絡(luò)圖片才能讓本地用戶和網(wǎng)絡(luò)用戶都能正常訪問圖片，而且像有道云筆記這種還不能支持插入圖片，所以要借助圖床和快捷插入圖片的小插件來提高寫作效率。

七牛

注冊七牛，在對象存儲中新建存儲空間，要選擇公開空間，不然上傳圖片后無法分享外部鏈接。

MPic

下載MPic-圖床神器，設(shè)置賬號，空間名為七牛對象存儲空間名稱，AccessKey和SecretKey在七牛個人面板下的密鑰管理中，域名為七牛對象存儲空間中內(nèi)容管理頁簽下的外鏈默認(rèn)域名。

七、擴(kuò)展閱讀

推薦一些文章可以幫助你更快的學(xué)習(xí)使用和解決問題

Hexo 入門指南（三） – 文章 & 草稿

搭建Hexo博客中碰到的坑

八、參考文章

本篇文章的寫成參考了以下文章，感謝原作者的奉獻(xiàn)！

Win10搭建hexo-Github-Coding博客

搭建Hexo博客中碰到的坑

九、總結(jié)

Hexo這種靜態(tài)化博客真是輕快，打開速度飛快，比臃腫的WP強(qiáng)了很多。不過因為沒有后臺之類的東西所以新建文章等操作需要手動操作，不過Hexo的可塑性還是不錯的，流行的MD語法，還有文件在本地都可以自由修改，只要懂得一些代碼知識就能打造自己的站點。加上配合Github、Coding的使用，完全可以做到0成本擁有自己的博客。如果你對他感興趣就一起來部署擁有自己的第一個博客吧！

原創(chuàng)文章，作者：zrj766，如若轉(zhuǎn)載，請注明出處：https://www./post-471.html