Hexo博客搭建


本文講解我在搭建Hexo博客的完整過程,主要內容包括GitHub與SSH、FAQ等。

另外還需要注意的是:

  1. Hexo博客框架和nexT主題的搭建過程本文會直接引用官方教程,一筆略過;
  2. 由於我是在Mac上搭建Hexo博客的,所有一些命令在Windows的終端中可能找不到,請自行下載安裝。

下面進入正文:

一開始的時候我沒有注冊域名,靜態生成的文章都是放在GitHub上的,這里先以這種情況來說明:

GitHub創建與配置

創建GitHub賬號

Step1 Set up a personal account

首先在瀏覽器中輸入網址:https://github.com/join?source=header-home,然后填寫用戶名、郵箱、密碼,注意:該郵箱地址在之后的SSH配置中有重要作用,最后點擊Create an account按鈕,界面如下圖所示:

注冊github步驟1

Step2 Choose your plan

默認選擇即可,直接點擊Continue按鈕,進入下一步進行郵箱驗證,界面如下圖所示:

注冊github步驟2

Step3 Tailor your experinece

登錄自己設置的郵箱,點擊驗證郵箱之類的按鈕后會進入此處,如果在其左上角有Your email was verified.這樣的文案表明郵箱驗證成功。

配置GitHub相關信息

創建工程

如圖所示:

配置相關信息

如果你從未使用過GitHub,可以點擊Read the guide按鈕學習如何創建工程並使用。

如果你知道如何創建GitHub工程的話,那就簡單了,直接點擊Start a project按鈕就可以開始工程的創建,當然也可以從此處進入。依次填寫倉庫名、描述信息、初始化README文件,最后點擊Create repository按鈕,就成功創建一個工程了。但是因為該工程是提供給Hexo博客使用的,所以有以下幾個注意點:

  1. 倉庫名必須為name.github.io這樣的格式,需要注意的是:除了大小寫可以不同之外,name必須和Github's Username一模一樣;還有據說后面的io也可以是com,這個我就不清楚了,有興趣的可以嘗試一下。
  2. 描述信息和是否初始化README文件完全看個人興趣,但是我的建議是需要的,因為這樣能直截了當的明白這個工程是干嘛用的。

例如下圖所示:

創建倉庫

偏好設置

如果你熟悉GitHub,則可以進行一些偏好設置,即個性化設置,如上傳頭像。這些都是非常簡單的,所示就不做闡述了。接着我們開始配置SSH,這個是重點。

配置SSH

  1. 打開終端,輸入命令:

    $ ssh -T git@github.com
    

    如果輸出內容是Permission denied (publickey).,則表明我們尚未在GitHub中正確配置SSH;反之則表明配置成功,直接跳過這一部分即可。

  2. 繼續輸入命令:

    $ ssh-keygen -C "Your primary GitHub email address”
    

    切記必須修改命令中的郵箱地址,該郵箱地址即為你注冊GitHub時所填寫的郵箱地址。輸入成功之后會依行出現如下圖所示提示:

    設置SSH-key

    分別表示為文件名、密碼和確認密碼,輸入正確后會給出重要的配置信息。

  3. 繼續輸入命令:

    $ cat ~/.ssh/key's filename.pub | pbcopy
    

    該命令中pub文件的文件名即為上一步中設置的文件名,由於該命令中包含pbcopy關鍵字,所以該命令可以將pub文件中的內容直接復制到剪切板中,以防之后在網頁中配置SSH信息時發生不必要的錯誤。

  4. 打開配置SSH的網頁,點擊右上角的New SSH key按鈕,如下圖所示:

    設置SSH

    接着將pub文件中的內容粘貼到Key表示的文本框中,然后在Title表示的文本框中隨便命名一個名字,最后點擊Add SSH key按鈕即可添加SSH key。

  5. 雖然已經成功添加了SSH key,但是這並不代表着SSH配置成功了,我們繼續在終端輸入命令:

    $ ssh -T git@github.com
    

    如果輸出內容包含You've successfully authenticated, but GitHub does not provide shell access.則表明SSH配置成功;如果出現錯誤信息,可以繼續輸入該命令:

    $ ssh -Tv git@github.com
    

    進行診斷與調試。

  6. 最后附上配置SSH的官方教程,還是很詳細的。

安裝Git與Node.js

安裝Git

什么是Git

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

中文解釋:Git是一個免費且開源的分布式版本控制系統,它被設計出來的目的是快速且高效的管理任何一個從小到非常大的工程。

Git is easy to learn and has a tiny footprint with lightning fast performance. It outclasses SCM tools like Subversion, CVS, Perforce, and ClearCase with features like cheap local branching, convenient staging areas, and multiple workflows.

中文解釋:Git是易於學習並且擁有極小的空間和閃電般的速度,它遠高於那些像Subversion、CVS、Perforce和ClearCase一類的SCM工具,它擁有簡單的本地分支,方便的分​​段區域和多個工作流的功能。

引用摘自Git官網

有興趣的話可以看看:廖雪峰的Git經典入門教程

安裝與校驗

安裝Git的方式有很多種,我們即可以從官網下載,也可以使用其他方式安裝,這里我們使用Homebrew來進行安裝。

  1. 安裝Homebrew:打開終端之后,輸入下面命令即可:

    $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
    
  2. 安裝Git:Homebrew安裝完成之后,繼續輸入命令就會自動下載最新的Git進行安裝:

    $ brew install git
    
  3. 校檢Git是否安裝成功:繼續輸入命令:

    $ git --verison
    

    如果正確輸出版本號信息,則表明Git安裝正確,反之則表明安裝失敗;如果操作無誤的話,請嘗試其他途徑,如:從官網下載。

安裝Node.js

什么是Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.

引用摘自Node.js官網

中文解釋:Node.js是一個基於Google Chrome瀏覽器的V8引擎的Javascript運行環境(支持的系統包括*nux、Windows),使用事件驅動和非阻塞I/O模型使其更輕量且高效。

安裝與校驗

安裝Node.js的方式有很多種,這里介紹兩種:

  1. 使用Homebrew安裝:

    $ brew install node
    
  2. 這里我們只要進入Node.js官網,然后下載需要的版本進行傻瓜式安裝操作就可以了,如官方推薦版本

其他安裝方式可以參考此處:Hexo開始使用-概述-安裝 Node.js

最后,安裝完成之后,跟安裝Git一樣,我們也需要判斷Node.js是否安裝正確,同樣十分簡單,在終端輸入命令:

$ node -v

如果正確輸出版本號信息,則表明Node.js安裝正確。

Hexo搭建與配置

在搭建Hexo博客框架之前,我們還需要安裝NPM。如果你之前是通過Homebrew安裝Node.js的話,就無需擔心了,因為會附帶安裝NPM;
如果你是通過其他方式安裝的話,請自行谷歌、百度。

Hexo的搭建在官網上已經講解的十分詳細了,此處提供一個傳送門,下面我主要講一些在Hexo搭建與配置的過程中需要注意的地方:

deploy

安裝方式:

npm install hexo-deployer-git --save

官方教程:Hexo基本操作-部署

注意事項:

  1. 由於_config.yml文件使用YAML格式編寫,所以必須注意縮進(縮進時不允許使用Tab鍵,只允許使用空格)和空格
  2. 如果Hexo的版本大於3.0,則deploy的type屬性值需填寫為git,否則需填寫為github
  3. deploy的repository屬性值為我們一開始在GitHub中創建的倉庫地址。
  4. 在執行hexo deploy命令進行部署時,若出現ERROR Deployer not found: git之類的錯誤提示,應該是你的_config.yml文件填寫錯誤,請仔細排查,哪怕是一個空格。當然也有可能是因為你之前在安裝自動化部署插件時沒有添加--save選項導致,當然也有可能是其他原因。

NexT主題安裝與配置

NexT可以說是在搭建Hexo博客中資料最全的主題了,官網對於NexT主題的安裝與配置已經講解的非常詳細了,包含:開始使用、主題配置、第三方服務、內建標簽等內容,可以通過此傳送門一步步操作。下面列舉一些注意點:

如何設置網站背景

如果你想要給自己的網站加一個背景圖片也很簡單,你只需要一下兩步就行了:

  1. 首先將背景圖片存放到該目錄下:

    Blog $ cd themes/next/source/images/
    
  2. 接着打開你的scheme所在的目錄,比如我的scheme是Mist,然后編輯index.styl文件,即以下兩條命令:

    Blog $ cd themes/next/source/css/_schemes/Mist(Pisces和Muse也行)/
    Blog $ vim index.styl
    

    打開index.styl文件之后,在Components上面新增設置背景圖片的代碼,具體內容如下所示:

    // 省略一些代碼
    @import "sidebar/sidebar-blogroll";
    
    body { background:url(/images/back.png);}
    
    // Components
    // 省略一些代碼
    
  3. 最后重新部署就可以了!

VPS(CentOS)搭建Hexo博客並配置Git

上面的教程中只是把博客部署在Github中,如果自己買了個域名,並且想要把博客搭建在自己的VPS虛擬主機中的話,還需要配置一些東西。

另外說明幾點:

  1. 我是使用SecureCRT連接服務器的,當然你也可以使用其他工具連接,至於怎么連接應該很簡單的,就是配置ip地址、端口號,如果不會,請自行谷歌、百度。

  2. 我的VPS虛擬主機安裝的是CentOS系統,下面是等會要用到的一些命令:

su:切換用戶
mkdir:創建目錄
touch:創建文件
echo:寫入指定內容到指定文件
cat:查看文件內容,用於驗證文件內容是否正確
chmod:設置文件或文件夾的權限

配置Nginx源配置文件

首先需要在/etc/yum.repos.d目錄下創建Nginx源配置文件nginx.repo,寫入如下代碼:

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=0
enabled=1

安裝Nginx並校驗

[root@localhost /]# yum install nginx -y
[root@localhost /]# nginx -v
nginx version: nginx/1.10.3

部署Nginx

配置站點解析配置文件

在/etc/nginx/sites-available目錄下創建配置文件hexo.conf,寫入如下代碼:

server {
  root /var/www/fqxyi.com/public; # 站點目錄
  index index.html index.htm; # 主頁
  server_name www.fqxyi.com fqxyi.com; # 域名
  location / {  # 當輸入的網址不存在時,會嘗試重定向到404頁面
    try_files $uri $uri/ /404/;
  }
}

添加站點解析配置文件

在/etc/nginx/nginx.conf文件的http選項中添加如下代碼:

include /etc/nginx/sites-available/*.conf;
include /var/www/*.conf;

配置防火牆並校驗

[root@localhost /]# iptables -I INPUT -p tcp --dport 80 -j ACCEPT
[root@localhost /]# /etc/init.d/iptables status

如果顯示結果中包含ACCEPT tcp -- 0.0.0.0/0 0.0.0.0/0 tcp dpt:80\,則說明配置成功。

啟動Nginx服務

[root@localhost /]# service nginx reload
[root@localhost /]# /etc/init.d/nginx start

若無錯誤提示信息,則表示Nginx服務啟動成功

創建站點管理者

另外,為了安全考慮,可以在VPS上創建一個普通用戶(fqxyi)專門來管理網站的。

創建用戶組及用戶並校驗

[root@localhost /]# groupadd sitesManagers # 創建用戶組
[root@localhost /]# useradd fqxyi -m -g sitesManagers # 創建用戶
[root@localhost /]# finger fqxyi # 校驗用戶
Login: fqxyi                            Name:
Directory: /home/fqxyi                  Shell: /bin/bash
Last login Sun Feb 19 04:00 (EST) on pts/0 from 114.114.114.114
No mail.
No Plan.
[root@localhost /]# groups fqxyi # 校驗用戶組
fqxyi : sitesManagers

注意:114.114.114.114是當前網絡的ip地址,這個值是我隨便寫的,請忽略。

設置用戶密碼

[root@localhost /]# passwd fqxyi

設置fqxyi目錄權限

[root@localhost /]# chmod 755 /home/fqxyi

給fqxyi用戶添加sudo權限

修改/etc/sudoers文件,找到如下指令添加一條

... // 省略一些代碼
## Allow root to run any commands anywhere
root    ALL=(ALL)     ALL
fqxyi   ALL=(ALL)     ALL # 新增這條指令
... // 省略一些代碼

建站測試

創建測試頁面

進入/var/www/fqxyi.com/public目錄,執行下列操作即可:

[root@localhost /]# cd /var
[root@localhost var]# mkdir www
[root@localhost var]# chmod 777 www
[root@localhost var]# su fqxyi
[fqxyi@localhost var]# mkdir -p /var/www/fqxyi.com/public
[fqxyi@localhost var]# cd /var/www/fqxyi.com/public
[fqxyi@localhost public]# echo "This is test HTML" > index.html

預覽測試頁面

打開瀏覽器,輸入域名:fqxyi.com,查看是否顯示:This is test HTML。

刪除測試文件

[fqxyi@localhost public]# rm index.html

安裝配置Git

安裝並驗證Git

[root@localhost /]# yum install git
[root@localhost /]# git --version
git version 1.7.1

修改VPS上ssh的端口號

將/etc/ssh/sshd_config文件中的Port值修改為22,文件較長,應該在最后:

... // 省略一些代碼
#   ForceCommand cvs server

PermitRootLogin yes
Port 22

之所以修改為22,是因為使用ssh連接服務器的默認端口是22,本來想着在站點配置文件中deploy屬性下新增port屬性,解決端口無需限制為22的情況,然而沒有成功...

ssh遠程登錄驗證

本地終端使用ssh登錄VPS的fqxyi用戶,驗證是否能夠正常訪問服務器。

fengqingxiuyi:~ qingfeng$ ssh fqxyi@fqxyi.com
fqxyi@fqxyi.com's password:
Last login: Sun Feb 19 04:00:53 2017 from 114.114.114.114
-bash: warning: setlocale: LC_CTYPE: cannot change locale (UTF-8): No such file or directory
[fqxyi@localhost ~]$

注意:114.114.114.114是當前網絡的ip地址,這個值是我隨便寫的,請忽略。

因為我已經成功連接過了,所以顯示的結果是這樣的。如果你從未這樣操作過,可以查看配置SSH章節,然后請將你自己設置的.pub文件中的內容,從AAA開頭復制到最后,等到下一章節使用。

使用普通用戶(fqxyi)配置Git

在網站管理者的家目錄配置.ssh公鑰,用於靜態文件本地與VPS同步。將上一步復制的本地公鑰,粘貼到VPS的authorized_keys文件中

[root@localhost /]# su fqxyi
[fqxyi@localhost /]# cd /home/fqxyi
[fqxyi@localhost ~]# mkdir .ssh
[fqxyi@localhost .ssh]# cd .ssh
[fqxyi@localhost .ssh]# echo "本地的公鑰(AAA開頭)" > authorized_keys
[fqxyi@localhost .ssh]# cat authorized_keys # 務必查看是否添加成功

配置Git倉庫

在VPS上初始化Git倉庫,配置hooks目錄下的post-receive文件,實現本地靜態文件發布時自動同步到站點目錄。

初始化Git倉庫

[root@localhost /]# su fqxyi
[fqxyi@localhost /]# cd /home/fqxyi
[fqxyi@localhost ~]# mkdir fqxyiBlog.git
[fqxyi@localhost ~]# cd fqxyiBlog.git
[fqxyi@localhost fqxyiBlog.git]# git init -—bare # 兩個 - 符號

配置Git倉庫

在/home/fqxyi/fqxyiBlog.git/hooks目錄創建post-receive

[fqxyi@localhost fqxyiBlog.git]# cd hooks
[fqxyi@localhost hooks]# touch post-receive
[fqxyi@localhost hooks]# chmod 755 post-receive

然后在post-receive文件寫入以下內容:

#!/bin/bash -l
GIT_REPO=/home/fqxyi/fqxyiBlog.git # Git倉庫
TMP_GIT_CLONE=/tmp/fqxyiBlog
PUBLIC_WWW=/var/www/fqxyi.com/public # 站點目錄
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

博客初始化與編譯發布

修改站點配置文件_config.yml

在_config.yml文件末寫入如下內容

deploy:
    type: git
    repo: fqxyi@fqxyi.com:fqxyiBlog.git
    branch: master

發布到VPS服務器

使用MarkDwon編寫文章,並保存到suource/_posts文件夾下,然后使用下面的命令實現靜態生成和VPS部署。

fengqingxiuyi:hexo qingfeng$ hexo clean && hexo g && hexo d

MarkDown

Hexo博客是基於Markdown來進行編寫的,由於相關的編輯器也有很多,所以這里就不做太多闡述了,大家有興趣可以去這里看看。

比如使用Mou編輯器進行編寫,界面效果如下所示:

Mou

不過我推薦的是馬克飛象MWeb,兩者不僅能達到很好的實時預覽效果,還能夠同步文章到印象筆記

兩者都可以體驗一段時間,如果覺得好的話,而且願意花75RMB/年,建議使用前者。不過我選擇了后者,雖然后者同步文章到印象筆記沒有前者那么智能,但是有破解版

下面是兩者的界面效果:

maxiang

mweb

最后附上教程地址:Markdown簡單的世界

FAQ

favicon不顯示

當我們在搭建Hexo博客的時候,必然會自定義favicon.ico,顯示在網頁選項卡的左上角,如圖所示:

favicon不顯示

設置favicon也很簡單,只需要在主題配置文件_config.yml中,進行如下操作即可:

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /images/Blog/favicon.ico

如果favicon的路徑設置正確,而且清除了緩存,刷新了頁面好幾次,但favicon仍然不顯示的話,可以等待一段時間,再去刷新,可能就會顯示了!

404問題

現象:從首頁點擊某篇文章跳轉到了404頁面!

分析:既然出現了404頁面,那么必定是路徑問題;仔細檢查路徑發現,原來是以前名為mou.md的文件,現在變成了Mou.md。所以在github上路徑中文件夾的名字仍然是mou,而不是Mou。

解決:本來以為只需要執行以下命令就可以了:

Blog$ hexo clean && hexo g && hexo d

后來發現自己還是太年輕了,因為hexo clean的只是本地的文件,和github完全沒有關系,之后想了半天也毫無頭緒,於是另辟蹊徑:將Mou.md文件再重命名一下,如Mou2.md,執行上述命令之后,再重命名回Mou.md,再執行上述命令就可以了。😄

總結:當我在重命名md文件時,切忌不可只是進行了大小寫轉換,因為像這樣把文章部署到github上之后,文件名對應的文件夾是不會發生變化的!!!

干貨

最后附上一些干貨,方便大家查找使用,包含谷歌百度收錄問題版權信息追加

Wiki形式

禁止md文件生成html文件

只需要把.md文件的后綴名改為.mdown即可!

百度主動推送

curl推送示例

curl -H 'Content-Type:text/plain' --data-binary @urlPath "http://data.zz.baidu.com/urls?site=fqxyi.com&token=yourToken"

yourToken可以從百度站長平台主頁-網頁抓取-鏈接提交-自動提交-主動推送(實時)處得知,此外你還可以發現其他的推送方式,如:post、php、ruby等。

urlPath指包含每篇文章URL的文本文件,內容形式如下:

http://fqxyi.com/Hexo博客搭建.html
http://fqxyi.com/基本工具/Charles抓包.html
http://fqxyi.com/基本工具/圖片壓縮工具.html
...
// 此處省略其他自動生成的文章鏈接

那么如何自動生成這個文本文件呢?我們可以在站點配置文件中這樣配置:

baidu_url_submit:
  count: 100 # 比如3,代表提交最新的三個鏈接
  host: fqxyi.com # 在百度站長平台中注冊的域名
  token: yourToken # 請注意這是您的秘鑰, 請不要發布在公眾倉庫里!
  path: baidu_urls.txt # 文本文檔的地址, 新鏈接會保存在此文本文檔里

因為自動生成的baidu_urls.txt文件是存放在public文件夾下面的,所以urlPath的值為public/baidu_urls.txt

鏈接形式

  1. hexo干貨系列:(六)hexo提交搜索引擎(百度+谷歌)
  2. 在 Hexo 中創建匹配主題的404頁面
  3. 為Hexo博客的每一篇文章自動追加版權信息
  4. Hexo折騰記——性能優化篇
  5. Nginx配置404錯誤頁面轉向


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM