hexo 搭建個(gè)人博客

image

利用hexo在github上快速搭建個(gè)人博客

方案選型

主流的三種博客搭建方案：

1. Git+Github+Markdown+jekyll （免費(fèi)）
2. Git+Github+Markdown+hexo （免費(fèi)）
3. 虛擬主機(jī)＋插件＋Wordpress （付費(fèi)）

我的選擇： Git+Github+Markdown+hexo

優(yōu)點(diǎn)：

  • 不需要自己購(gòu)買(mǎi)服務(wù)器資源，也就不需要考慮備案，第三種方案則需要自己購(gòu)買(mǎi)服務(wù)器資源，目前國(guó)內(nèi)主流服務(wù)器資源大概是200元一年，小的服務(wù)商可能會(huì)便宜很多，但服務(wù)質(zhì)量不敢恭維，具體價(jià)格自行百度
  • 利用hexo生成的靜態(tài)網(wǎng)頁(yè)，相比于第三種方案顯得更輕量級(jí)
  • hexo 對(duì)比 jekyll搭建操作更簡(jiǎn)單、命令少、易于記憶，更容易快速上手
  • 可以直接在github上編輯和發(fā)布博客

缺點(diǎn)：

  • 經(jīng)常切換電腦編寫(xiě)博客時(shí)，會(huì)比較麻煩，所有電腦都需要重新配置環(huán)境
  • 相比于擁有自建服務(wù)器的Wordpress，hexo的功能和可擴(kuò)展性有限
  • Github國(guó)內(nèi)訪問(wèn)速度比較慢
  • （最坑）不做處理的話，博客內(nèi)容百度檢索不到

搭建步驟

1. 環(huán)境的搭建，軟件安裝：

需要安裝的軟件有：

  • node.js ? hexo需要用到的語(yǔ)言環(huán)境
  • git ? 靜態(tài)網(wǎng)頁(yè)上傳到服務(wù)器需要用到的版本控制工具
  • hexo ? 靜態(tài)網(wǎng)頁(yè)生成工具

（1）node.js的下載與安裝：

node.js官網(wǎng)下載地址

image

安裝時(shí)全部選默認(rèn)配置就是了

node.js安裝成功驗(yàn)證：

1. 打開(kāi)控制臺(tái)：

cmd

2. 驗(yàn)證node.js是否安裝成功:

node -v
cmd

3. 驗(yàn)證npm是否安裝成功:

npm -v
cmd

（2）git的下載與安裝：

image
  • 地址2：百度云盤(pán)： 密碼：el5c ?版本號(hào) : Git-2.8.1-64-bit ( 非最新 )
  • 安裝過(guò)程：

全選

image

選擇圖中第二項(xiàng)

image
  • 安裝成功驗(yàn)證：
  1. 打開(kāi)控制臺(tái)：

cmd

2.驗(yàn)證git是否安裝成功：

git --version
cmd
cmd

（3）hexo的安裝

1. 在任意位置打開(kāi)Git Bash

image

2. 使用npm命令安裝hexo

輸入命令：

$ npm install -g hexo

由于國(guó)內(nèi)網(wǎng)絡(luò)環(huán)境問(wèn)題，使用上面的命令可能安裝會(huì)遇到問(wèn)題，這時(shí)我們使用淘寶NPM鏡像,把命令換成以下，耐心等待安裝：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
image

然后使用淘寶NPM安裝Hexo，耐心等待

$ cnpm install -g hexo-cli
image

3. 出現(xiàn)的WARN可以不用理會(huì),繼續(xù)輸入以下命令：

$ cnpm install hexo --save

4. 安裝完成后，在輸入命令，驗(yàn)證是否安裝正確：

$ hexo -v
image

2. hexo本地生成博客：

1. 創(chuàng)建文件夾

創(chuàng)建放置hexo源文件的文件夾
（命名隨意，只是作放置用途）

image

2.運(yùn)行Git Bash：

在該文件夾下右鍵運(yùn)行Git Bash：

image

3.hexo初始化

輸入以下命令,耐心等待初始化完成：

$ hexo init
image

完成后打開(kāi)該文件夾會(huì)看到

image

4.使用編輯器（我使用的是editplus）打開(kāi)配置文件 ?_config.yml,可以配置個(gè)人博客的基本信息

image

5.生成博客

輸入以下命令，生成本地博客文件

$ hexo g
image

6.本地部署測(cè)試

輸入以下命令，把生成的博客部署到本地，并測(cè)試訪問(wèn)

$ hexo s
image

使用上圖標(biāo)注的網(wǎng)址進(jìn)行本地訪問(wèn) http://localhost:4000/?（注意：在git bash界面，不能用ctrl+C復(fù)制，只能右鍵copy）結(jié)果應(yīng)該如下圖，看到博客頁(yè)面（界面樣式和下圖肯定不一樣，下圖主題修改過(guò)，不要在意）：

image

至此hexo本地部署就完成了。

3. github服務(wù)器部署

將hexo托管到github服務(wù)器上，實(shí)現(xiàn)遠(yuǎn)程訪問(wèn)：

1.注冊(cè)github賬號(hào)

(已經(jīng)有了就忽略這一步)

詳細(xì)注冊(cè)流程就不多說(shuō)了，差不多就是郵箱注冊(cè)，再郵箱驗(yàn)證

github官網(wǎng)地址? github入門(mén)教程

2.新建倉(cāng)庫(kù)

在github上新建一個(gè)放置博客靜態(tài)頁(yè)面文件的倉(cāng)庫(kù)：

image

命名規(guī)則如下圖，紅線圈住的位置為你的github用戶名

username.github.io
image

然后點(diǎn)擊創(chuàng)建倉(cāng)庫(kù)

3.部署配置

在hexo本地的配置文件_config.yml中關(guān)聯(lián)上剛才在github上新創(chuàng)建的倉(cāng)庫(kù)：

在_config.yml最底部找到deploy配置，進(jìn)行如下圖的配置，配置完成記得保存

deploy:
  type: git
  repo: git@github.com:github賬戶名/github賬戶名.github.io.git
  branch: master
image

4.安裝hexo發(fā)布插件

用于把本地生成的博客，通過(guò)上面配置的地址，發(fā)布到github上的倉(cāng)庫(kù)中

還是在hexo源文件夾下打開(kāi)git bash,輸入以下命令：

$ npm instal lhexo-deployer-git  --save
image

5.配置SSH key

在你的電腦上生成ssh秘鑰并添加到github賬號(hào)上（個(gè)人理解是綁定該電腦到github上，避免每次部署博客都要輸入github的賬號(hào)和密碼）

還是在hexo源文件夾下打開(kāi)git bash,輸入以下命令：

$ ssh-keygen -t rsa -C "你的github注冊(cè)郵件地址"

然后連續(xù)3次回車(chē)，最終會(huì)生成一個(gè)文件在用戶目錄下

image

打開(kāi)用戶目錄，找到.ssh\id_rsa.pub文件，記事本打開(kāi)并復(fù)制里面的全部?jī)?nèi)容

image

打開(kāi)你的github主頁(yè)，進(jìn)入個(gè)人設(shè)置 -> SSH and GPG keys -> New SSH key：

image
image

添加該ssh key ：title隨便取，key就填剛剛復(fù)制的那一段

image

最后測(cè)試是否添加成功

在gitbash中驗(yàn)證是否添加成功：

$ ssh -T git@github.com

看到以下信息就說(shuō)明SSH已配置成功！

image

6.賬號(hào)和郵箱設(shè)置

為git配置github的賬號(hào)和郵箱：

$ git config --global user.name "liuxianan"http:// 你的github用戶名，非昵稱
$ git config --global user.email  "xxx@qq.com"http:// 填寫(xiě)你的github注冊(cè)郵箱

7、博客上傳

正式把博客上傳到github上，并可以網(wǎng)絡(luò)訪問(wèn)

依次執(zhí)行以下命令：清理 - 生成 - 部署

$ hexo clean

$ hexo generate

$ hexo deploy

然后在瀏覽器中輸入http://yourgithubname.github.io就可以看到你的個(gè)人博客了，是不是有點(diǎn)小激動(dòng)

大功告成?。?！

感覺(jué)gitbash中東西太多的時(shí)候輸入clear命令清空。

其他

域名綁定

博客每次都要使用githubname.github.io這么一個(gè)長(zhǎng)串的域名來(lái)訪問(wèn)顯得太low了，這時(shí)我們可以考慮綁定我們自己的域名，這一點(diǎn)github是支持域名綁定的

1.購(gòu)買(mǎi)域名：

參考網(wǎng)址

域名供應(yīng)商有很多，首推阿里的萬(wàn)網(wǎng)，大公司可靠，相對(duì)于服務(wù)器昂貴的價(jià)格，域名一年也就幾十元錢(qián)，選個(gè)可靠的更好，可以省去不必要的麻煩。個(gè)人建議選擇:?.com 結(jié)尾的域名（大眾化，貴不了多少，具體的看個(gè)人需求），購(gòu)買(mǎi)后大概6個(gè)小時(shí)就能生效
，盡快進(jìn)行實(shí)名認(rèn)證

萬(wàn)網(wǎng)鏈接

2.設(shè)置域名解析：

image

點(diǎn)擊添加解析，記錄類型選A或CNAME，A記錄的記錄值就是ip地址，github(官方文檔)提供了兩個(gè)IP地址，192.30.252.153和192.30.252.154，這兩個(gè)IP地址為github的服務(wù)器地址，兩個(gè)都要填上，解析記錄設(shè)置兩個(gè)www和@，線路就默認(rèn)就行了，CNAME記錄值填你的github博客網(wǎng)址。如: username.github.io。

image
image

這些全部設(shè)置完成后，此時(shí)你并不能要申請(qǐng)的域名訪問(wèn)你的博客。接著你需要做的是在hexo根目錄的source文件夾里創(chuàng)建CNAME文件，<span style="color:red">不帶任何后綴</span>，里面添加你的域名信息，如：name.com。實(shí)踐證明如果此時(shí)你填寫(xiě)的是www.name.com那么以后你只能用www.name.com訪問(wèn)，而如果你填寫(xiě)的是name.com。那么用www.name.com和name.com訪問(wèn)都是可以的。重新清理hexo,并發(fā)布即可用新的域名訪問(wèn)。

image

3.出現(xiàn)404：

  • 綁定了個(gè)人域名，但是域名解析錯(cuò)誤。
  • 域名解析正確但你的域名是通過(guò)國(guó)內(nèi)注冊(cè)商注冊(cè)的，你的域名因沒(méi)有實(shí)名制而無(wú)法訪問(wèn)。
  • 你認(rèn)為配置沒(méi)有問(wèn)題，那么可能只是你的瀏覽器在搗鬼，可嘗試清除瀏覽器緩存再訪問(wèn)或者換個(gè)瀏覽器訪問(wèn)。
  • 也有可能是你的路由器緩存導(dǎo)致的錯(cuò)覺(jué)，所以也可以嘗試換個(gè)局域網(wǎng)訪問(wèn)你的網(wǎng)站。
  • 最有可能的原因是你下載的hexo有問(wèn)題，導(dǎo)致所有的東西都上傳到了github,而導(dǎo)致index頁(yè)面在主域名的下一級(jí)目錄。你可以嘗試查看上傳的內(nèi)容，找到index頁(yè)面，在域名后面添加下一級(jí)目錄。若能訪問(wèn)index頁(yè)面（此時(shí)樣式可能是亂的），則證明是hexo安裝有問(wèn)題，筆者當(dāng)時(shí)遇到的就是這個(gè)問(wèn)題。可卸載重新安裝。

注：1，2默認(rèn)你的CNAME文件配置沒(méi)有問(wèn)題，如果沒(méi)有綁定個(gè)人域名，則不需要CNAME文件。

主題修改

如何更換主題

參考教程

主題下載：
例子：next主題

點(diǎn)到博客源文件右鍵打開(kāi)git bash，把主題克隆到本地themes文件夾中

git clone https://github.com/iissnan/hexo-theme-next themes/next
image
image

配置文件_config.yml中把默認(rèn)主題landscape修改為next

image

然后就可以輸入以下命令本地部署看一看效果了

hexo s

呈現(xiàn)效果應(yīng)該如下：

image

next基本配置

next 是hexo中用戶量比較大的一個(gè)主題，國(guó)內(nèi)文檔比較多，界面樣式比較簡(jiǎn)潔

參考教程

進(jìn)入next文件夾中打開(kāi)主題配置文件_config.yml配置主題樣式

選擇 Scheme

Scheme 是 NexT 提供的一種特性，借助于 Scheme，NexT 為你提供多種不同的外觀。同時(shí)，幾乎所有的配置都可以 在 Scheme 之間共用。目前 NexT 支持三種 Scheme，他們是：

  • Muse - 默認(rèn) Scheme，這是 NexT 最初的版本，黑白主調(diào)，大量留白
  • Mist - Muse 的緊湊版本，整潔有序的單欄外觀
  • Pisces - 雙欄 Scheme，小家碧玉似的清新

Scheme 的切換通過(guò)更改 主題配置文件，搜索 scheme 關(guān)鍵字。 你會(huì)看到有三行 scheme 的配置，將你需用啟用的 scheme 前面注釋 # 去除即可。

設(shè)置語(yǔ)言

站點(diǎn)配置文件， 將 language設(shè)置成你所需要的語(yǔ)言。建議明確設(shè)置你所需要的語(yǔ)言，例如選用簡(jiǎn)體中文：language: zh-Hans

語(yǔ)言 代碼
簡(jiǎn)體中文 zh-Hans
English en
日本語(yǔ) ja
Korean ko

設(shè)置菜單

menu:
  home: 首頁(yè)
  archives: 歸檔
  categories: 分類
  tags: 標(biāo)簽
  about: 關(guān)于
  search: 搜索
  commonweal: 公益404
  something: 有料

其他主題

知乎推薦主題

官網(wǎng)推薦主題

文章發(fā)布

hexo 支持的是markdown格式文件的文章，hexo文件夾里source文件夾里_post文件夾 就是用來(lái)存放博客文章的

image
image
image

極簡(jiǎn)MarkDown排版介紹

其中 .md 文件就是你的博客文件，相當(dāng)于Word生成的.doc文件，為了方便你博客排版。你可以利用各種markdown編輯器生成.md文件，并進(jìn)行博客編寫(xiě)，然后復(fù)制到_post文件夾下，再調(diào)用git bash命令進(jìn)行部署發(fā)布，最后就可以在你的博客上看到了文章了

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容