hexo搭建個人網站部落格完全教程

wistbean在掘金發表於2018-09-14

原文地址 www.wistbean.com/build-perso…

為什麼要有自己的個人網站呢?

我覺得現在身處於網際網路時代,有自己的個人網站其實就和名片差不多了,在這裡可以不斷的記錄自己的生活,總結自己的知識,人生思考什麼的,以後介紹自己直接把網站扔給對方。一來是可以裝下逼,二來是可以讓對方更好的瞭解自己。

再者就是相對的自由了,現在市面上有很多 Blog 系統,你只要註冊一下,就可以直接在他們的平臺生成一個你自己的blog,雖然很方便,但是你要付出的代價就是:忍受他們平臺在你的blog嵌入一堆廣告。受他們的限制與監管,人家不爽就隨隨便便刪了你的文章,沒商量。

比如這樣:

知乎

簡書

微信

爽嗎?反正我是不爽。

所以自己搞一個完全屬於自己的網站,相對來說,沒那麼苦逼。為什麼說相對? 因為我們也要看大佬的眼色啊。

但是總比被各種平臺噁心好吧。也別幻想什麼區塊鏈部落格系統,對於目前來說,不現實。

使用 Hexo 框架來搭建個人網站

這兩天我重新整理了一下自己的 Blog ,因為我之前用的是 Octopress 框架,有些年頭了,一些主題和外掛並不是很多。

後來對比了幾個框架,發現 Hexo 不錯,和 Octopress 差不多,也是可以用 Markdown 寫文章,然後生成靜態網站,不過主題豐富一些。

Hexo 是基於 nodejs 的,搭建起來很簡單。那麼接下來就說說如何從0開始搭建吧。

開始搭建

  1. 因為 hexo 是基於 node 框架的,所以呢,我們首先需要下載安裝node,下載地址:nodejs

  2. 安裝完之後,我們開啟命令視窗,輸入 node -v ,如果返回下圖所示,那麼就說明你安裝node成功了。

node 版本

  1. 安裝成功後,我們在命令列視窗執行如下命令來安裝hexo:

    npm install hexo-cli -g
    複製程式碼
  2. 初始化部落格目錄:

    hexo init wistbean.github.io (這裡的wistbean換成你自己的英文名)
    複製程式碼
  3. 初始化完成後,我們就進入我們的目錄:

    cd wistbean.github.io
    複製程式碼
  4. 安裝

    npm install
    複製程式碼
  5. clean一下,然後生成靜態頁面

    hexo clean
    hexo g
    複製程式碼

g 就是generate ,生成的意思

  1. 把你的網站執行起來

    hexo s

s 就是server ,在伺服器執行的意思

  1. 開啟你的瀏覽器,輸入 localhost:4000 。 自此,你的個人網站就這麼速度的搭建起來了!

hexo

讓你的個人網站漂亮的 blingbling 的

修改你的網站中的個人資訊

進入你的網站目錄,開啟 _config 檔案,這個檔案是用來配置你的網站資訊的。

這裡列出我的簡單配置,具體可以看這個文件

        title: wistbean
        subtitle: 肯定會
        description: wistbean的個人部落格,主要涉及到程式設計(Java,Python,Linux等),個人提升學習,視訊教程,《肯定會軟體技術》電臺節目
        keywords: wistbean,肯定會,java,python,電臺,教程
        author: wistbean
        language: zh
複製程式碼

選一個主題

剛搭建完的網站,是不是覺得有點醜,不符合你的漂亮的臉龐? 反正我是這麼覺得的,那麼就選一個主題來裝飾一下吧,在這裡可以選擇你要的主題:hexo主題

下載主題

選擇好了你的主題之後,就可以下載主題資源了,比如我這裡選擇一個 NEXT 主題來演示一下:

      git clone https://github.com/iissnan/hexo-theme-next
複製程式碼

這裡主要就是將主題下載到我們的themes目錄下。

如果你還不熟悉 Git 的使用的話,可以看看我之前的 Git 視訊教程:程式碼託管Git的使用

配置主題

主題下載完之後,在你根目錄下的 _config.yml 檔案中,修改 theme 為你的主題名字:

      theme: next
複製程式碼

重新生成和執行

      hexo g
      hexo s
複製程式碼

訪問一下看看,是不是比之前好看多了?

hexo next主題

寫上你的第一篇部落格文章,打上標籤和分類

你已經把你的網站打扮的漂亮大方簡潔惹人愛了,那麼接下來就要好好去寫內容了,內容才是重要的。

兩種方式來新建你的博文

命令形式

在你的blog目錄下使用如下命令:

      hexo new article (這裡的article寫上你的文章的名稱)
複製程式碼

輸入這樣的命令之後你的source/_posts下就會生成一個 article.md 檔案,在這個檔案下就可以寫上你的部落格內容了。用 Markdown 的語法去寫。

直接新建方式

直接點的方式就是直接在source/_posts新建一個 Markdown 檔案,其實和命令形式是一個道理,只不過命令形式用了命令來建立。推薦使用命令的方式,畢竟 Geek 一點。

給你的文章打上標籤

打標籤能讓你的文章方便檢索。

開啟標籤功能:

    hexo new page tags
複製程式碼

這時候你的source/下生成 tags/index.md 檔案,我們將其開啟,然後把它改成:

    type: "tags"
    comments: false
複製程式碼

這時候你要為你的文章打上標籤就可以在文章的頭部寫上:

    tags:
        - Tag1
        - Tag2
        - Tag3
複製程式碼

給你的文章新增分類

分類,歸檔,是你部落格的特性之一。

開啟分類功能:

      hexo new page categories
複製程式碼

這說你的source目錄下生成 categories/index.md 檔案,我們將其開啟,把它改成:

      type: "categories"
      comments: false
複製程式碼

這時候你就可以給你的文章歸類存檔了,使用方式就是在你的文章的頭部加上:

      categories:
               - 分類1
               - 分類2
複製程式碼

注意:標籤和分類要確定你的配置檔案 _config.yml 是否有開啟了 tag_dir: tags 和 category_dir: categories。另外,Markdown 的語法是寫作最優雅最簡潔最簡單的,如果之前沒用過的建議去學一下Markdown 語法說明,一般一個鐘左右就能掌握。因為它和HTML那樣簡單。

給你的文章新增評論

當別人看了你的文章,有問題想跟你探討,沒評論怎麼行?評論也是你的 Blog 互動的重要方式之一。

現在很多主題都內建了第三方評論的系統。比較常用的有:

自己去看一下,喜歡哪個用哪個,自己的 Blog 就是要自由。

選好你的評論系統之後,進入平臺註冊後,平臺會給你一個 APPID和appkey。拿到這些資訊到你的主題下的配置檔案下設定。

以 next 主題和暢言評論為例:進入你的themes/next,開啟_config.yml,定位到 changyan ,把 enable 改為 true。

changyan:
  enable: true
  appid: 這裡寫上你的暢言在appid
  appkey: 這裡寫上你的暢言在appkey
複製程式碼

設定好之後,重新clean生成一下就有評論啦:

 hexo clean
 hexo g
 hexo s
複製程式碼

開啟你的預覽連線看看你的文章下方,已經有評論功能啦。

評論

讓全世界的人都認識你

已經搞定了個人blog,接下來當然是要部署到網上讓人家訪問了,如果不想花錢,可以使用GitHub Pages,使用它就可以部署自己的網站啦。

對於 GitHub 不知道怎麼用的童鞋,可以看一下我的這個視訊教程:GitHub完全使用指南

建立Github pages 倉庫

接著建立一個 xxx.github.io 的 public 倉庫,這裡的xxx寫你的名字,比如我寫的是 wistbean.github.io,那麼到時我就可以通過 wistbean.github.io 來訪問我的網站了。 建立完成之後,那麼你就有自己的 Git 地址了。

安裝 hexo-deployer-git

在你的部落格目錄下輸入如下命令:

      npm install hexo-deployer-git --save
複製程式碼

配置你的Git

開啟你的配置檔案,然後輸入你的git地址:

      deploy:
          type: git
          repo: https://github.com/xxx/xxxx.github.io.git
複製程式碼

推送你的網站到Github上

直接輸入命令 : hexo d

d 就是 deploy , 部署上去的意思。

訪問你的網站

直接在瀏覽器輸入你的 xxx.github.io 就可以訪問啦!

要有點個性,綁上你的域名

有了自己的網站,當然是要自己的網址,這樣才帥嘛,當然有自己的伺服器就更帥了。

購買域名

關於域名的購買我比較推薦去godaddy,這是國外的域名商,使用起來不錯的。

繫結域名

買完你的域名之後,接下來幾個步驟輕鬆搞定:

新增 CNAME 檔案

在你的部落格的 sources 目錄下新建一個 CNAME 檔案,這個檔案裡面就寫你的域名就可以了,比如我就寫: www.wistbean.com。 接著將檔案push到你的GitHub上,可以使用 hexo s 命令。

在你的域名商後臺進行 DNS 解析新增兩條記錄:

 1. 主機記錄: @
     記錄型別:A
     記錄值:192.30.252.154 或者 192.30.252.153

 2. 主機記錄: www
      記錄型別: CNAME
      記錄值: xxx.github.io  (這裡就是你的github倉庫名稱)
複製程式碼

GitHub 設定域名

在你的 GitHub 設定域名,在你的 GitHub 部落格專案中點選 Settings,在 GitHub Pages 下的 Custom domain 寫上你的域名,然後 save。

以上,你就可以通過你自己的域名訪問到你的網站啦!

伺服器搞起,完全自主權

雖然你現在已經可以使用你的域名訪問你的網站,但是呢,有自己的伺服器託管自己的網站還是爽一點的,GitHub遮蔽了百度的爬蟲,也就是說別人通過百度搜尋不到你的網站,這你能忍?

有自己的伺服器的話就可以被更多搜尋引擎收錄,還有呢就是有自己的伺服器還可以幹些其它的事情。

購買伺服器

這裡的伺服器當然推薦要買國外的,這樣的話你的域名就不需要備案,而且還可以搭建 VPN ,一舉三得,酸爽。

伺服器購買推薦使用搬瓦工,因為這是我用過覺得價效比最好的,而且呢,還可以領取到優惠碼,很多人不知道的,領取優惠碼可以看這裡:拿到搬瓦工優惠碼

使用 Nginx

買了伺服器之後,那麼你就可以用 Nginx 來當做你網站的 web 伺服器,搭建也很簡單,關於Nginx搭建和配置就不多說了,如果之前沒玩過可以看這裡:Nginx搭建靜態網頁伺服器

DNS解析到你的伺服器

在你的域名商,使用 DNS 解析,新增一條 A 記錄就可以了,記錄值就是你這臺伺服器的 IP 地址,一般啟用後 30 分鐘左右就可以訪問啦。

以上你就完全擁有屬於自己的個人網站啦。

hexo參考文章

相關文章