天天看點

基于阿裡雲搭建自己的的Hexo部落格

1. 部落格的架構

先搞明白Hexo部落格從搭建到自動釋出的架構,才能更好的了解我們每一步進行的操作。

不然隻跟着步驟過了一遍,卻不知道為什麼這麼做。

首先看這張架構圖:

整個流程就是本地将

*.md

渲染成靜态檔案,然後Git推送到伺服器的

repository

,伺服器再通過

git-hooks

同步網站根目錄。

2. 整個搭建流程

前提條件:

阿裡雲伺服器

第一部分: 伺服器環境搭建,包括安裝

Git

Nginx

配置 、建立

git

使用者 。

第二部分: 本地

Hexo

初始化, 包括安裝

NodeJS

hexo-cli

, 生成本地靜态網站

第三部分: 使用Git自動化部署釋出部落格

3. 伺服器環境搭建

3-1.安裝Git和NodeJS (CentOS 環境)

yum install git
#安裝NodeJS
curl --silent --location https://rpm.nodesource.com/setup_5.x | bash -           

NodeJS 安裝可以參考:

Linux安裝NodeJS

3-2. 建立git使用者

adduser git
chmod 740 /etc/sudoers
vim /etc/sudoers           

找到以下内容

## Allow root to run any commands anywhere
root    ALL=(ALL)     ALL           

在下面添加一行

git ALL=(ALL) ALL           

儲存退出後改回權限

chmod 400 /etc/sudoers           

随後設定Git使用者的密碼,

#需要root權限
sudo passwd git           

切換至git使用者,建立

~/.ssh

檔案夾和

~/.ssh/authorized_keys

檔案,并賦予相應的權限

su git
mkdir ~/.ssh
vim ~/.ssh/authorized_keys
#然後将電腦中執行 cat ~/.ssh/id_rsa.pub | pbcopy ,将公鑰複制粘貼到authorized_keys
chmod 600 ~/.ssh/authorzied_keys
chmod 700 ~/.ssh           

然後就可以執行ssh 指令測試是否可以免密登入

ssh -v git@SERVER           

至此,Git使用者添加完成

3-3. Nginx安裝和配置

我是用的是lnmp 一鍵安裝包,nginx安裝教程一大堆,就不再叙述。主要看nginx配置。

找到nginx的配置檔案,修改配置如下:

server
{
    listen 80;
    #listen [::]:80;
    server_name www.seekbetter.me seekbetter.me;
    index index.html index.htm index.php default.html default.htm default.php;
    #這裡要改成網站的根目錄
    root  /path/to/www;  

    include other.conf;
    #error_page   404   /404.html;
    location ~ .*\.(ico|gif|jpg|jpeg|png|bmp|swf)$
    {
        access_log   off;
        expires      1d;
    }

    location ~ .*\.(js|css|txt|xml)?$
    {
        access_log   off;
        expires      12h;
    }

    location / {
        try_files $uri $uri/ =404;
    }

    access_log  /home/wwwlogs/blog.log  access;
}           

4. 本地Hexo程式

4-1:初始化Hexo部落格

首先要安裝

hexo-cli

,安裝

hexo-cli

需要 root 權限,使用

sudo

運作

sudo npm install -g hexo-cli           

然後初始化Hexo程式

cd ~/Documents/code
hexo init blog           

等執行成功以後安裝兩個插件,

hexo-deployer-git

hexo-server

,這倆插件的作用分别是使用Git自動部署,和本地簡單的伺服器。

hexo-deployer-git幫助文檔 hexo-server幫助文檔
cd blog
npm install hexo-deployer-git --save
npm install hero-server           

4-2. 生成自己的第一篇文章 hello world !

使用

hexo new <文章名稱>

來建立文章,該指令會成成一個

.md

檔案放置在

sources/_posts

檔案夾。

hexo new "hello Hexo"
vim sources/_posts/hello-hexo.md           

編輯完畢以後, 使用

hexo g

.md

檔案渲染成靜态檔案,然後啟動

hexo-server

hexo g
hexo server           

現在便可以打開浏覽器通路

http://localhost:4000

來檢視我們的部落格了!

5. 自動化部署

5-1:伺服器上建立git裸庫

建立一個裸倉庫,裸倉庫就是隻儲存

git

資訊的

Repository

, 首先切換到

git

使用者確定

git

使用者擁有倉庫所有權

一定要加

--bare

,這樣才是一個裸庫。

su git
cd ~
git init --bare blog.git           

5-2. 使用 git-hooks 同步網站根目錄

在這裡我們使用的是

post-receive

這個鈎子,當git有收發的時候就會調用這個鈎子。 在

~/blog.git

裸庫的

hooks

檔案夾中,

建立

post-receive

檔案。

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

#!/bin/sh
git --work-tree=/path/to/www --git-dir=~/blog.git checkout -f           

儲存後,要賦予這個檔案可執行權限

chmod +x post-receive           

5-3. 配置

_config.yml

,完成自動化部署

然後打開

_config.yml

, 找到

deploy

deploy:
    type: git
    repo: git@SERVER:/home/git/blog.git    //<repository url>
    branch: master            //這裡填寫分支   [branch]
    message: 送出的資訊         //自定義送出資訊 (預設為 Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})           

儲存後,嘗試将我們剛才寫的"hello hexo"部署到伺服器

hexo clean
hexo generate --deploy           

通路伺服器位址,就可以看到我們寫的文章"Hello hexo",以後寫文章隻需要:

hexo new "Blog article name"
···寫文章
hexo clean && hexo generate --deploy           

部落格就更新咯!~

參考資料:

使用 Git Hook 自動部署 Hexo 到個人 VPS Hexo 文檔