天天看點
傳回

聽說每個程式員都要擁有個自己的站！

聽說每個程式員都要擁有個自己的站！
小時候想 也許多年以後，當我每天冒出新的胡須，當我腦子裡不再是網絡遊戲，當我逢人就笑，當我臉上找不出半分驕傲，當我開始習慣了指間的香煙，當我足以扛起家中的天，當我讨厭的不再讨厭，埋怨的不再埋怨，回頭看 當時那個少年，早已不見，願你我不負時光，不負自己！

Hexo簡介

Hexo 是一個快速、簡潔且高效的部落格架構。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒内，即可利用靓麗的主題生成靜态網頁。

如果你是一個不甘寂寞的程式員,也想擁有一個自己的網站,可跟随該篇文章搭建後進而根據自己的喜好,讓你的個人站更符合自己的審美

效果圖

聽說每個程式員都要擁有個自己的站！
聽說每個程式員都要擁有個自己的站！

1. Hexo安裝

本步驟需要Git與Node.js的支援。

1.1 初始化

電腦中任選盤符建立一個檔案夾作為部落格網站的根目錄，檔案名最好不要是中文。

空白處右鍵點選

Git Bash here
聽說每個程式員都要擁有個自己的站！

1.2 安裝

設定npm淘寶鏡像站

  • npm預設的源的下載下傳速度可能很慢，建議使用淘寶鏡像替換。
  • 執行下面的指令，将npm的源設定成淘寶鏡像站。 
npm config set registry "https://registry.npm.taobao.org"

出現的指令行視窗中輸入

npm install -g hexo-cli

，等待運作完成依次輸入以下指令

聽說每個程式員都要擁有個自己的站！
hexo init <建立檔案夾的名稱>
cd <建立檔案夾的名稱>
npm install
聽說每個程式員都要擁有個自己的站！
聽說每個程式員都要擁有個自己的站！

等待運作完成，此時檔案夾中多了許多檔案。

這裡解釋一下各個檔案夾的作用：

config.yml

部落格的配置檔案，部落格的名稱、關鍵詞、作者、語言、部落客題…設定都在裡面。

package.json

應用程式資訊，新添加的插件内容也會出現在這裡面，我們可以不修改這裡的内容。

scaffolds

scaffolds就是腳手架的意思，這裡放了三個模闆檔案，分别是新添加部落格文章（posts）、新添加部落格頁（page）和新添加草稿（draft）的目标樣式。

這部分可以修改的内容是，我們可以在模闆上添加比如categories等自定義内容

source

source是放置我們部落格内容的地方，也就是資源檔案夾，裡面初始隻有一個檔案夾，_posts（文章檔案夾），之後我們通過指令建立tags（标簽檔案夾）還有categories（分類）頁後，這裡會相應地增加檔案夾。

themes

放置主題檔案包的地方。Hexo會根據這個檔案來生成靜态頁面。

注意：後續的指令均需要在站點目錄下（即bd3starblog檔案夾内）使用Git Bash運作。

此時Hexo架構的本地搭建已經完成了。我們來運作一下看看：

指令行依次輸入以下指令

1.3 運作 

# 編譯檔案(生成靜态頁面)  是 hexo generate 的簡寫形式
hexo g
# 運作檔案 start
hexo s

浏覽器中打開http://locakhost:4000或者http://127.0.0.1:4000

可以看到一個網頁，說明Hexo部落格已經成功在本地運作。

聽說每個程式員都要擁有個自己的站！

1.4 擴充

建立文章或頁面。

hexo new <layout> "title"

這裡的

<layout>

對應我們要添加的内容，如果是

posts

就是添加新的文章，如果是

page

就是添加新的頁面。

預設是添加

posts

。

然後我們就可以在對應的posts或drafts檔案夾裡找到我們建立的檔案，然後在檔案裡用Markdown的格式來寫作了。

hexo

生成博文插入圖檔問題

  1. 修改站點配置檔案

    _config.yml

     裡的

    post_asset_folder:

     這個選項設定為

    true
  2. 再運作

    hexo n "xxxx"

     來生成md博文時，

    /source/_posts

     檔案夾内除了

    xxxx.md

     檔案還有一個同名的檔案夾
    1. 比如我生成的

      hexo n '看完此文-别說你不懂IoC是什麼'

       生成的目錄結構如下： 
_posts  
    看完此文-别說你不懂IoC是什麼  
    看完此文-别說你不懂IoC是什麼.md
  1. 最後在

    看完此文-别說你不懂IoC是什麼.md

     中想引入圖檔時，先把圖檔複制到

    看完此文-别說你不懂IoC是什麼

     這個檔案夾中，然後隻需要在

    看完此文-别說你不懂IoC是什麼.md

     中按照如下文法引入圖檔： 
    {% asset_img 圖檔名.jpg 你想輸入的替代文字 %}

PS: 這裡啰嗦一嘴 如果想用

![你想輸入的替代文字](圖檔名.jpg)

這種文法來插入圖檔

可安裝插件hexo-renderer-marked解決

可以隻用

npm install hexo-renderer-marked

指令直接安裝，之後在

_config.yaml

中更改配置如下：

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

之後就可以在使用

![](image.jpg)

的方式愉快的插入圖檔了。

2 本地部落格釋出到Github Pages

2.1，在Github上建立好Github Pages倉庫。

(ps: 要自行搜尋下 Github Pages倉庫 大概步驟就是 建立 bd3star.github.io 這個倉庫 然後空着就可以 最後我們編輯好的html頁面及css、js檔案都會放到這個倉庫裡 然後浏覽器通路 http://bd3star.github.io 就可以打開該倉庫的index.html頁面)

2.2，安裝釋出插件。

在站點目錄中運作指令行輸入

npm install hexo-deployer-git --save

後續部落格的修改等等各種功能 都需要安裝各種插件。這個對部落格的幫助是非常大的。

等待插件安裝完成。

2.3，将本地目錄與Github關聯起來。

指令行輸入

ssh-keygen -t rsa -C "郵箱位址"

， 這裡要輸入之前注冊Github時的郵箱，例如我之前注冊用的是 [email protected]，那指令行就輸入

ssh-keygen -t rsa -C "[email protected]"

輸入後一直回車。

打開

C:\Users\使用者名

，檔案夾内尋找

.ssh

檔案夾

聽說每個程式員都要擁有個自己的站！

打開Github 點選右上角的頭像 Settings 選擇SSH and GPG keys

聽說每個程式員都要擁有個自己的站！

點選New SSH key 将之前複制的内容粘帖到Key的框中。 上面的title 可以随意 點選add 完成添加。

聽說每個程式員都要擁有個自己的站！

此時回到指令行。 試一下是否跟Github連接配接成功。指令行輸入

ssh -T [email protected]

，彈出的内容輸入

yes

，看到出現

Hi <account name>! You've successfully authenticated, but GitHub doesnot provide shell access.

說明連結成功。此處這個

<account name>

應該是你Github的使用者名。

2.4 修改Hexo站點的配置檔案。

進入部落格檔案夾，找到

_config.yml

檔案。 這個是部落格配置檔案，後面的修改會多次用到它

修改一下title跟url等，url修改為

https://<使用者名>.github.io

，例如我的使用者名是example的話，就應該輸入

https://example.github.io
聽說每個程式員都要擁有個自己的站！

拉到檔案最底部，在deploy下面添加一個repo項 一個branch項。填入如下代碼：

type: git
repo: [email protected]:<Github使用者名>/<github使用者名>.github.io.git
branch: master

圖中也是以使用者名為example為例。填寫完成後儲存即可。

聽說每個程式員都要擁有個自己的站！

2.5 生成頁面上傳至Github

hexo g

，此時Hexo會根據配置檔案渲染出一套靜态頁面。

完成後輸入

hexo d

，此時會将之前渲染出的一系列檔案上傳至Github。

如果報如下錯誤

聽說每個程式員都要擁有個自己的站！

執行如下兩行代碼. 郵箱和名字可自己定義

git config --global user.email "[email protected]"
  git config --global user.name "Your Name"

           
# 生成靜态頁面
hexo g
# 将内容部署到網站 是hexo deploy 的簡寫 也可以簡寫成 hexo -d
hexo d
# 啟動伺服器 是hexo server 的縮寫  
hexo s

Tips： 也可以直接輸入

hexo g -d

直接完成渲染和上傳。

上傳完成後，打開https://<使用者名>.github.io檢視上傳的網頁。如果頁面變成了之前本地調試時的樣子，說明上傳以及完成了。沒變的話檢視一下上傳時指令行視窗的資訊有沒有錯誤資訊，沒有的話清除一下浏覽器緩存試試。

# 本地運作 可以用debug方式運作 友善調試報錯資訊
hexo s --debug
根據我的經驗，除了第一次部署的時候，我們會重點用到

hexo init

 這個指令外，在平時寫部落格和釋出過程中最常用的就是：

  • hexo n <filename>

     建立文章

  • hexo s

     啟動伺服器，在本地檢視内容

  • hexo g

     生成靜态頁面

  • hexo deploy

     部署到網站
以上四個步驟。

其實以上指令我覺得就足夠了，文檔裡還有很多功能，但我在實際使用的過程中都還沒有遇到。

3. 美化篇-- 使用 Next 主題

現在我們的部落格網站是灰常的不美觀的 可以使用添加一些官方提供的主題 這裡推薦使用 Next主題

3.1 下載下傳主題

3.1.1) 如果你熟悉 Git， 建議你使用 克隆最新版本 的方式，之後的更新可以通過

git pull

來快速更新， 而不用再次下載下傳壓縮包替換。

在終端視窗下，定位到 Hexo 站點目錄下(我們的站點目錄是 d://blog/bd3star)。使用

Git

checkout 代碼：

$ cd bd3star
# 注意下面指令的後面 themes/next  指的是将代碼 clone 下來放到 themes/next 目錄下  以便于我們配置
# 切記不要直接放在站點目錄下
$ git clone https://github.com/theme-next/hexo-theme-next.git themes/next

3.1.2) 不熟悉Git 下載下傳 可以從官網點選 releases->下載下傳最新的zip包

聽說每個程式員都要擁有個自己的站！
聽說每個程式員都要擁有個自己的站！
聽說每個程式員都要擁有個自己的站！

将重命名後的檔案夾放置在 站點目錄下的 themes檔案夾下

聽說每個程式員都要擁有個自己的站！

此時的目錄結構如下:

聽說每個程式員都要擁有個自己的站！

3.2 啟用主題

與所有 Hexo 主題啟用的模式一樣。 當 克隆/下載下傳 完成後，打開 站點配置檔案(即站點目錄下的

_config.yml

檔案)， 找到

theme

字段，并将其值更改為

next

 
theme: next
聽說每個程式員都要擁有個自己的站！

到此，NexT 主題安裝完成。下一步我們将驗證主題是否正确啟用。在切換主題之後、驗證之前， 我們最好使用

hexo clean

來清除 Hexo 的緩存。

聽說每個程式員都要擁有個自己的站！

3.3 驗證主題

首先啟動 Hexo 本地站點，并開啟調試模式（即加上

--debug

），整個指令是

hexo s --debug

。 在服務啟動的過程，注意觀察指令行輸出是否有任何異常資訊，如果你碰到問題，這些資訊将幫助他人更好的定位錯誤。 當指令行輸出中提示出：

INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

此時即可使用浏覽器通路

http://localhost:4000

，檢查站點是否正确運作。

當你看到站點的外觀與下圖所示類似時即說明你已成功安裝 NexT 主題。這是 NexT 預設的 Scheme —— Muse

聽說每個程式員都要擁有個自己的站！

現在，你已經成功安裝并啟用了 NexT 主題。下一步我們将要更改一些主題的設定，包括個性化以及內建第三方服務。

3.4 主題設定

選擇 Scheme

Scheme 是 NexT 提供的一種特性，借助于 Scheme，NexT 為你提供多種不同的外觀。同時，幾乎所有的配置都可以 在 Scheme 之間共用。目前 NexT 支援三種 Scheme，他們是：

  • Muse - 預設 Scheme，這是 NexT 最初的版本，黑白主調，大量留白
  • Mist - Muse 的緊湊版本，整潔有序的單欄外觀
  • Pisces - 雙欄 Scheme，小家碧玉似的清新

Scheme 的切換通過更改 主題配置檔案(主題配置檔案是 站點目錄/themes/next/_config.yml)，搜尋 scheme 關鍵字。 你會看到有三行 scheme 的配置，将你需用啟用的 scheme 前面注釋

#

去除即可。

聽說每個程式員都要擁有個自己的站！

這裡自行試一下 将第一個注釋掉 删除第二個注釋 使用下後面的幾個外觀 然後重新開機下 看下都啥樣的

3.5 設定 語言

編輯 站點配置檔案及主題的配置檔案， 将

language

設定成你所需要的語言。建議明确設定你所需要的語言，例如選用簡體中文，配置如下：

PS: 這裡說明下幾個重要的路徑 後面将不再重申

​ 站點根路徑:

D:\blog\bd3starblog

​ 站點配置檔案路徑

站點根路徑\_config.yml

​ 主題配置檔案路徑

站點根路徑\themes\next\_config.yml

 
# 這裡具體是 zh-Hans 還是 zh-CN 要看一下 themes/next/languages 裡面有哪個檔案
# 另一個需要注意的是 站點配置檔案和主題配置檔案都有這個language
language: zh-Hans
聽說每個程式員都要擁有個自己的站！

hexo s --debug

重新開機服務 檢視是否生效

這裡都變成中文 配置語言完成

3.6 設定頭像

頭像顯示在右側區域的

編輯 主題配置檔案， 修改字段

avatar

， 值設定成頭像的連結位址。其中，頭像的連結位址可以是：

位址 值
完整的網際網路 URI

http://example.com/avatar.png
站點内的位址 将頭像放置主題目錄下的

source/uploads/

 （建立 uploads 目錄若不存在） 配置為：

avatar: /uploads/avatar.png

 或者 放置在

source/images/

 目錄下 配置為：

avatar: /images/avatar.png

頭像設定示例

avatar: http://example.com/avatar.png
聽說每個程式員都要擁有個自己的站！
聽說每個程式員都要擁有個自己的站！

3.7 添加分類

修改主題配置檔案下的menu分支

聽說每個程式員都要擁有個自己的站！

可以看到添加成功了 但是 我們新添加的還不能點選打開(點開報錯

Cannot GET /tags/

)不要慌，不能擷取tags，建立一個就OK！

聽說每個程式員都要擁有個自己的站！
hexo new page 'name' # name分别為tags、categories

這樣就建立了pages。

在控制台輸入以下指令：

hexo new page 'tags' #建立tags子目錄
hexo new page 'categories' #建立categories子目錄

在你的網站根目錄下面的source檔案夾會分别生成tags、categories以及about檔案夾。

分别修改這tags和categories檔案夾中的index.md檔案，新增type屬性，如下：

---
title: 标簽
date: 2019-01-14 20:56:48
type: "tags" #新添加的内容
---

categories的修改類似。

---
title: 文章分類
date: 2019-01-14 20:53:04
type: "categories"   #這部分是新添加的
---

給模闆添加分類屬性 - 這樣在我們下次建立文章的時候

hexo n test.md

會自動有分類和标簽 我們填寫内容即可

現在我們打開scarffolds檔案夾裡的post.md檔案，給它的頭部加上

categories:

，這樣我們建立的所有新的文章都會自帶這個屬性，我們隻需要往裡填分類，就可以自動在網站上形成分類了。

title: {{ title }}
date: {{ date }}
categories:
tags:

當你建立一篇博文的時候(我們寫的博文到建立到站點目錄/source/_posts下面)，增加上tags和categories屬性值，就能在tags和categories界面檢索到你的文章了。

注意: 給文章添加标簽又兩種寫法:

  • 第一種是類似數組的寫法，把标簽放在中括号

    []

     裡，用英文逗号隔開
  • 第二種寫法是用

    -

     短劃線列出來
source/_posts/vim-node.md 
---
layout: posts
title: vim-node.md
date: 2019-01-14 22:23:43
categories: 學習筆記
tags: [vi, vim]
---

# vim 筆記

## 01 學習 vi 的目的
此處省略一堆 
這是 很多 很多 很多 内容
source/_posts/Hello World.md 
---
layout: posts
title: Hello World.md
date: 2019-01-14 22:23:43
categories: helloworld
tags: [hello, world]
---

這是 helloworld 檔案的内容 後面省略一大堆内容

重新開機後可以看到如下效果 标簽和分類可以點選 也可以統計了 并且左側也發生了一點變化

聽說每個程式員都要擁有個自己的站！

3.8 個性化定制

添加fork me on github 在部落格的左上角或者右上角

在http://tholman.com/github-corners/或者https://github.com/blog/273-github-ribbons選擇合适的樣式複制代碼到

themes/next/layout/_layout.swig

 ，在

<div class="headband"></div>

 下面：

注意：須手動輸入style放置自己想要的位置

聽說每個程式員都要擁有個自己的站！
<!-- GitHub-start -->
    <a href="https://github.com/bd3star" target="_blank">
      <img style="position: absolute; top: 0; right: 0; border: 0;"
       src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub">
    </a>
<!-- GitHub-end -->
聽說每個程式員都要擁有個自己的站！

3.9 動态背景

目前NexT主題最新的是V6+版本，這個版本中可以有4種動态背景：

  • canvas-nest
  • three_waves
  • canvas_lines
  • canvas_sphere

這裡僅示範 canvas-nest 動态背景

# 切換到主題路徑下
$ cd themes/next
# 注意 後面  下載下傳到 主題next路徑下的 source/lib/canvas-nest 檔案夾裡面
$ git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

建立

footer.swig

檔案 在

/source/_data

目錄下

編輯檔案

footer.swig

 
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="dist/canvas-nest.js"></script>

在NexT中

_config.yml

，取消注釋

footer

此

custom_file_path

部分。

custom_file_path:
  footer: source/_data/footer.swig
           
# 清理緩存
$ hexo clean
# 編譯
$ hexo g
# 啟動
$ hexo s 
# 部署到 github 上
# $ hexo d

3.10側邊欄社交小圖示設定

打開主題配置檔案

_config.yml

，搜尋

social:

,

||

之後是在圖示庫中對應的圖示。注意空格就行。

聽說每個程式員都要擁有個自己的站！

3.11 設定網站圖示

預設的網站圖示是一個N，當然是需要制定一個圖了，在網上找到圖後，将其放在

/themes/next/source/images

裡面，然後在主題配置檔案中修改下圖所示圖檔位置

聽說每個程式員都要擁有個自己的站！

實作效果

更多功能

  • 設定首頁不顯示全文(隻顯示預覽或者隻顯示概述)
  • 首頁在預覽文章顯示圖檔
  • 隐藏頁腳 Hexo 及 Next 顯示
  • 添加RSS
  • 實作點選出現桃心效果
  • 修改文章内連結文本樣式
  • 修改文章底部的那個帶#号的标簽
  • 在每篇文章末尾統一添加“本文結束”标記
  • 修改作者頭像并旋轉
  • 博文壓縮
  • 修改``代碼塊自定義樣式
  • 首頁文章添加陰影效果
  • 在網站底部加上通路量
  • 添加熱度
  • 網站底部字數統計
  • 添加 README.md 檔案
  • 設定網站的圖示Favicon
  • 實作統計功能
  • 添加頂部加載條
  • 在文章底部增加版權資訊
  • 修改網頁底部的桃心
  • 文章加密通路
  • 添加jiathis分享/自定義圖示按鈕
  • 博文置頂
  • 修改字型大小
  • 修改打賞字型不閃動
  • 自定義滑鼠樣式
  • 為部落格加上萌萌的寵物
  • DaoVoice 線上聯系
  • 點選爆炸效果
  • …
github git 配置檔案 指令行 d3
上一篇: Python 函數中箭頭 （-&gt;）的用處
下一篇: 白話SpringCloud | 第六章：Hystrix監控面闆及資料聚合(Turbine)

繼續閱讀