hexo搭建博客分享

知識點準備

我主要參考了兩篇文章:html

我採用的方案是雲服務器+域名的方式node

首先是要搞懂一些概念nginx

Nginx

Nginx (engine x) 是一個高性能的HTTP和反向代理web服務器,同時也提供了IMAP/POP3/SMTP服務。在這裏的主要做用就是掛載相關目錄到對應端口(或者說讓其餘計算機訪問服務器的某個端口時,直接訪問對應目錄)。該教程中只須要裝在服務器。

Git

Git(讀音爲/gɪt/。)是一個開源的分佈式版本控制系統,能夠有效、高速地處理從很小到很是大的項目版本管理。簡單來講就是代碼庫及版本管理工具。在這裏的做用就是:在服務器中建立倉庫(鉤子),而後在本地的git工具中拉取項目和提交項目。其中hexo裏面集成了提交打包好的文件的命令,即hexo d。該教程需安裝在服務器和客戶端。

Linux

Linux是一套無償使用和自由傳播的類Unix操做系統,是一個基於POSIX和UNIX的多用戶、多任務、支持多線程和多CPU的操做系統。它能運行主要的UNIX工具軟件、應用程序和網絡協議。它支持32位和64位硬件。Linux繼承了Unix以網絡爲核心的設計思想,是一個性能穩定的多用戶網絡操做系統。通常用於服務器的操做系統,多用戶這個概念很重要,不一樣的用戶對文件的操做權限都會不一樣。在這裏的做用只要是用root管理員權限安裝一些軟件和開啓一些服務、建立git操做用戶和分配權限。git用戶只能對git倉庫所在文件夾進行操做。
注意:在這裏使用的是centos版本。其中yum是centos自帶的包管理工具。文中編輯文本信息都用的是vim編輯器。

Node.js

Node 是一個讓 JavaScript 運行在服務端的開發平臺,它讓 JavaScript 成爲與PHP、Python、Perl、Ruby 等服務端語言分庭抗禮的腳本語言。也就是說node.js是一個後臺語言。這個是hexo的依賴環境,同時咱們還須要用到node.js裏面包含的包管理工具npm。通常來講這個只須要安裝在本地便可,也就是說你要對博客進行操做或者開發的時候,就必定要有node.js的環境。

思路整理

結合上面涉及的知識點,我先大概列一下服務器端和客戶端所須要作的事情。
服務器端:git

  • 安裝Git、建立倉庫、及配置自動部署
  • 建立git用戶並分配好文件夾權限
  • 安裝Nginx和配置好

客戶端:web

  • 安裝Git
  • 安裝node.js
  • 安裝hexo框架

客戶端配置

客戶端方面的配置比起服務器端就簡單不少,由於客戶端的工做只要負責編輯文章、修改項目文件、推送文章等操做。
本人使用的操做系統是windows,下面的配置項也只提供windows的操做方法。npm

安裝Git

直接在 Git官網 找到該位置下載,而後安裝便可
圖片描述json

安裝了以後配置一下我的信息,輸入如下命令。vim

git config --global user.name "yourname"

git config --global user.email "youremail"

(第一次安裝git的跳過這一步)而後檢查該電腦有沒有建立ssh密匙對,「id_rsa」(私匙)和「id_rsa.pub(公匙)」這兩個。找到圖中的目錄(Administrator這個是個人用戶名,視我的狀況而定。)。
圖片描述segmentfault

(已經有密匙對的話跳過這一步)在git bash中輸入如下命令建立密匙對(注意修改本身的郵箱):windows

ssh-keygen -t rsa -C "本身的郵箱"

到這裏就應該已經完成了密匙對的建立了,注意一下這個 id_rsa.pub ,待會服務器配置會用得上。

安裝Node.js

很簡單,直接到 官網 下載、安裝便可。
安裝了Node.js以後裏面包含了npm包管理工具。
圖片描述

安裝hexo

這一步就須要用到剛剛下載Node.js裏面的npm命令了。
首先經過npm全局安裝hexo,打開cmd命令行輸入:

npm install -g hexo-cli

等到安裝完成後,就要開始建立、初始化項目了。先把剛剛的命令窗口關掉吧。而後進入你要建立項目的目錄,好比在 D:/projects/ 建立以後就是 D:/projects/blog,而後在當前目錄打開命令行,輸入:

hexo init blog

等到安裝結束後進入項目目錄。找到"package.json",編輯文件,在"dependencies"中追加如下一行:
圖片描述

在當前項目目錄下執行如下命令:

npm install

到這裏客戶端的項目就已經能夠啓動了,輸入如下驗證下:

hexo s

若是看到這條信息,說明項目啓動成功,打開瀏覽器訪問 localhost:4000 就能夠看到網站了。
圖片描述

客戶端的就差很少了,其中還有個服務器倉庫配置在「服務器端配置」章中底部會說明。
文章末還會有一些經常使用命令的小補充。


服務器端配置

安裝Nginx和配置

登陸服務器的root用戶,運行如下代碼安裝nginx:

yum -y update
yum install -y nginx

配置nginx
接下來要修改配置,設置網站映射的根目錄和訪問域名。使用vim編輯如下文件:

vi /etc/nginx/conf.d/default.conf

找到對應配置,修改中文的地方:

server {
    listen       80; #這裏填端口號,80即默認端口,訪問時不需帶端口號。
    server_name  這裏填寫域名
    root         這裏填寫網站根目錄地址;
}

啓動nginx:

service nginx start

安裝git和建立鉤子

安裝git:

yum install -y git

建立git用戶以及設置密碼(建立git用戶是爲了安全起見,防止權限太大進行其餘操做):

adduser git
passwd git

給git用戶分配更高級的權限
輸入如下代碼 sudo vi /etc/sudoers ,打開sudoers文件,輸入 :/root 進行搜索,搜索到代碼行 root ALL=(ALL) ALL ,而後在這一行下添加如下代碼 git ALL=(ALL) ALL 。輸入完畢以後,命令模式下輸入 wq! 強制保存退出vi。
效果以下圖:
圖片來自網站:https://segmentfault.com/a/1190000012907499#articleHeader16
圖片來自網站:https://segmentfault.com/a/11...

切換到git用戶登陸,在用戶home目錄中添加密匙文件。做用是識別客戶端的主機身份,可免登陸操做git倉庫

su git
mkdir ~/.ssh
vi ~/.ssh/authorized_keys

編輯 authorized_keys 文件時將(上文提過)客戶端建立的公匙 「id_rsa.pub」 內容複製到文件中。
接下來就要分配權限

chmod 600 ~/.ssh/authorized_keys
chmod 700 ~/.ssh

如今就驗證下以前的配置是否生效,在客戶端的git bash中輸入(記得改服務器ip):

ssh -v git@服務器ip

在git的home目錄中建立 初始化一個裸庫,以管理代碼。

cd ~
git init --bare blog.git

建立一個鉤子,做用是當倉庫文件有新的推送時,把文件拷貝到站點根目錄下。使用vim建立並編輯post-receive文件:

vi ~/blog.git/hooks/post-receive

添加如下內容進去(其中/var/www這個是網站根目錄,記得修改爲本身的。):

#!/bin/sh
git --work-tree=/var/www --git-dir=/home/git/blog.git checkout -f

保存以後,修改文件權限

chmod +x ~/blog.git/hooks/post-receive

最後一步,開放服務器中的80端口。
先輸入如下命令確認防火牆有無開發80端口:

iptables -L -n

# 注意 Chain OUTPUT裏面有無如下這行,沒有的話就是沒有開發
ACCEPT     tcp  --  0.0.0.0/0            0.0.0.0/0           state NEW tcp dpt:80

若沒有開放則須要修改配置:

vi /etc/sysconfig/iptables

#打開後在配置項找到對應的位置插入如下這行。
-A INPUT -p tcp -m state --state NEW -m tcp --dport 80 -j ACCEPT

而後重啓防火牆以更新配置

service iptables restart

到這裏服務器端的就配置完啦

接下來就是上文說到的倉庫地址配置
在客戶端的項目目錄下找到_config.yml,修改下面的對應信息:

deploy:
    type: git
    repo: git@SERVER:/home/git/blog.git       #此處的SERVER需改成你本身服務器的ip
    branch: master

補充

hexo還有不少用戶製做的主題供你們選擇,能夠在 官網主題 上找,進去對應的主題中會有教程的了。

hexo經常使用指令有以下(均可以只寫第一個字母,如 hexo n):

hexo clean # 清空緩存文件和已生成的靜態文件
hexo new [名字] # 新建一篇文章
hexo generate # 生成靜態文件,即html文件
hexo deploy # 部署網站,即提交到服務器的倉庫(以前的git鉤子已設置成倉庫文件一旦更新,會自動更新到站點目錄)。

更多指令可在 官方文檔 中查詢。


第一次寫一篇這麼長的文章,口水話不少,也有不少不清晰的地方。不過相信會越寫越好的。祝你們學習愉快,工做順利!

相關文章
相關標籤/搜索