「山禾說成長」：手把手教你搭建一個完全屬於自己的技術部落格

山禾說發表於2020-07-08

搭建前的準備

在我們正式開始搭建一個完全屬於我們自己的部落格之前，我們首先要做好一些事前的準備（當然，如果你沒有做好準備也沒有關係，下面會一步一步的教你搞定這些）

  1. 伺服器一臺 or github 賬號一個（二選一）
  2. 域名一個（可選）
  3. node.js（建議10.0以上版本）
  4. git

域名和伺服器的購買我這裡就不在文章中進行講解了，各大雲廠商都還不錯，大家可以自行搜尋進行購買～

基礎架構

這裡我選用的部落格方案是較為成熟的 Hexo 靜態部落格進行操作的

下面來講解一下上面需要準備的東西都有什麼用，分別是三種部署方式

  1. 如果你有一臺伺服器，可以選擇把部落格部署到自己的伺服器，這樣的好處是國內訪問速度快，在進行百度搜尋SEO的方便（因為百度貌似把github的站點遮蔽掉了），但是比較麻煩，需要有一定命令列的基礎（當然如果你沒有也沒有關係，畢竟像我這樣貼心的人肯定是手把手的教）

  2. 如果沒有伺服器，我們可以使用 Github Pages 服務，這樣的做的好處是方便，最快五到十分鐘就可以搭建一個出來大致的樣子出來，但是由於GitHub的伺服器在國外，國內的訪問速度上就會收到一定影響。

  3. 和第二種相差無幾，我們可以選擇把部落格部署到 GitLab Pages 服務上，和第二種方法有一些小的區別，但是也很方便～

當然，像我這麼貼心的博主，肯定是三種方法都教給你，由你自己去做出選擇，看到這裡我覺得就可以交出你的三連（關注+點贊+轉發）了～

image-20200705184424589
image-20200705184424589

準備工作

####申請GitHub賬號

  1. 開啟註冊網址

    image-20200705173041053
    image-20200705173041053

  2. 填寫相關資訊後即可完成註冊

安裝NodeJS

  1. 開啟下載地址

  2. 選擇合適的版本，傻瓜式安裝即可～

  3. 開啟命令列，輸入node -v，看到如下圖所示的版本資訊即為成功～

####安裝Git

  1. 開啟下載地址

  1. 選擇合適的版本，傻瓜式安裝即可～

  2. 開啟命令列，輸入git --version，看到如下圖所示的版本資訊即為成功～

截止這裡，我們要做的前置工作就可以告一段落了，下面我們開始

####本地hexo安裝

無論哪一種方法，都離不開這第一步，在我們本地的電腦中安裝 hexo

npm install hexo-cli -g
$ hexo init blog && cd blog
npm i
hexo s

按照上面的順序進行操作，最後在瀏覽器中輸入 localhost:4000即可看到效果～

方法一：部署在自己的伺服器上（建議有一定程式設計基礎的人員服用）

在伺服器上安裝 git

  1. 如果在我們的伺服器上輸入git --version毫無反應，說明該伺服器映象上沒有預裝git，就需要我們去手動安裝～
  2. 安裝git
yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel perl-devel
yum install -y git
  1. 建立使用者
useradd git
passwd git
  1. 切換到該使用者去建立倉庫
su git
cd /home/git/
mkdir blog
mkdir repo
cd repo
git init --bare blog.git
  1. 建立鉤子
cd blog.git/hooks
vi post-receive
// 輸入內容
#!/bin/sh
git --work-tree=/home/git/blog --git-dir=/home/git/repo/blog.git checkout -f
  1. 賦權
chmod +x post-receive
exit // 退出到 root 登入
chown -R git:git /home/git/repos/blog.git // 新增許可權
  1. 測試
git clone git@server_ip:/home/git/blog/blog.git

如果可以拉取成功，就說明我們的伺服器配置已經搞定了～

在伺服器上安裝 nginx

  1. 安裝nginx
cd /usr/local/src
wget http://nginx.org/download/nginx-1.16.1.tar.gz
tar xzvf nginx-1.16.1.tar.gz
cd nginx-1.16.1
./configure
make && make install
alias nginx='/usr/local/nginx/sbin/nginx'
  1. 配置nginx
cd /usr/local/nginx/conf
mkdir vhost & cd vhost
vi myblog.conf
server{
     listen    80;
     root /home/git/shanhe/blog/;
     index index.html index.php;
     location /{
     }
}
vim ../nginx.conf
// 在http下引入即可
include /etc/nginx/vhost/*.conf;

至此nginx的配置便告一段落～

部署到伺服器上

  1. 安裝推送工具
npm install --save hexo-deployer-git
  1. 修改_config.yml檔案
deploy:
  type: git
  repo: git@server_ip:/home/git/repo/blog.git
  branch: master
  1. 在本地的部落格資料夾下輸入deploy命令，並輸入賬號密碼即可～
hexo clean && hexo generate --deploy
  1. 輸入你的伺服器IP，即可訪問檢視效果啦～

方法二：部署到GitHub Pages上（建議新手服用）

和第一種方法相比，這種方法無疑是簡單了許多，如果熟練的話，可以在五分鐘之內即可完成，強烈建議新手使用！

  1. 建立名稱為xxx.github.io的倉庫（xxx是你的github賬號）
  1. 找到倉庫地址
  1. 修改_config.yml檔案
deploy:
  type: git
  repo: git倉庫地址
  branch: master
  1. 在本地的部落格資料夾下輸入deploy命令，並輸入賬號密碼即可～
hexo clean && hexo generate --deploy

繫結個人域名

  1. 在我們的部落格根目錄下新增CNAME檔案，裡面寫上我們的域名
shanhe.show
  1. 然後在域名解析分別解析指到我們伺服器的ip或者xxx.github.io。
  2. 將本地的專案重新deploy一遍即可輸入域名檢視效果
  3. 域名現在都需要備案，否則無法訪問（備案我會單獨寫一篇教程，折騰了我好久。到我寫這篇文章也沒備案好）

下篇教你配置主題，打造部落格，預覽圖片如下：

相關文章