半個小時搭建出本身的我的博客（Hexo博客系統搭建）——基礎部分

時間 2019-11-15

標籤半個小時搭建本身我的博客 hexo 系統基礎部分简体版

原文原文鏈接

建議訪問原文得到更好的閱讀體驗
https://luanshizhimei.top/pos...html

Hexo搭建網站學習筆記（一）—— 基礎部分

身邊的朋友彷佛愈來愈多開始玩Hexo來搭建屬於本身的免費靜態博客，反思一下本身還在使用廣告漫天飛的CSDN（其實思否也不錯新人也容易拉到流量），痛定思痛決定好好學習如何使用Hexo搭建一個簡單網站。前端

前言

Github page是什麼？

Github做爲全球最大的同性交流平臺一直爲優秀的禿頂人士們提供着各式各樣的代碼託管服務。而他推出的Github page就是將你的代碼倉庫當成一個靜態網頁站點。意味着咱們能夠直接上傳HTML網頁到倉庫並指定一個域名就能夠十分方便爲咱們的項目添加網頁demo。node

選擇一個好用的博客框架

固然若每篇博客都需咱們本身用HTML編寫是十分麻煩的，因而應對這種狀況出現許多優秀針對於博客的靜態網頁生成器，咱們就稱之爲博客框架吧。表明有：Jekyll、Hexo等。 git

Jekyll是Github page官方欽定博客框架，採用的Ruby語言開發，軟件生態圈也很是的豐富。但基於Nodejs的Hexo可能對於前端人員會更加友善一些。實際上他們之間沒有明顯好壞之分，只要以爲那個用的順手就好。 github

這裏咱們就響應文章標題使用Hexo開始來搭建咱們的博客吧！web

第一步、安裝Hexo博客系統

（一）、安裝環境

正如前文所述，咱們首先須要安裝一個Nodejs來支持Hexo。npm

Nodejs 下載地址 : http://nodejs.cn/download/

安裝注意要點：瀏覽器

你是什麼操做系統就選擇什麼版本的軟件就能夠，過程實際上是大同小異。
Windows用戶在安裝Nodejs的過程當中，必定要勾選上npm package manager(否則以後就不能以npm包的形式安裝Hexo)。
記得勾選Add to PATH(添加到環境變量)。

雖然安裝Nodejs就能夠搭建Hexo環境，可是好用的工具會使你的工做事半功倍。因而我推薦安裝Visual Studio Code來方便的編寫博客以及輸入命令等。（Vscode的終端又不是不能用）bash

VS Code 下載地址 : https://code.visualstudio.com...

安裝注意要點：markdown

必定要勾選上在目錄中顯示Open with Code的選項。(vscode是將一個文件夾當成一個項目看待，因此勾選上方便之後打開項目)
若是軟件是全英文，就點開右側導航欄最下面的Extensions(插件)，在搜索欄中輸入Chinese (Simplified) Language，點Install(安裝)。而後軟件會提示你重啓點確認就能夠了。（VScode的翻譯已經很不錯了）
(可選)安裝一個vscode-icons的插件會方便區分不一樣的文件。

（二）、安裝Hexo

1.打開運行（快捷鍵Ctrl+R），啓動cmd。（輸入cmd點回車）

2.而後分別輸入以下命令查看是否能夠獲得正確的nodejs和npm的版本號，若提示沒有該命令的就返回上一步從新安裝。

node -v
npm -v

3.確保nodejs和npm正確安裝以後即可以輸入以下命令安裝hexo。（必定要帶上-g安裝到全局環境）

npm install -g hexo-cli

4.若出現關於fsevents（mac下的軟件）的WARN（警告）忽視就好，實在不放心就輸入版本命令查看hexo是否能運行。

hexo -v

（三）、初始化博客

1.在你的硬盤上選擇一塊風水寶地隨意建立一個文件夾。（好比：在個人文檔裏建立了一個名爲Blog文件夾）

2.使用VS Code打開你新建立的文件夾。（若是前面勾選了在目錄菜單中增長Open with Code，就能夠直接使用鼠標右鍵採用VS Code打開）

3.而後調出終端（Ctrl + Shift + `），輸入安裝Hexo的命令。（這裏可使用Shift + inssert粘貼）

hexo init

4.初始化完成以後根據提示再安裝一下所依賴npm包。

npm install

第二步、平常寫做

（一）、建立新的博客

通過以上步驟並無發生錯誤的話，就恭喜你已經成功搭建出Hexo博客。編寫博客的環境已經有了，剩下的問題就是如何編寫博客？

一樣在VS Code的終端中輸入新建（new）命令，末尾跟上的你的博客的名稱。

hexo n 博客的名稱

建立文件成功以後，軟件會提示新博客在/source/_posts/下。

打開文件會發現Hexo已經提早幫助咱們寫上了名稱、時間、創造者等信息。（開頭部分是yml配置語言，隨後咱們還自定義這些信息等）

（二）、MarkDown簡單上手

目前主流的博客系統，基本上都採用的MarkDown（即.md文件）來編寫博客。固然也不用特別擔憂md語法特別難，MarkDown的優美之處即是讓創造者把重心放在寫做上這件事情上而不是格式排版。

打開新建立的md文件（即新建立的博客），在vscode打開命令面板（Ctrl + shift + P），輸入： MarkDown:打開側邊瀏覽。

這麼作的好處就是你能夠一遍輸入，一遍查看文檔的效果。

咱們就以一篇文章大概編寫順序爲例來快速上手md。（若是是小白建議都手動輸入到編輯器中看一下效果）

1、標題

首先寫做咱們經常爲取一個恰當的標題而苦惱，一樣編寫md文檔中標題也是十分重要的。

md的標題通常多個#並排在一塊兒，並空出一個空格，隔開標題名。

'#'的數量表明瞭標題級數，不一樣標題級數表明了內容的層次。善用級數可方便的製做出帶目錄的文章。

md 最高能夠支持六級

# 一級標題
## 二級標題
### 三級標題
#### 四級標題
##### 五級標題
###### 六級標題

2、段落換行

在md中直接換行只是增長一個空格，換行的話必須在結尾的結尾輸入至少兩個以上的空格。

固然也能夠採用兩個以上的換行，只不過會產生多個空行。（我的以爲大多數的md排版段落段距都比較小，多個空行還美觀一些）

3、分割線

有時咱們須要一個長長分割線區分不一樣類型的內容。他的語法很簡單就是一行三個以上*(數量沒有上限)就能夠了。

下面這個就是分割線
***

4、列表

無序列表

無序列表通常使用在不須要劃分次序等級的條目中，語法也很是簡單：一個-，而後用空格隔開條目。

- 無序列表，條目一
- 無序列表，條目二
- 無序列表，條目三

有序列表

恰好和上面無序列表是相反的，強調的是次序和等級。語法：數字+. ，而後用空格隔開條目。

1. 有序列表，條目一
2. 有序列表，條目二
3. 有序列表，條目三

5、引用（塊引用）

在寫博客尤爲是技術博客咱們不免引用其餘人優秀的部分文章。爲了註明這是他人文章或外部連接。咱們可使用引用來區分，語法：> + 空格 + 內容。

並行多行的開頭的>表示一體的，分割塊引用的辦法就是多打一個換行，塊引用也能夠嵌套方法就是幾層就加幾層的>

> 單獨一行

> 表示多行1
> 表示多行2

> 塊引用也能夠嵌套
> > 這個就是新的嵌套

6、超連接/圖片

超連接

點擊可指向其餘地方（站外內均可以），語法：

[這裏是顯示的文字](www.baidu.com)

圖片

其實插入圖片的代碼就比超連接前面多了個!，語法：

![圖片不能顯示時出現的文字][img01]

更加優雅的寫法

上面的寫法均可以實現咱們插入超連接/圖片，可是這種寫法會嚴重影響到源文件的可讀性（多圖文的源文件會充滿各類地址），因此我推薦的是變量引用的辦法。

就是咱們先定義好對應資源地址的變量名。而後須要再使用變量名調用相對應的資源地址。

1.聲明變量名(能夠放在文件開頭的位置，他們是不會顯示的)，變量名是十分隨意的數字、字母、中文均可以

[變量名]:資源位置
[baidu]:https://www.baidu.com/
[個人首頁]:https://luanshizhimei.github.io/
[圖片]:img/01.jpg

2.調用的時候就方便多了

[點擊就跳轉百度][baidu]
![圖片說明][圖片]

7、表格

markdown表格是十分可視化的，大致來說就是採用|來區分單元格。

第一行是表頭，第二行是控制單元格的居中方式採用了:-(左對齊),-:(右對齊),:-:(居中)來調整。

其中的-數量不限。

| 左對齊 | 右對齊 | 居中對齊 |
| :-     | -:    | :-:    |
| 單元格 | 單元格 | 單元格 |
| 單元格 | 單元格 | 單元格 |

8、行內元素

斜體語法：選擇你須要強調的部分周圍打上一個*。

粗體就是：選擇你須要強調的部分周圍打上二個*，具體以下：

這裏是*斜體*  
這裏是**粗體**

9、HTML

實際上md使用採用HTML渲染的，因此可徹底兼容HTML代碼。可是我以爲插入HTML就違背了md的主旨了：咱們只關心寫做，排版格式一邊去。

固然必要的時候加入HTML代碼仍是對於某些特殊環境下有幫助。（如文字居中等）

最後使用md時請注重語義，而不是他的效果（效果咱們能夠自定義）

深刻學習Mark

以上7條是我總結的最經常使用部分（基本就夠用，但有必要仍是學習一下流程圖和數學公式），學無止境若是你還想深刻了解的話，能夠看看以下網站：

Markdown編輯器教程 - 老楊
Markdown中文網站

隨便再推薦幾個VS Code關於MarkDown好用的插件。

1.Markdown All in One

提升輸入效率的插件：代碼補全，快捷鍵等超方便的功能。

Markdown All in One

2.PicGo

一個方便的上傳圖片到圖牀的插件，默認圖牀SM。國內訪問Github有時會比較慢，就建議綁定國內的圖牀，如千牛、微博之類的。

PicGo

（三）、生成靜態網頁/本地瀏覽

等你寫好一篇博客以後就能夠生成(generate)網頁，也就是將你的md文件或其餘頁面文件轉換對應的html網頁，命令以下：

hexo g

完成上一步以後就能夠啓動hexo服務(server)，實現本地瀏覽，命令以下：

hexo s

值得一提的是啓動Hexo服務以後。是能夠動態監測你的修改，你修改md文件也會修改網頁。（按F5刷新就能夠看到）

第三步、發佈Blog

固然咱們的目的是爲了發佈到網絡，這裏我演示使用Github page的方式發佈。要注意的是Github是禁止了百度爬蟲的因此是不能被收錄的，我的以爲目前最好解決方案是Coding和Github的雙部署.

（一）、建立倉庫

首先你須要一個Github帳號（這不是廢話嗎？）。
找到右上角的+點卡，找到New repository(新倉庫) 。
在Repository name(倉庫名稱)中輸入你的blog名稱，注意這裏是僅支持下劃線和英文（至關於域名），最後末尾加上.github.io表示啓用Github page服務，固然這也不必定咱們能夠手動開啓Github page並指定一個域名，但圖個方便就用這個辦法吧。
最後點Create repositor，建立倉庫。

（二）、Git安裝和配置

下載並安裝Git（一路點yes選默認參數就能夠）

Git下載地址： https://git-scm.com/downloads
打開Git Bash(Git命令行版本)，先要綁定你的帳號和郵箱（爲了區分是誰的代碼），命令以下：
```
git config --global user.name "你的名字"
git config --global user.email "電子郵箱"
```
而後再生成ssh key（這個至關於你的電腦和github通訊的"鑰匙"），命令以下：
```
ssh-keygen -t -rsa -C "你的郵箱"
```
以後會提示你輸入，不用管連按三次回車。（默認大法好）
而後找到C:Users你的用戶名\.sshid_rsa.pub，用記事本打開並複製所有內容。
在SSH and GPG keys頁面中，點New SSH key(新建密鑰)。
Title(標題)就填你的電腦名稱就好，Key(密鑰)就填剛剛複製的id_rsa.pub文件的內容，最後點Add SSH key(新增密鑰)就完工。

（三）、發佈網站

從新回到Vscode打開blog項目界面，打開終端。(Ctrl + shift + `)
安裝一個hexo-deployer-git的插件，命令以下：
```
npm install hexo-deployer-git --save
```
咱們還須要設置博客根目錄下_config.yml，在最末尾的#Deployment那個部分設置爲下面這段。
```
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: 
    github: git@github.com:luanshizhimei/luanshizhimei.github.io.git,master
```
這裏git@這段是你的git ssh連接。得到的辦法：
1. 點開你的倉庫 —— Clone or download —— 複製那段git開頭的代碼，最後在末尾補上,master，代表你是發佈在主線上。
2. 或者將上面第一個luanshizhimei改爲你的Github帳號名，二個luanshizhimei改爲你的倉庫名
(可選)以前提到了關於雙部署，在coding一樣建立一個Git倉庫，而後綁定ssh key事後，一樣在_config.yml中增長相似這樣一句。
```
coding: git@e.coding.net:luanshizhimei/myblog.git,master
```
最後咱們在終端中輸入發佈命令（deploy），便可完成部署：
```
hexo d
```
等待幾分鐘，Github用戶在瀏覽器地址輸入你建立倉庫名稱（個人就是 https://luanshizhimei.github.io），就能夠查看你部署成功的博客了！（coding你須要在網站看它給你是什麼域名）