搭建前的準備

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

  1. 服務器一臺 or github 賬號一個（二選一）

  2. 域名一個（可選）

  3. node.js（建議10.0以上版本）

  4. git

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

基礎架構

這裏我選用的博客方案是較爲成熟的 Hexo 靜態博客進行操作的

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

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

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

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

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

image-20200705184424589

準備工作

申請GitHub賬號

  1. 打開 註冊網址

    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. 域名現在都需要備案，否則無法訪問（備案我會單獨寫一篇教程，折騰了我好久。到我寫這篇文章也沒備案好）

下篇教你配置主題，打造博客，預覽圖片如下：

如果你有學到，請給我點贊:+1:+關注，這是對一個:fist:堅持原創作者的最大支持！我是山禾，千篇一律的皮囊，萬里挑一的靈魂，一個不太一樣的寫手。

相關文章