現在是互聯網逐漸發展，已經出現了很多可以供自己寫博客的網站，大家可以在上面 發表自己的文章，供自己記錄或者是供他人閱讀。但是，可不可以自己搭建一個只屬于自己的個人博客網站呢？這篇文章就帶你從0開始搭建一個自己的個人博客網站，并部署到屬于自己服務器。這里有一點要說的是，沒有服務器的同學使用自己機器的linux系統也是一樣的操作。我們選用一個很好用的博客框架Hexo進行搭建我們的個人博客。

博客框架Hexo介紹：

---

Hexo是一個快速，簡介而且高效的博客框架，Hexo 使用Markdown（或其他渲染引擎）解析文章，在幾秒內，即可生成一個靜態網頁展示我們發布的文章，同時也提供了大量精美的博客主題供我們使用。

Hexo博客框架的優點

---

• 速度極快：Node.js 所帶來的超快生成速度，讓上百個頁面在幾秒內瞬間完成渲染。
• 支持MarkDown：Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多數插件。
• 一鍵部署：只需一條指令即可部署到 GitHub Pages, Heroku 或其他平臺。
• 插件和可擴展性：這個也是hexo很強大的一個地方，強大的 API 帶來無限的可能，與數種模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）輕易集成

Hexo博客框架搭建：

---

我們使用Centos7系統作為演示，使用其他linux系統也是可以的，只需要更換為對應Linux版本的軟件安裝命令即可。

1.安裝Git

直接使用yum安裝即可，在命令行輸入 yum -y install git

完成之后輸入git version 查看是否安裝成功，如果顯示git版本信息即為成功，如下：

2.安裝Node.js

Node.js是一種運行在服務端的JavaScript，是一個基于Chrome JavaScript運行時建立的一個平臺。

Hexo基于Node.js，所以安裝Node.js是必須的一個操作，安裝步驟如下：

2.1：下載安裝包：

wget https://nodejs.org/dist/v12.13.1/node-v12.13.1-linux-x64.tar.xz  


    

        1
    

2.2：解壓縮軟件包并配置環境變量：

#解壓 tar -xvJf node-v6.10.1-linux-x64.tar.xz #移動到/usl/lcoal目錄下 mv node-v6.10.1-linux-x64 /usr/local/node-v6 #創建軟鏈接 ln -s /usr/local/node-v6/bin/node /bin/node ln -s /usr/local/node-v6/bin/npm /bin/npm #添加環境變量 echo 'export PATH=/usr/local/node-v6/bin:$PATH' >> /etc/profile source /etc/profile #讓環境變量生效  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

2.3：測試是否安裝成功：

在命令行輸入node -v 和 npm -v，若是顯示出了版本號，即為安裝成功：

3.安裝并使用Hexo

Hexo的安裝較為簡單，使用如下命令安裝

npm install -g hexo-cli #這里有一點要注意的就是，npm的源是在國外的，訪問可能會很慢，這里可以換成我們國內的源進行安裝加快速度。操作如下： npm config set registry https://registry.npm.taobao.org  


    

        1
    

    

        2
    

    

        3
    

3.1：初始化Hexo

上面的安裝完成之后執行下面的命令進行對Hexo進行一個初始化

#這個文件名字可以自己指定，之后會在當前目錄下生成對應文件夾 hexo init <文件名字> cd 文件名字 npm install  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

可以看到安裝好之后的一個目錄結構：

目錄文件說明：

_config.yml：網站的配置信息，您可以在此配置大部分的參數。

package.json：應用程序的信息。EJS, Stylus 和 Markdown renderer 已默認安裝，您可以自由移除。

scaffolds：模版文件夾。當您新建文章時Hexo 會根據 scaffold 來建立文件Hexo的模板是指在新建的文章文件中默認填充的內容。例如，如果您修改scaffold/post.md中的Front-matter內容，那么每次新建一篇文章時都會包含這個修改。

source：資源文件夾是存放用戶資源的地方。除 _posts 文件夾之外，開頭命名為 _ (下劃線)的文件 / 文件夾和隱藏的文件將會被忽略。Markdown 和 HTML 文件會被解析并放到 public 文件夾，而其他文件會被拷貝過去。

themes：主題 文件夾。Hexo 會根據主題來生成靜態頁面。

查看hexo的版本以及對應的數據：

3.2生成靜態文件，并開啟Hexo服務：

進入到了hexo的安裝目錄之后，使用hexo generate來生成靜態文件，也可以使用hexo g，之后使用hexo server（可以寫成hexo s）命令啟動服務，操作如下：

可以看到4000端口的服務已經開啟，之后在你的瀏覽器輸入http://<你的linux機器的ip地址或者服務器公網地址>:4000,如下可以看到最開始的一個界面：

4.初步使用Hexo：

---

使用前，我們對我們的站點進行一個配置，也就是我們創建的hexo目錄的_config.yml文件，可以修改的部分介紹如下：

# Site
title: QIMING.INFO #博客網站的標題
subtitle:          #博客網站的副標題
description:       #你的網站描述
keywords:          #網站的關鍵詞  
author:            #作者的名字
language:          #博客網站使用的語言
timezone:          #網站時區  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

我自己的修改如下供大家參考，這里的修改沒有太大的限制：

4.1：開始使用Hexo發布自己的第一篇博客！

執行下面的目錄創建一篇新文章：

hexo new post <文章標題>  


    

        1
    

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-9Tz5aBlT-1622032930755)(pictures/image-20210526145922392.png)]

這里我創建了一篇標題為First_Blog的博客，創建之后hexo目錄下面的source/_post文件夾下會產生一個First_Blog.md的文件

4.2:編輯文章

進入到上面說的那個目錄下可以看到我們創建的博客文件：

直接使用vim或者vi就可以對我們的博客文章進行編輯了，打開此First_Blog.md后可以看到—分隔的區域，這部分主要對文章進行標注變量，如下：

title：標題

tage：標簽

categories：分類

date：時間

這些標注大家在-----區域可以進行使用

4.3：發布文章

輸入如下命令，生成靜態網頁，靜態網頁會存放在public文件下

hexo  g
hexo s  


    

        1
    

    

        2
    

之后就可以去瀏覽器訪問了！可以看到我們發布的文章已經成功在瀏覽器顯示，到這里個人博客網站就已經成功搭建了。

5.主題的選擇：

主題網站：https://hexo.io/themes/ hexo提供了大量精美的主題供我們選擇，選擇喜歡的主題，在hexo目錄下的themes文件夾下使用git clone下載主題，之后再配置文件_config.yml把theme后面修改成下載的主題的名字，之后運行hexo clean ，hexo g即可看到生效的主題。

---

將Hexo部署上線到服務器：

---

如果是有服務器的小伙伴，也可以將Hexo部署到服務器供全網訪問，服務器的購買這里就不多說，阿里云跟騰訊云上面對于學生也有較為優惠的價格。部署到服務器的話，就需要將上面的全部操作，在你的服務器系統上面執行，之后我們使用Nginx（反向代理服務器）進行部署。

Nginx安裝：

Nginx是一款高性能的 HTTP 和反向代理服務器，這里我們采用編譯安裝的方式,按照下面的指引依次執行命令

#安裝gcc編譯環境： yum install -y gcc-c++ #安裝zlib-devel庫： yum install -y zlib-devel #安裝OpenSSL密碼庫： yum install -y openssl openssl-devel #安裝pcre正則表達式庫：編譯nginx，需要需要指定pcre的路徑，這里我們選擇安裝穩定版本的。 下載地址：https://ftp.pcre.org/pub/pcre/ #選擇對應的版本下載下來之后上傳到我們的服務器，也可以使用wget直接下載 tar -xf pcre-8.43.tar.gz cd pcre-8.43 mkdir -p /usr/local/pcre
./configure --prefix=/usr/local/pcre make && make install  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

下載編譯安裝nginx：

nginx下載官網：http://nginx.org/en/download.html wget http://nginx.org/download/nginx-1.16.0.tar.gz mkdir -p /usr/local/nginx tar -xf nginx-1.16.0.tar.gz #編譯指定安裝路徑需要進入nginx cd nginx-1.16.0
./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-http_stub_status_module --with-pcre #http_ssl_module  這是支持https的一個模塊，就是可以使用https：//這樣去訪問。 make && make install #編譯安裝  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

啟動nginx服務：

#啟動： /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf #用指定配置文件的方式啟動  -c #測試： /usr/local/nginx/sbin/nginx -t #這個用于測試nginx的語法是否有問題 顯示is successful即為成功。 #關閉： /usr/local/nginx/sbin/nginx -s stop #繼續輸入以下命令使Nginx開機自動啟動： systemctl enable nginx #配置文件的位置：/usr/local/nginx/conf  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

之后我們需要配置服務器公網ip，編輯配置文件。

之后再重啟nginx服務，開啟hexo服務，這個時候使用公網的ip就可以訪問到我們的hexo服務了！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：csdn    作者：YO哥教你大數據

藍藍設計( m.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務