V-P-S 服務器搭建 hexo博客

一、V-P-S介紹

        V-P-S(Virtual Private Server 虛擬專用服務器)技術,將一臺服務器分割成多個虛擬專享服務器的優質服務。實現VPS的技術分爲容器 [1]  技術,和虛擬化技術 [2]  。在容器或虛擬機中,每個V-P-S都可分配獨立公網IP地址、獨立操作系統、實現不同V-P-S間磁盤空間、內存、CPU資源、進程和系統配置的隔離,爲用戶和應用程序模擬出“獨佔”使用計算資源的體驗。V-P-S可以像獨立服務器一樣,重裝操作系統,安裝程序,單獨重啓服務器。V-P-S爲使用者提供了管理配置的自由,可用於企業虛擬化,也可以用於IDC資源租用。

        這些VPS主機以最大化的效率共享硬件、軟件許可證以及管理資源。每個VPS主機都可分配獨立公網IP地址、獨立操作系統、獨立超大空間、獨立內存、獨立CPU資源、獨立執行程序和獨立系統配置等. V-P-S主機用戶除了可以分配多個虛擬主機及無限企業郵箱外, 更具有獨立主機功能, 可自行安裝程序,單獨重啓主機。

二、Hexo介紹

        Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁。

三、環境準備

        v-p-s服務器:

            操作系統:Centos 7.4

            git

            Node.js

四、安裝步驟

    1、更新系統yum源

        首先,進行服務端的系統更新,yum update -y

        image.png

    2、關閉系統防火牆和selinux

        systemctl stop firewalld

        systemctl disable firewalld

        vi /etc/sysconfig/selinux 

        image.png

    3、安裝Git:

        sudo yum install -y git-core

        image.png

        查看git版本

        git version

        image.png

    4、安裝Node.js,

        yum install -y nodejs

        image.png

        無法通過yum源安裝 nodejs,可從官網上下載,然後進行安裝:

        https://nodejs.org/dist/v8.12.0/node-v8.12.0-linux-x64.tar.xz

        下載下來 然後上傳到服務器 也可以用wget下載

        安裝wget        

        yum install -y wget

        image.png

        wget 下載 nodejs

        wget https://nodejs.org/dist/v8.12.0/node-v8.12.0-linux-x64.tar.xz

        image.png

        安裝 nodejs

        tar --strip-components 1 -xvf node-v8.12.0-linux-x64.tar.xz

        node -v

        image.png

    5、安裝hexo:

        npm install hexo-cli -g

        image.png

    6、初始化博客文件夾

        hexo init hexo

        image.png

    7、安裝 hexo 的擴展插件

        cd hexo

        nmp install -y

        image.png

    8、生成靜態頁面

        hexo generate   或     hexo g

        image.png

    9、啓動hexo服務

        hexo s

        image.png

    10、瀏覽登錄:

        http://IP:4000

        image.png

    

五、安裝nginx服務

    1、安裝nginx

        yum install nginx -y

          image.png

        由於yum中沒有nginx的安裝包,需要其他方法進行安裝

    2、  使用rpm安裝nginx

        rpm -ivh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm

        image.png

        yum install nginx -y

        image.png

    3、配置nginx

        vim /etc/nginx/conf.d/default.conf

        image.png

        vim /etc/nginx/nginx.conf 

           image.png

    4、重啓服務、設置開機啓動

        systemctl restart nginx

        systemctl enable nginx

        image.png

    5、瀏覽器認證

        http://域名

        image.png

        

六、更換主題

    1、關閉hexo服務

        按ctrl+c關閉server

        image.png

    2、切換到主題目錄

        cd /root/hexo/themes

        image.png

    3、下載主題

        把需要的主題從GitHub網站上下載下來

        git clone https://github.com/litten/hexo-theme-yilia.git

        ls

        image.png

    4、重命名主題文件夾,然後修改配置文件

        cp -R hexo-theme-yilia/ yilia

        ls    

        image.png

        cd /root/hexo

        vim _config.yml 

        image.png

    5、重啓服務

        systemctl restart nginx 

        hexo s

        image.png

    6、瀏覽器驗證

        http://域名

        image.png       

 七、安裝hexo-admin插件

    1、安裝hexo-admin

        npm install --save hexo-admin

        image.png

    2、重啓服務器、瀏覽器驗證

        hexo s

        http://localhost:4000/admin/

        image.png

    3、設置後臺密碼

        修改站點配置文件:

        cd /root/hexo

        vim _config.yml 

        image.png

        備註:username  是用戶名   password_hash是密碼的哈希映射值。不同版本的node.js的哈希算法是不一樣的。用服務端生成有效的密碼哈希值

        image.png

    4、瀏覽器驗證

        hexo s

        http://localhost:4000/admin

        image.png

    5、將hexo-admin 管理界面設置nginx

        每次訪問hexo-admim管理界面,都需要輸入 http://域名:4000/admin,可以將hexo-admin的管理界面設置到nginx服務。

        編輯nginx的配置文件:  vim /etc/nginx/conf.d/default.conf 

            image.png

        重啓nginx服務:   systemctl restart nginx

        通過瀏覽器網頁驗證結果:http://域名/admin

            image.png

        

        

        

八、博客備份至github

    1、登錄GitHub官網,註冊賬號或者登錄賬號:

        http://www.github.com

        image.png

        這裏我以前已經註冊過GitHub賬號,登錄後,顯示該界面。

    2、創建新的倉庫

        image.png

    3、填寫新的倉庫信息

        image.png    4、查看已經創建好的倉庫

        image.png

    5、配置SSH

        在VPS服務器端運行以下命令,生成密鑰:

        ssh-keygen

        直接敲三次回車,既可以生成id_rsa.pub文件,裏面記錄着SSH key的內容

        image.png

    6、複製SSH key

        vim ~/.ssh/id_rsa.pub

        image.png

    7、GitHub中進行配置

        打開剛註冊的GitHub,點擊Setting:

        image.png

    8、添加SSH key

        點擊左邊的 “SSH and GPG key”,然後點擊“Net SSH key”

        image.png

    9、複製SSH key

        隨便輸入ssh key的title,然後將VPS服務器生成的SSH key粘貼到key的對話框中

        image.png

    10、查看已添加的SSH 

        image.png    11、測試SSH是否配置成功

        在VPS服務器端進行測試,輸入以下信息:

        ssh -T [email protected]

        image.png

        提示測試已連接成功

    12、配置VPS服務器端的SSH

        打開Hexo目錄下的_config.yml,光標移動至最下面,配置信息如下:

        vim _config.yml

        image.png

    13、備份hexo至GitHub:

        hexo clean

        hexo g

        hexo d

        image.png

        

        image.png

        image.png

        發現找不到git,需要執行以下命令:

        npm install hexo-deployer-git --save

        image.png

        再執行 hexo d

        image.png

    14、查看GitHub,是否同步

      image.png

 九、hexo管理界面在線發佈

    1、 hexo是一種靜態博客,平時寫博客比較方便,但是沒有後臺管理,在修改博客或者寫博客時會比較麻煩,在此使用了hexo-admin插件提供了在web UI下對博客進行增刪改查。對於hexo-admin的 具體安裝和配置,在上面的部分已經詳細介紹,在此主要是使用deploy按鈕實現在線發佈。

    2、deploy的介紹

        hexo-admin有一個功能是deploy,具體的實現是使用nodejs的spawn函數來執行發佈的腳本。  剛開始不懂spam的使用,後來查過很多資料,瞭解到deploy的輸入位置是對hexo-admin的配置裏面deployCommand選項,可以爲空。但是需要注意的是,admin的添加需要在 deploy下面,不然會提示找不到腳本,我是找了很多資料才發現的。

    3、編寫腳本

        最好將腳本存放在hexo的安裝目錄下,我的hexo目錄是 :

     /root/hexo

       編寫腳本:

        touch hexo-generate.sh;

         vim hexo-generate.sh;

        image.png


        備註:  命令詳解

        cd /root/hexo        #切換到hexo目錄

        hexo clean             #清除緩存文件 db.json  和已生成的靜態文件 public       (網站顯示異常時,可以執行這條命令試試。)

        hexo g                    # 生成網站靜態文件到默認設置的public文件夾

        hexo d                    #  自動生成網站靜態文件,並部署到設定的倉庫。是 hexo deploy 的縮寫。

    4、賦予執行權限

         chmod +x hexo-generate.sh 

        ll

        image.png

    5、修改_config.yml文件

        vim _config.yml

        image.png

    6、重啓hexo服務

        hexo s

        image.png

    7、瀏覽器發佈博客,進行驗證

        image.png

    8、查看博客

        image.png

        

十、自動同步到GitHub

        通過上面的deploy,能夠自動發佈博客,但是登錄Github,發現不能同步到Github中,查看deploy輸出的錯誤信息,如下:

        image.png

    1、在~/ 下,touch創建文件 .git-credentials,用vim編輯器編輯此文件,輸入內容格式:

            touch .git-credentials

            vim .git-credentials   文件內容如下:

            https://{username}:{password}@github.com               # username:GitHub的用戶名     password:GitHub的密碼

            image.png

    2、在終端下執行:

        git config --global credential.helper store

        image.png

    3、查看 ~/.gitconfig 配置文件:

        vim .gitcofig

        image.png

    4、同步測試

        image.png

    提示同步成功:

        image.png

    5、登錄GitHub查看

            image.png

十一、設置每個文章在首頁顯示

        hexo在寫作的時候,如果在文中添加<!--more--> 則該標記之前的部分就會成爲該文章的簡述,顯示在首頁裏。文件的目錄在:/themes/[主題名]/layout/_partial/article.ejs 其中的一段爲:

        image.png

       從代碼上看,post.excerpt 就是加了 more 標記之後的文章摘要,如果 post.excerpt 存在且在首頁的話,則顯示文章的摘要和「Read More」按鈕。當不符合上述條件(post.excerpt 存在且在首頁),就顯示整個文章的內容 post.content。

        因爲我需要的是在文章裏沒有 more 標記時自動添加標記,所以需要改動的代碼是要放在 else 後面的。我打算在文章沒有 more 標記的時候,截取文章的前兩段作爲摘要,如果文章少於兩段,則直接顯示整篇文章內容。 

        修改後的代碼:

        image.png

十二、設置首頁的所有文章鏈接

     1、安裝插件

        在博客根目錄(注意不是yilia根目錄)執行以下命令:

        npm i hexo-generator-json-content --save

        image.png

    2、修改配置文件

        在根目錄_config.yml裏添加配置:

        

 jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

        image.png

    

        

        

               

        

             

        


        

        

        

        

        

        

       


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章