Hexo+Github搭建博客

時間 2019-11-29

標籤 hexo+github hexo github 搭建博客欄目 Git 简体版

原文原文鏈接

做者：桂。javascript

時間：2017-06-10 08:08:04html

連接：http://www.cnblogs.com/xingshansi/p/6974267.html java

前言node

開會開了整整一週，剛下火車回來。打算記錄本身看的電影、書籍，記錄一些感性的文字，這類信息對公式、排版要求比較簡單，想着本身搭建一個基本型博客。git

1、環境及軟件github

　　A-環境npm

windows8.1系統
64位

　　B-軟件json

1-Node.jswindows

相似javascript，網頁製做三件套：html(內容)+CSS（結構佈局）+JS（javascript,網頁的行爲）。bash

Node.js下載安裝；

2-Git

Git是目前最早進的版本控制系統，擁有最多的用戶數量並管理着數量龐大的實際軟件項目；風靡全球的Github更是讓Git版本控制系統名聲大震。

3-hexo

Hexo 是由臺灣我的團隊基於 Node JS 開發的一個快速、簡潔且高效的博客框架。徹底開源，源代碼託管在 Github 上。安裝後，經過其簡單的命令就能夠在本地快速的搭建起一個我的博客。官網上提供的文檔全面且易閱讀，很是容易上手。

Hexo:右鍵選擇Git bash here.

安裝Hexo：

npm install hexo-cli -g

　　直接的複製粘貼是不行的，能夠按以下操做：

右擊左上角的圖標→屬性→快速編輯模式打鉤

鼠標點擊右鍵便可粘貼。

安裝完畢

2、博客搭建

幾個hexo經常使用的命令,#後面爲註釋。

$ hexo g #完整命令爲hexo generate，用於生成靜態文件
$ hexo s #完整命令爲hexo server，用於啓動服務器，主要用來本地預覽
$ hexo d #完整命令爲hexo deploy，用於將本地文件發佈到github上
$ hexo n #完整命令爲hexo new，用於新建一篇文章

　　pacKage.json的更多信息參考這裏。

　　A-搭建本地博客

初始化博客

cd d:/hexo
//npm install hexo-cli -g   此步驟爲安裝操做，假設已完成
hexo init blog
cd blog
npm install
hexo g # 或者hexo generate
hexo s # 或者hexo server，能夠在http://localhost:4000/ 查看

　　這個時候輸入http://127.0.0.1:4000/理論上能夠訪問了，但我這裏報錯。參考這篇文章作了修改：　　

If you can run hexo s perfectly, but can’t vist the local page at http://localhost:4000/blog/. May you can try another port like 5000:

$ hexo server -p 5000
INFO  Start processing
INFO  Hexo is running at http://0.0.0.0:5000/blog/. Press Ctrl+C to stop.

　　但這樣的修改只是一次性有效，要想永久有效：You can add this configuration to the file _config.yml at root:

server:
  port: 5000 # or anohter number
  log: false
  ip: 0.0.0.0
  compress: false
  header: true

　　如圖：

Run, then ok：

$ hexo s
INFO  Start processing
INFO  Hexo is running at http://0.0.0.0:5000/blog/. Press Ctrl+C to stop.

　　這樣本地的博客就搭建完成了。

　　B-博客編輯

能夠藉助markdown進行編輯，考慮到本身這次搭建的博客不復雜，直接用以前的馬克飛象，一來能夠上傳，二來能夠同步到本身的印象筆記。

新建筆記：

hexo new "測試"

　　對「測試.md」利用markdown編輯器編輯，

hexo generate //生成html靜態文件

　　登錄便可訪問：

到目前爲止，博客的操做都限定在本地，下面梳理一下網頁訪問的操做。

感興趣也能夠給博客換風格。

　　C-網頁訪問

新建github的repo，具體能夠參考這裏。

修改_config.yml中的develop，

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
      type: git
      repo: https://github.com/用戶名/用戶名.github.io.git
      branch: master

而後，經過 npm install hexo-deployer-git --save 安裝部署插件，並進行部署 hexo deploy。

至此一個基本的博客搭建完畢，別人也能夠經過網絡訪問。

3、文檔管理

hexo g:更新文檔

hexo d:部署到博客上

hexo s:部署到本地

若是想刪除文檔：./source/_post/*.md刪除便可，而後hexo g \hexo d完成刪除。

按照本身的設想，博客至少須要如下幾個功能：

基本操做：修改我的信息、文件分類
圖片插入
音頻輸入：記錄本身的一些朗讀
支持超連接：引用關於某本書、某個電影的相關文檔
快速檢索：文檔會比較瑣碎，須要支持如：標籤、關鍵詞、做者等檢索，用Markdown同步到印象筆記，能夠解決這個問題，但願最好直接能夠在博客進行該操做

目前想到就這些，須要再做補充。

我的信息：具體操做，直接套用模板。並做簡單修改。其實就是添加about頁面

hexo new page "about"

　　以後在\source\about\index.md目錄下會生成一個index.md文件，打開輸入我的信息便可

文件分類：利用Front-matter

Front-matter 是文件最上方以 --- 分隔的區域，用於指定個別文件的變量，舉例來講：

title: Hello World
date: 2017/6/10 14:46:25
---

如下是預先定義的參數，可在模板中使用這些參數值並加以利用。

---
title: 文章分類
date: 2017-06-10 17:11:24
tags: film
categories: film
comments: false
---

這時有了文章分類，且能夠對tag進行搜索：

若是是多個分類呢？按以下方式設置便可：

title: 文章分類
date: 2017-06-10 17:11:24
tags:
- film
- America
categories:
- film
comments: false
---

圖片插入：

主要語句：

<div align="center">
...
</div

**...** 部份內容爲：`<img src="./xxx.png" width = "300" height = "200" alt="圖片名稱" align=center />`

例如：

---
title: 文章分類
date: 2017-06-10 17:11:24
tags: 
- film
- America
categories:  
- film 
comments:  false
---
#### 插入圖片的通常方法
利用以下結構：

    <div  align="center">    
			...
	</div

**...** 部份內容爲：`<img src="./xxx.png" width = "300" height = "200" alt="圖片名稱" align=center />`
- 例如
<body>
    <div  align="center">    
		<img src="https://pi.tedcdn.com/r/pf.tedcdn.com/images/playlists/hated_math_1200x627.jpg" width = "300" height = "150"  alt="圖片插入"  align=center />
	</div
</body>

若是是本地圖片，直接上傳沒有成功，能夠藉助圖牀生成連接。

音頻插入：

1-音樂

這個藉助網易雲音樂的網頁版就能夠，生成外鏈

因爲是Html語言，能夠直接插入到Markdown中，效果以下：

播放音樂。

2-本地音頻

網上的音頻資料進行錄音、或者本地的錄音文件，均可以看做本地音頻，這一塊是本身很是想要的功能，其實本身更想的是本身想什麼閉上眼直接說，自動生成文字博客，然後簡單排一下版，就記錄完成，打算後面摸索實現一下。

直接上傳本地文件仍然行不通。因爲本身上傳的音頻一般不大，考慮到持久性選擇這個網站：

需求徹底知足：

1）You can upload AIFF, WAVE (WAV), FLAC, ALAC, OGG, MP2, MP3, AAC, AMR, and WMA files.

2）The maximum file size is 5GB.

這個工具真的很棒，不但支持上傳文件還支持在線錄音。

點擊share

複製綠框中的代碼便可，窗口大小是可調節的：

超連接：