1. 程式人生 > >在伺服器/GitHub上搭建Hexo部落格

在伺服器/GitHub上搭建Hexo部落格

 

本文章首發於:http://www.xtstarry.top/index.php/2018/07/24/在伺服器-github上搭建hexo部落格/

前言

Hexo 是一個快速、簡潔且高效的部落格框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁,更多介紹請訪問 Hexo官方網站

本篇文章的目的是幫助新手快速建立自己的部落格,併發布到github.io或自己的伺服器上。

配置本地伺服器

讓我們一步一步來。

配置本地環境

安裝node.js

鑑於絕大多數人本地環境使用的都是Windows,本文章所有本地環境安裝方式均為Windows下的。

訪問node.js官方網站,下載推薦版以後安裝即可。

安裝git

訪問git官方網站,下載適合自己Windows的版本,安裝即可。當然如果你覺得官網下載速度過慢的話,也可以訪問這裡,這裡收錄了git國內下載的源。

安裝Hexo

git的終端(開始選單中開啟git/git bash),鍵入以下命令,等待片刻即可安裝完成。

$ npm install -g hexo-cli

若命令無法執行,則按照指示安裝需要的程式即可。

建立本地站點

建立本地資料夾

建立一個本地資料夾用於存放部落格,我使用的是F:\blog

初始化本地資料夾

由於預設NPM映象速度太慢,我們可以先切換到淘寶的源:

npm config set registry "https://registry.npm.taobao.org"

切換是暫時的,下次如果還要安裝npm映象時,仍需執行這條命令。

接下來在終端內切換到你所指定的資料夾,輸入以下命令,完成初始化。

hexo init
npm install

完成後資料夾目錄如下:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

瀏覽本地部落格

依次鍵入以下命令,我們就可以在

http://localhost:4000/ 上檢視我們部落格的樣式。

hexo clean
hexo generate
hexo server

修改網站配置

引數設定

可以在 _config.yml 中修改大部份的配置。

 

引數 描述
title 網站標題
subtitle 網站副標題
description 網站描述
author 您的名字
language 網站使用的語言

更多詳細設定可以訪問 配置,Hexo有中文文件,可以非常方便的閱讀。

 

注意:修改引數時所有的冒號都必須有空格!

更換主題

訪問https://hexo.io/themes/挑選一個你喜歡的主題。點選圖片預覽,點選主題名稱一般能跳轉到主題的github介面。

拿我現在使用的主題舉例,連結是https://github.com/EYHN/hexo-theme-one,一般主題頁面都會提供文件,按照文件克隆主題到對應目錄即可。

git clone https://github.com/作者/主題名稱 themes/存放主題的資料夾

注意:不少部落格都需要安裝額外的外掛,記得詳細閱讀文件防止漏裝外掛。

主題的設定在/themes/你下載的主題/_config.yml。不同的主題有著不同的配置檔案。

 

部署部落格到Github

得益於良心的 Github Pages,我們能夠使用Github Pages免費獲得一個自己的站點。當然如果你想要擁有自己的域名的話需要自己購買。

如果你沒有Github賬號的話,首先你需要一個Github賬號。註冊完成賬號後,我們按照官方文件 Setting up Git ,新增一個名為your_name.github.io 的Repository,注意名字必須是這個。

設定本地Git使用者名稱和郵箱

首先我們要設定自己的全域性使用者名稱和郵箱。在Git終端中輸入下列命令,記得將使用者名稱和郵箱改成自己的。

git config --global user.name "YOUR NAME"
git config --global user.email "YOUR EMAIL ADDRESS"

注意這個使用者名稱和郵箱並不是只在部落格使用。想了解更多,可以檢視Git教程 - 廖雪峰的官方網站,Git非常有用,希望大家都能學習一個。

配置SSH金鑰

生成SSH金鑰

如果你使用過Git,已經有了金鑰,那我們可以直接使用。沒有的話我們需要生成一個新的。

在Git終端輸入以下命令,生成祕鑰。

ssh-keygen -t rsa -b 4096 -C "[email protected]"

祕鑰的設定我們預設就行,一路Enter直到完成。

新增SSH金鑰到ssh-agent

輸入以下命令,開啟ssh-agent並新增我們剛剛生成的金鑰。

eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_rsa

新增SSH金鑰到GitHub

這裡可以參考GitHub的官方文件Adding a new SSH key to your GitHub account

可以使用以下命令快捷複製RSA公鑰到剪貼簿:

clip < ~/.ssh/id_rsa.pub

 

測試SSH連線

在正式操作之前,我們可以先測試下本機與GitHub之間的連線。輸入以下命令:

ssh -T [email protected]

若配置成功,則顯示

Hi username!You've successfully authenticated,but Gitub does not provide shell access 

途中可能會受到金鑰指紋認證,同意就行。

部署Hexo部落格

本地設定

配置完SSH金鑰,我們就可以將部落格部署到 GitHub 上了。

在終端中執行如下命令,安裝 hexo-deployer-git 外掛:

npm install hexo-deployer-git --save

修改_config.yml 中的deploy引數,一般都在檔案的最後:

deploy:
  type: git
  repo: https://github.com/your_name/your_name.github.io.git
  branch: master

將your_name換成自己GitHub的使用者名稱即可。

部署

在終端輸入以下命令:

hexo deploy

我們的部落格就被部署到GitHub上了。

第一次部署還會要求你輸入GitHub的密碼,輸入即可。

上傳速度因為地區不同網速可能也不同,有時候可能需要花費數分鐘才能傳完。

接著訪問https://github.com/your_name/your_name.github.io ,如果推送成功那麼我們在這個頁面就能看到檔案目錄。

點選標題下方選單欄右側的Settings進入設定介面,向下拉到GitHub Pages,在Launch automatic page generator 點選Continue to layouts ,再點選Publish page 即可。

訪問your_name.github.io,就可以看到你的部落格內容了。

部落格剛被建立好,可能需要等一會才能訪問。當然時間不會太長,要是過了一個小時還是無法訪問,可能就是哪裡出問題了。

 

將部落格部署到伺服器

部署到伺服器比GitHub要稍複雜些,但GitHub Pages因為伺服器在國外,無論是更新部落格還是其他人訪問速度都有些差強人意,這時候一個國內的、高速穩定的伺服器就成了一個不錯的選擇。但是需要注意的是,使用國內的伺服器建部落格也是要備案的。

伺服器的選購

國內的伺服器供應商有許多都是有學生特惠的,完成學生認證後可以買到10塊一個月、甚至更便宜的特價伺服器。大家可以按照自己的需求選購。

伺服器配置

購買好伺服器後,我們就可以開始配置了。

安裝nginx

nginx是是一個高效能的HTTP和反向代理伺服器,也是一個IMAP/POP3/SMTP伺服器,我們搭建部落格,需要拿它做Web伺服器。

如果之前沒有安裝過nginx,推薦使用LNMP一鍵安裝包,大家照著文件安裝即可。

安裝node.js

這裡的安裝針對的是Ubuntu,如果大家伺服器安裝的是CentOS或者其他系統,可以使用對應的命令。

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
apt-get install -y nodejs

如果出現安裝不上、找不到包等問題,可以升級下apt-get和curl。

sudo apt-get update
sudo apt install curl

建立Git賬戶

sudo adduser git

為了安全起見,伺服器上的Git操作我們一般都使用Git賬戶進行。

新增證書登入

和GitHub一樣,我們需要向伺服器新增RSA公鑰用於認證登入。只不過這邊沒有圖形介面,需要我們手動新增。

將之前的公鑰儲存在/home/git/.ssh/authorized_keys 檔案中 ,沒有這個檔案的話我們可以在那裡新建一個,輸入儲存即可。

初始化Git庫

我們需要初始化一個Git庫用於在伺服器儲存我們的部落格。新建一個.git資料夾,然後用命令初始化它,我使用的是/var/repo/blog,git

sudo mkdir /var/repo
cd /var/repo
sudo git init --bare blog.git

配置 Git Hooks

Git Hooks是配置在Git中的指令碼,能被特定事件呼叫。

在 blog.git/hooks 目錄下新建一個 post-receive 檔案

cd /var/repo/blog.git/hooks

在 post-receive 檔案中寫入如下內容 ,檔案不存在的話可以新建一個。

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

注意,/home/www/hexo是部落格靜態頁面存放的地方。這個指令碼的作用就是生成能夠被nginx使用的靜態頁面。當然你也能將靜態頁面放在其他地方,修改路徑就行。

設定post-receive檔案的可執行許可權:

chmod +x post-receive

返回到blog.git的上級目錄,將blog.git的擁有使用者改為git

sudo chown -R git:git blog.git

禁用 git 使用者的 shell 登入許可權

出於安全考慮,我們要讓 git 使用者不能通過 shell 登入。可以編輯 /etc/passwd 來實現 ,將passwd檔案中的

git:x:1001:1001:,,,:/home/git:/bin/bash

改為

git:x:1001:1001:,,,:/home/git:/usr/bin/git-shell

,就是把bash改為git-shell。

為nginx設定網頁目錄

我們需要將之前Git Hooks生成的目錄設定給nginx。預設配置檔案在/etc/nginx/sites-enabled下。

我們開啟該目錄下的default檔案,在server{}中新增

server {
    listen 80 default_server;
    listen [::]:80 default_server;
​
    root /home/www/hexo;
    server_name www.xxx.com;
}
​

注意,server位置填你的個人域名。要是還沒申請域名或者不打算申請域名,可以以後再填或者不填。

開啟伺服器80埠

有一些伺服器供應商是預設不開啟80埠的,需要我們手動開啟。

不同供應商的設定方法不同, 這裡以阿里雲舉例,進入控制檯,選擇雲伺服器ECS,進入自己伺服器的頁面,點選 本例項安全組,選擇 安全組列表,點選加入安全組,加入80埠即可。詳細設定可以訪問阿里雲官方幫助論壇 配置公網IP和外部出口

部署部落格

配置本地_config.yml

和GitHub一樣,我們也需要配置deploy。

deploy:
  type: git
  repo: [email protected]_IP:/var/repo/blog.git
  branch: master

your_IP替換成你伺服器的地址就行。

將本地部署到伺服器

  • 清除快取

    hexo clean
  • 生成靜態頁面:

    hexo generate
  • 將本地靜態頁面目錄部署到雲伺服器

     

    hexo deploy

至此,我們要做的工作已經全部做完,可以訪問自己的部落格了。