搭建個人博客

經常閱讀此公眾號文章的讀者可能知道，這篇教程在一個月前發布過一次，因為題圖的文字字體版權問題，不得不刪除。今天重新發出來，給您說聲抱歉。此教程博客是在自己的雲服務器上搭建的，如果沒有雲服務器，同樣可以利用GitHub免費搭建自己的博客，公眾號回復:「GitHub」就可以獲取視頻教程。

正文

首先我們談一談搭建個人博客必要性，個人認為在學習過程中，被動接受知識對你的提高是輕微的。比如你看網課學習，在聽老師講解的時候感覺簡單易懂，代碼邏輯明了清晰，當自己敲代碼的時候，卻無從下手，這也屬於眼高手低的范疇。

當自己主動學習，主動思考其效率和對個人的提升無疑是高於被動接受的。然而使你提高最大的是主動說出自己認知，把自己的知識和理解傳達給他人，這種方式是對你提升無疑是最顯著的。

可見搭建個人博客是非常有必要的，很多讀者很早就要求我發一篇搭建個人博客的文章，由於個人時間願意本來想直接轉載，但是在自己實際操作中遇到很多坑，浪費不少時間，都是把主要步驟給出且時間久遠，沒有詳細的圖文配合。

應讀者的要求，小編邀請了自己的朋友完成了這一篇教程，本教程作者為「illgo」,可以點擊閱讀原文關注他的博客，中間遇到很多坑，如果您搭建成功別忘了回來打賞原作者，如果步驟有不明白的可以在文末向教程作者提問。

最終成果：

PC端：

移動端：

一. 前言

本篇文章將會使用最初始的虛擬機安裝嶄新的系統(Windows 7)和DigitalOcean購買的服務器(CentOS7.5)作為示例，注意並不是讓大家在虛擬機上搭建，為了模擬嶄新的環境，作者采取虛擬機的方式，你們直接在個人電腦操作即可。

當然可以選擇阿里雲或者騰訊雲，而我為什么選擇DigitalOcean購買服務器？主要原因是便宜，只需要5美元就能購買一年期限的美國服務器，需要學生GitHub認證后會贈送代金券，不過購買服務器需要Paypal，購買地址為：https://m.do.co/c/1d4464e8355e.

本文的特點是細節多,想到什么補充什么,因此,大家碰到問題時,可以通過細節上的不同找到問題所在.

本篇文章的受眾:

極客,想擁有一個漂亮的博客,想快速了解,但不想把時間花在由於細節導致的各種問題上.

只是想快速擁有一個在自己服務器上的博客的朋友.

二. 博客框架的選擇

如果你是我所說的本篇文章的受眾,當你要搭建一個博客時,你絕不會想自己從頭到腳寫一個框架出來.我在這里向大家介紹幾款流行的Blog框架:

Jekyll (https://jekyllrb.com/)
hugo (http://www.gohugo.org/)
django (https://www.djangoproject.com/)
hexo (https://hexo.io/)
這里我考慮了一下,並沒有將需要我們自己管理數據庫的重型CMS(如:WordPress等)納入.
選擇的標准有什么呢?

美觀程度

系統需求

搭建難度

可擴展性

插件提供

文檔是否全面

假如你是python學習者,請選擇django,這幾乎是每個學習python的小伙伴的必經之路.本篇文章我選擇的是Hexo,主要是它擁有我最喜歡的主題NeXT,滿足了我最大的需求:美觀.

如果你也和我一樣美觀是第一位,請點開每個框架的官網,找到他們的Theme下的示例,找出你最喜歡的即可.那么,我們將會從Hexo開始,其他框架的請參照具體官網文檔,和他們的GitHub issues.

注: 和Hexo官網的Getting Started並不沖突,本文從零開始,全程截圖,與官方文檔互為補充.

三. Hexo介紹
Hexo 特點
支持Markdown: 支持Markdown意味着你可以把經歷從排版中解放出來.
輕量: 無需擁有后台及數據庫,專心寫好你的文章
一鍵部署: 可以通過Git或者ftp來將生成的靜態頁面部署到服務器或者主機空間中
插件豐富: 豐富的插件可以滿足你的各種需求.
Hexo的工作機制

Hexo基於Node.js,將/source文件夾下的資源(文章,圖片,模板),按照預定的配置文件,轉換成靜態頁面放置到/public目錄下.如果需要預覽或者部署,hexo會把public作為web目錄處理.具體的細節可以通過實踐接下來的步驟,來逐漸明曉.

Node.js和npm

如果您之前接觸過Node.js,可以略過此部分.
Node.js是一個基於Chrome V8引擎的JavaScript運行環境,為我們的Hexo提供js腳本的運行環境.而npm則是一個JavaScript的包管理工具.主流的很多語言都會有自己的包管理器(們):
PHP
Composer
Ruby
gem
Python
pip
easy_install
Javascript
bower
npm
yarn
包管理器可以幫助你管理依賴,比如我們要裝的Hexo以及Hexo插件,Hexo和Hexo插件是其他開發者開發的代碼(Package),包管理器可以幫你下載並管理這些代碼.

Hexo官網教程中使用的是npm,但是由於網絡問題以及便捷性,我選擇用yarn來代替,當然,輕度使用的話只是在操作上大同小異.

四. 安裝所需環境

注: 以下安裝為本機客戶端環境安裝

安裝Node.js

Node.js官網下載最新LTS版本(截至發稿v8.11.1)的Node.js並安裝(如果你想同時管理多版本的Node.js請使用nvm)
Yarn官網下載最新版(截至發稿v1.5.1)並安裝.
安裝過程根據平台不同因人而異,在此略去不表.
在命令行中通過查看版本,確保我們的環境安裝成功,並且可執行文件路徑添加到了環境變量之中.
安裝git

Git-Downloads(git-scm.com/downloads)下載 64-bit Git for Windows Portable ,雙擊選擇依照你個人喜好指定的目錄(注意介於權限問題,避免在c:/program files下),我安裝在c:/some/git下

右鍵開始(windows 10)-搜索,輸入環境變量,編輯系統環境變量.

設置環境變量1

1. 選擇環境變量
   

   

設置環境變量2

1. 在系統變量中選擇Path點擊編輯
   

   

1. 在末尾加上分號,然后將你安裝目錄下,git.exe所在路徑填入(Windows 10更加簡便,不再贅述)
   

   

 

設置環境變量4

1. 新開一個終端,然后查看git命令是否生效
   

   

 

設置環境變量5

1. 設置git
   設置本地用戶的信息,引號內隨意填

git config --global user.name "illgo" git config --global user.email "[e-mail]" 

安裝Hexo

在這一步,我們通過Yarn來全局安裝Hexo.
在這里解釋Yarn(npm相同)全局安裝和本地安裝的區別:

全局安裝會把package存放在用戶目錄指定的目錄下,本地安裝則是存放在當前項目的node_module目錄中.

全局安裝使我們的二進制執行文件在操作系統內全局可用,比方說,命令行下輸入命令即可運行.本地安裝則是作為依賴供項目調用.
我們安裝hexo需要作為一個工具在命令行下可以直接運行,所以采用全局安裝;而像hexo依賴的插件則可以在hexo項目目錄下本地安裝：

yarn global add hexo 

安裝hexo

如圖即為安裝成功!

五. 使用Hexo

你需要熟悉並修改兩個配置文件

Hexo配置文件:myblog/_config.yml

主題配置: myblog/themes/next/_config.yml

創建站點目錄

選擇一個目錄作為hexo站點目錄,我選擇在桌面新建一個myblog目錄,作為hexo目錄.

hexo init 

初始化hexo

安裝主題NexT
在你的hexo站點目錄下

git clone https://github.com/iissnan/hexo-theme-next themes/next 

下載主題

啟用主題

用任意編輯器打開Hexo配置文件
長成這樣:

配置文件

Ctrl + F 搜索 theme

theme: next 

測試

hexo s --debug 

 

 

測試

按照提示,在瀏覽器中輸入url,即可查看效果.

Hexo基本配置

我們可以通過Configuration | Hexo來了解_config.yml的基本配置方法.后面我們將會對其進行部分補充.

NexT主題配置

NexT主題的配置可以直接查看其配置文件中的注釋,已經很詳細了.

六.部署

部署是本文的重點,git部署有兩種方式:

部署到自己的服務器上

網上流行的GitHub Pages

本文講的是前者,服務器部署.

部署到服務器

我們的大體思路就是:
hexo生成靜態頁面->git提交到git服務器->git服務器通過Hook運行腳本,在www目錄下clone Git倉庫->呈現頁面

以臨時創建的Centos 7.5服務器為示例

為SSH連接創建密鑰對

由於使用git作為部署,所以無法避免的我們要使用密鑰對的方式來連接,而不是口令.

1. 創建SSH密鑰對:

打開剛才安裝git目錄下的git-bash.exe.git-bash已經提供了BASH環境,為了簡單和快捷,我們使用這個git-bash作為ssh工具

ssh-keygen -t rsa -C "[e-mail]" 

生成key

按照提示他會在當前用戶目錄下的.ssh目錄下生成兩個文件:

id_rsa 私鑰
id_rsa.pub 公鑰
生成key

1. 在服務器中添加公鑰

后將公鑰添加到你在Centos的要登錄的用戶名下的,我們部署采用git用戶,按道理應添加到服務器的/home/git/.ssh/authorized_keys文件中.但是本次采用DigitalOcean提供的添加公鑰功能,在Web中操作,他會將公鑰直接添加到/root/.ssh/authorized_keys中.如果你用其他的雲服務器提供商,也會有類似的功能.此過程略去.

以下操作使用ssh連接服務器來操作.

在服務器上安裝Web服務器

Hexo會根據你的_config.yml配置的source_dir下的資源文件,在public_dir下生成靜態網頁,部署這些靜態文件.本次在服務器上安裝Apache作為web服務器,通過Git和Git hook來部署.

安裝Apache

yum -y install httpd systemctl start httpd 

然后訪問該服務器的80端口即可看到Apache的測試頁面:

ApacheTest

在服務器上創建Git服務器

1. 服務器端安裝Git

使用root賬戶

yum install -y git 

1. 創建Git用戶

useradd git passwd git 

創建Git用戶

1. 創建空倉庫

創建一個空倉庫並把所有權給git用戶

mkdir -p /home/git/repos/myblog.git git init --bare /home/git/repos/myblog.git 

 

創建Git倉庫

chown -R git:git /home/git/repos/myblog.git/ 

授權Git用戶

1. 在web目錄下Clone

注意: 提交的用戶要對/var/www/html有寫權限

git clone /home/git/repos/myblog.git /var/www/html chown -R git:git /var/www/html/ 

1. 設置Git Hook

我們使用Git Hook的目的就是,在Hexo部署時,會把Hexo生成的靜態web資源,自動部署到web目錄下.
我們需要一個post-receivew如下：

#!/bin/bash #判斷是不是遠端倉庫 IS_BARE=$(git rev-parse --is-bare-repository) if [ -z "$IS_BARE" ]; then echo >&2 "fatal: post-receive: IS_NOT_BARE" exit 1 fi unset GIT_DIR DeployPath="/var/www/html/" echo "===============================================" cd $DeployPath echo "deploying the myblog web" #git stash #git pull origin master git fetch --all git reset --hard origin/master time=`date` echo "web server pull at webserver at time: $time." echo "================================================" 

在DeployPath中填入你的www目錄,這里我采用Apache Web服務器默認的位置.

在本地計算機中,我們可以利用剛git-bash.exe使用scp工具將這個文件上傳到git服務器的hook目錄下

上傳hook腳本

配置git部署

添加 hexo-deployer-git 包依賴

yarn add hexo-deployer-git 

 

設置_config.yml中的deploy:

- type: git repo: git@159.89.144.28:/home/repo/blog.git 

測試

在Hexo站點目錄下

hexo g --deploy 

 

部署成功

訪問之前的url就會看到效果了!

部署成功

七. SEO

關於SEO優化和其它內容我們單獨一篇文章講解，為了方便搜索引擎的檢索,我們要盡量使自己文章的路徑深度小，Google會收錄你的網站，但是百度需要一定的瀏覽訪問。你可以投稿原創文章到此平台，我們會注明你的博客鏈接，久而久之自己的博客會被收錄。

問題記錄

deploy的時候出現

mote: error: cannot run hooks/post-receive: No such file or directory 

然而我的post-receive是存在且正確的,而且有執行權限.
當直接運行post-receive的時候發現錯誤是這樣的:

-bash: /home/git/repos/myblog.git/hooks/post-receive: /bin/bash^M: bad interpreter: No such file or directory 

這是因為換行字符的原因,Unix下應該是LF,所以提示的”未找到文件”指的是/bin/bash末尾多了個字符未找到.使用編輯器切換一下換行方式並保存.

Git - remote: error: cannot run hooks/post-receive: No such file or directory 報``` 錯查看下方鏈接： https://stackoverflow.com/questions/11630433/git-remote-error-cannot-run-hooks-post-receive-no-such-file-or-directory/40355988 八、設置域名 首先去阿里雲或者騰訊雲購買域名，然后實名認證就可以了。 1. 打開域名管理，點擊解析 <p style="text-align:center"> ![image](https://yqfile.alicdn.com/cb12b44ff7a6bcad844bbb9d804851a656e0dbe8.png)</p> 2. 添加記錄，選擇 www <p style="text-align:center">![image](https://yqfile.alicdn.com/0db8e2203ff89ef7f1a08fdb18fce3987ae6c1b5.png)</p> 3. 記錄值為自己服務器的ip地址 <p style="text-align:center">![image](https://yqfile.alicdn.com/b8bc54e194bd48ffe7695070fff01b2f4e2765af.png)</p> 4. 輸入 www.wang91.cn <p style="text-align:center">![image](https://yqfile.alicdn.com/7ee5c9d24e5630c26b5eb3d4a64934cdded42e2f.png)</p> 轉載自https://m.aliyun.com/yunqi/articles/615582