搭建Hexo博客中碰到的坑

前段時間上網(wǎng)查資料時看到了好幾個很不錯的個人博客,感覺很棒,自己也想搭建一個玩一下,剛好在萬網(wǎng)查到自己的域名niujiajun.com沒被注冊,就搜集資料準備開干了。雖然現(xiàn)在早就不再是博客的時代了,但本來也沒想著靠這個干什么,只是說能有個專屬自己地方能分享記錄自己的思考,資源和學習成果,可以把瑣碎的東西總結(jié)歸納然后寫出來,畢竟寫出來>說出來>想出來。

不簡單的介紹

好了費話不多說了,開始復盤博客搭建的整個過程。首先簡單介紹一下,我的博客由Hexo作為博客框架,Github提供的300M免費空間作為服務器,Next作為博客的主題。Next主題中又集成了多說的評論、分享系統(tǒng)和熱評文章功能,百度統(tǒng)計服務和Swiftype站內(nèi)搜索服務。
反正就是一鍋亂燉吧,其實我也不太了解這些功能和服務,就一步步按教程走就好了。整個搭建耗時4天,其實1天就能把基本的東西搭建好,剩下的三天都在處理問題和完善細節(jié)。如題,這篇文章的目的并不是講解如何搭建一個Hexo博客,而是記錄我在搭建博客過程中遇到的問題,并給出我的解決方法。

搭建博客的準備

先放幾個Windows環(huán)境下搭建Hexo博客的教程:

這類教程網(wǎng)上一搜一大把,這里給的是我覺得寫得可以的。還有一個比較作弊一些的自動化搭建工具:

這個是我快搭好的時候發(fā)現(xiàn)的,不喜歡太傻瓜式的,且不想前功盡棄,所以我是沒用過的,療效如何我也不知道。
然后如果每個教程都大概看一下的話,可以發(fā)現(xiàn)每個教程的步驟不太一樣,這就很討厭了。其實上上周我就嘗試過搭建,就是因為看的教程不對,所以剛開始就碰到了問題,于是放棄,拖了兩周又重頭再來??梢娨粋€好的教程是成功他媽,下面是我看了幾篇教程后自己的步驟:

  • 注冊github賬號,創(chuàng)建一個yourname.github.io的倉庫
  • 買個喜歡的域名
  • 下載Node.jsGit
  • 利用Git安裝Hexo,并進行本地測試
  • 部署本地文件到Github進行查看
  • Github Pages綁定域名
  • 安裝Next主題,并進行優(yōu)化
  • 博客搜索引擎推廣

這里要進行注解的是,有的教程會讓配置SSH密鑰,SSH密鑰可以為了防止其他人惡意部署文件到你的倉庫,使用以后每次部署文件都需要登錄Github賬號,可以不配置。
有的教程中還會要求下載Github客戶端,但我覺得沒什么卵用。


曲折的路和路上的坑

路很長,慢慢來。

倉庫的名字

倉庫的名字的正確格式是github用戶名.github.io,之前沒仔細看,隨便起了個,果斷報錯。

關于Git

Git是Git Bash不是Github更不是Github Shell,是一個命令行工具,長這個樣子。
git-bash-image

我剛開始就搞錯了,然后Hexo的安裝就失敗了。

Hexo本地測試的時候要注意:

1.Git要運行在本地Hexo的根目錄下。
2.Git中Ctrl + C是stop的快捷鍵,不要使用Ctrl + CCtrl + V的快捷鍵,用右鍵。
3.優(yōu)化主題時,修改Hexo根目錄下的_config.yml站點配置目錄后,要重新啟動Hexo再刷新,修改next主題目錄下的_config.yml主題配置目錄則只需刷新即可.
4.本地測試是Hexo is running,Git顯示如下,其他狀態(tài)便無法連接

$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

如何綁定域名

綁定域名是個大坑,我有兩天的時間卡在了這上面,所以這里要詳細講一下綁定的過程

ping出Github Pages的IP

具體方法是打開win的命令行工具CMD,輸入

ping yourname.github.io

如圖

ping

返回的23.235.47.133就是Github Pages的IP,我拿到這個IP后直接在瀏覽器輸入,結(jié)果就是404

ip-404

我就很費解,為什么返回的ip找不到對象,然后我再次ping了一下
ping-error

WHAT THE FUCK?IP變成了185.31.18.133,是不是在玩我
biaoqing1

然后上網(wǎng)查教程,沒錯啊,就是這樣啊,可為什么會出問題呢?然后就一直卡著,最后加了個Hexo群問了下,也沒有人說出原因,根據(jù)后面的嘗試覺得可能每個結(jié)果都是對的,也就是說填哪個都行。

把獲取的IP綁定到域名上

上一步有點混亂,我也不知道該綁定哪個IP,只好先試一下??戳司W(wǎng)上的教程,很多人在DNSpod去綁定,如繼利用github創(chuàng)建自己的博客(二)---綁定域名,我覺得在哪設置都行,就直接在阿里云的控制臺設置了。
首先找到控制臺-->產(chǎn)品與服務-->域名-->域名列表

aliyun

在你要設置的域名中點擊解析
jiexi

如果首次修改可以選擇新手引導設置,不是首次就只能選擇修改了,修改的時候只要修改兩個記錄類型為A,主機記錄分別為@www的行就可以了。
dns-set

新手引導設置只需修改網(wǎng)址解析
new

PS:有的教程中說要新建CNAME,然后指向yourname.github.io,我試了,并不行,和已建的有沖突
好了,域名設置好了,在瀏覽器輸入

niujiajun.com

好了,接下來就是見證奇跡的時刻了


404

excuse me?怎么還是404,到底是哪出了問題,然后我又ping了一次拿新的ip綁定還是404,重新部署了文件直接無法顯示網(wǎng)頁了,重新申請個Github賬號,然后重新綁定,還是404。


biaoqing2

搞了很久還是不行,后面在網(wǎng)上和群里問出,到這里域名綁定并沒有結(jié)束,還差關鍵一步。

在yourname.github.io的根目錄下添加CNAME

具體就是在Hexo目錄里的source文件下添加一個名為CNAME的文件,注意這個文件是沒有后綴的,千萬不要設置成.txt文本文件,文件的內(nèi)容就是域名,格式如:

niujiajun.com

添加后部署文件,這個時候再試,應該就成功了。


biaoqing3

其他步驟就按教程就行了。

搜索引擎推廣時的注意

HTML驗證文件

下載了驗證文件后,部署到根目錄下,點擊完成驗證,卻發(fā)現(xiàn)


baidu

google

這是因為hexo編譯文件時,會給下載的HTML文件中添加其他的內(nèi)容,導致驗證失敗。
比如本機內(nèi)google文件的原內(nèi)容是

google-site-verification: google28a167413f7cb18a.html

Github里google文件的內(nèi)容卻是

<!doctype html>


<html class="theme-next mist use-motion">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

......

等等一大堆,所以需要在Github里手動修改驗證HTML文件,或者不編譯,只需執(zhí)行

hexo c
hexo d

打開HTML文件只有一串字符


yanzheng

提交sitemap站點地圖

教程中說需要在在博客目錄的_config.yml中添加如下代碼

#自動生成sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

然后編譯,就會在博客根目錄的public下面發(fā)現(xiàn)生成了sitemap.xml以及baidusitemap.xml。但我的情況是,不添加可以生成,添加后反而不能生成。
然后,我生成的文件如下

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

  <url>
    <loc>http://yoursite.com/2016/04/13/hello-world/</loc>
    <lastmod>2016-04-16T07:39:13.917Z</lastmod>
    <data>
        <display>
        <title>Hello World</title>
        <pubTime>2016-04-13T07:00:20.947Z</pubTime>

        </display>
    </data>
    </url>
</urlset>

可以看到,編譯器并沒有把yoursite.com改為niujiajun.com,這里需要手動修改,但有一點要注意的是修改后部署文件不能再編譯(hexo g)了,因為編譯了以后又會變回yoursite.com,所以寫了新的文章后記得修改sitemap.xml。
然后把sitemap文件提交給搜索引擎就行了。

一些補充

hexo 命令

hexo new "postName" #新建文章
hexo new page "pageName" #新建頁面
hexo generate #生成靜態(tài)頁面至public目錄
hexo server #開啟預覽訪問端口(默認端口4000,'ctrl + c'關閉server)
hexo deploy #將.deploy目錄部署到GitHub
hexo help  # 查看幫助
hexo version  #查看Hexo的版本
hexo deploy -g  #生成加部署
hexo server -g  #生成加預覽
命令的簡寫
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

部署文件需要三步

hexo c
hexo g
hexo d

有時不需要hexo g

設置題目、分類、標簽

在Markdown文件的開頭添加

---
title: 你的題目
tags: 你的標簽
category: 你的分類
---

如果使用hexo new命令新建文章則會自動生成

多個標簽的設置

方式一:仿照Hexo配置文件中的寫法

tags:
  - 前端
  - Hexo
  - HTML
  - JavaScript

方式二:偽JavaScript數(shù)組寫法

tags: [前端,Hexo,HTML,JavaScript]

多個分類也是如此

設置索引目錄里的圖片

因為索引設置為提取文檔前150個字符,所以想在索引目錄中插入圖片,就在文章開頭插入圖片即可。

首頁只顯示一篇文章

這好像是Next主題的一個bug,出現(xiàn)這種狀況可以兩次編譯試一下

hexo c
hexo g
hexo g
hexo s

我也有過這種錯誤,但后面發(fā)現(xiàn)是自己md文件有錯誤,tags:后沒加空格。注意命令行里錯誤信息

gitbash-error

這個錯誤就是在提示我md文件的tags標簽處出現(xiàn)了錯誤。


回看一下好像也沒什么難的,一步步按著教程來就可以了,有什么不懂的網(wǎng)上查一下就OK了。

end

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

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

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