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

博客框架Hexo介紹：

---

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

Hexo博客框架的優(yōu)點(diǎn)

---

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

Hexo博客框架搭建：

---

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

1.安裝Git

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

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

2.安裝Node.js

Node.js是一種運(yùn)行在服務(wù)端的JavaScript，是一個(gè)基于Chrome JavaScript運(yùn)行時(shí)建立的一個(gè)平臺。

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

2.1：下載安裝包：

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


    

        1
    

2.2：解壓縮軟件包并配置環(huán)境變量：

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


    

        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 #這里有一點(diǎn)要注意的就是，npm的源是在國外的，訪問可能會(huì)很慢，這里可以換成我們國內(nèi)的源進(jìn)行安裝加快速度。操作如下： npm config set registry https://registry.npm.taobao.org  


    

        1
    

    

        2
    

    

        3
    

3.1：初始化Hexo

上面的安裝完成之后執(zhí)行下面的命令進(jìn)行對Hexo進(jìn)行一個(gè)初始化

#這個(gè)文件名字可以自己指定，之后會(huì)在當(dāng)前目錄下生成對應(yīng)文件夾 hexo init <文件名字> cd 文件名字 npm install  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

可以看到安裝好之后的一個(gè)目錄結(jié)構(gòu)：

目錄文件說明：

_config.yml：網(wǎng)站的配置信息，您可以在此配置大部分的參數(shù)。

package.json：應(yīng)用程序的信息。EJS, Stylus 和 Markdown renderer 已默認(rèn)安裝，您可以自由移除。

scaffolds：模版文件夾。當(dāng)您新建文章時(shí)Hexo 會(huì)根據(jù) scaffold 來建立文件Hexo的模板是指在新建的文章文件中默認(rèn)填充的內(nèi)容。例如，如果您修改scaffold/post.md中的Front-matter內(nèi)容，那么每次新建一篇文章時(shí)都會(huì)包含這個(gè)修改。

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

themes：主題 文件夾。Hexo 會(huì)根據(jù)主題來生成靜態(tài)頁面。

查看hexo的版本以及對應(yīng)的數(shù)據(jù)：

3.2生成靜態(tài)文件，并開啟Hexo服務(wù)：

進(jìn)入到了hexo的安裝目錄之后，使用hexo generate來生成靜態(tài)文件，也可以使用hexo g，之后使用hexo server（可以寫成hexo s）命令啟動(dòng)服務(wù)，操作如下：

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

4.初步使用Hexo：

---

使用前，我們對我們的站點(diǎn)進(jìn)行一個(gè)配置，也就是我們創(chuàng)建的hexo目錄的_config.yml文件，可以修改的部分介紹如下：

# Site
title: QIMING.INFO #博客網(wǎng)站的標(biāo)題
subtitle:          #博客網(wǎng)站的副標(biāo)題
description:       #你的網(wǎng)站描述
keywords:          #網(wǎng)站的關(guān)鍵詞  
author:            #作者的名字
language:          #博客網(wǎng)站使用的語言
timezone:          #網(wǎng)站時(shí)區(qū)  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

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

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

執(zhí)行下面的目錄創(chuàng)建一篇新文章：

hexo new post <文章標(biāo)題>  


    

        1
    

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

這里我創(chuàng)建了一篇標(biāo)題為First_Blog的博客，創(chuàng)建之后hexo目錄下面的source/_post文件夾下會(huì)產(chǎn)生一個(gè)First_Blog.md的文件

4.2:編輯文章

進(jìn)入到上面說的那個(gè)目錄下可以看到我們創(chuàng)建的博客文件：

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

title：標(biāo)題

tage：標(biāo)簽

categories：分類

date：時(shí)間

這些標(biāo)注大家在-----區(qū)域可以進(jìn)行使用

4.3：發(fā)布文章

輸入如下命令，生成靜態(tài)網(wǎng)頁，靜態(tài)網(wǎng)頁會(huì)存放在public文件下

hexo  g
hexo s  


    

        1
    

    

        2
    

之后就可以去瀏覽器訪問了！可以看到我們發(fā)布的文章已經(jīng)成功在瀏覽器顯示，到這里個(gè)人博客網(wǎng)站就已經(jīng)成功搭建了。

5.主題的選擇：

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

---

將Hexo部署上線到服務(wù)器：

---

如果是有服務(wù)器的小伙伴，也可以將Hexo部署到服務(wù)器供全網(wǎng)訪問，服務(wù)器的購買這里就不多說，阿里云跟騰訊云上面對于學(xué)生也有較為優(yōu)惠的價(jià)格。部署到服務(wù)器的話，就需要將上面的全部操作，在你的服務(wù)器系統(tǒng)上面執(zhí)行，之后我們使用Nginx（反向代理服務(wù)器）進(jìn)行部署。

Nginx安裝：

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

#安裝gcc編譯環(huán)境： yum install -y gcc-c++ #安裝zlib-devel庫： yum install -y zlib-devel #安裝OpenSSL密碼庫： yum install -y openssl openssl-devel #安裝pcre正則表達(dá)式庫：編譯nginx，需要需要指定pcre的路徑，這里我們選擇安裝穩(wěn)定版本的。 下載地址：https://ftp.pcre.org/pub/pcre/ #選擇對應(yīng)的版本下載下來之后上傳到我們的服務(wù)器，也可以使用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下載官網(wǎng)：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 #編譯指定安裝路徑需要進(jìn)入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的一個(gè)模塊，就是可以使用https：//這樣去訪問。 make && make install #編譯安裝  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

啟動(dòng)nginx服務(wù)：

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


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

之后我們需要配置服務(wù)器公網(wǎng)ip，編輯配置文件。

之后再重啟nginx服務(wù)，開啟hexo服務(wù)，這個(gè)時(shí)候使用公網(wǎng)的ip就可以訪問到我們的hexo服務(wù)了！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：csdn    作者：YO哥教你大數(shù)據(jù)

藍(lán)藍(lán)設(shè)計(jì)( www.li-bodun.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)