Github+hexo+next搭建教程


今天參考的是大神的教程,學了一個新東西,但是可能由於原教程中運用的npm包與我當前使用的npm包版本不同的原因,有出過多處運行錯誤,但都在此教程中解決了;

總結了下命令:

npm install hexo -g  全局安裝

hexo -v  查看當前版本

hexo init 初始化

hexo install  安裝組件

hexo g 生成加載頁面

hexo s 開啟服務 http://localhost:4000/ 

npm install --save hexo-deployer-git  部署git

hexo d 部署 hexo

前言

本次我會逐步演示如何在Github上搭建自己的靜態博客,先看看我之前已經搭建好的博客效果:https://zouchanglin.github.io很多東西呢只是正對自己喜歡的風格來選擇的,比如博客的風格,我自己比較喜歡Next主題的風格,Github上的項目地址是:https://github.com/iissnan/hexo-theme-next ,大家也可以根據自己喜歡的風格自行選擇!

工具

markdown編輯器

由於我們寫博客是需要使用markdown的語法的,一款好用的markdown文件編輯器必不可少,這個也是任憑大家自己選擇,我個人比較喜歡使用Atom,這是一款跨平台的文本編輯器,用了一段時間感覺還不錯。markdown語法很簡單,在后面我會做一些簡單的介紹。我也是最近才開始使用markdown來寫博客,我以前是習慣在CSDN上寫博客的,什么插入圖片、插入代碼、插入音樂、插入視頻…之類的問題通通不用擔心,這些坑我都踩過了,現在總結一下經驗而已。Atom的下載地址:https://atom.io/ 安裝過程很簡單在此不贅述!

Git工具

這個不用說,提交代碼必備,直接使用它的命令行工具就很OK,說到命令行大家也不用擔心,常用的就那么幾個,Git的下載地址:https://git-scm.com/download/win 安裝過程很簡單在此不贅述,安裝完成后鼠標右鍵菜單就會多出兩個選項:Git GUI Here 、Git Bash Here,其中Git Bash Here就可以在當前目錄下打開Git的命令行!

Node.js

Node.js是一個Javascript運行環境,是一個基於Chrome JavaScript運行時建立的平台, 用於方便地搭建響應速度快、易於擴展的網絡應用。Node.js 使用事件驅動, 非阻塞I/O 模型而得以輕量和高效,非常適合在分布式設備上運行數據密集型的實時應用。hexo正是需要這個環境,所以安裝安裝Node.js是必不可少的,下載鏈接:http://nodejs.cn/download/ 安裝過程也是非常簡單,不在贅述!

注意:上面Git工具和Node.js環境是必須安裝的,Atom只是一個方便於我們編輯md文件的工具,可以先不安裝!

上述工具安裝完成后,打開Windows的命令行,分別輸入3個命令看看是否安裝完成:
node -v 、npm -v 、git –version 出現版本號即說明安裝完成!

Hexo

Hexo簡介

hexo是個什么東西呢?總的來說就是把你的markdown文件轉化為HTML靜態頁面的一種東西,瀏覽器是不會直接解析markdown文件的,所以我們需要把自己寫的markdown文件先轉化為HTML靜態頁面才能被瀏覽器解析,這個過程就需要Hexo來幫我們完成。更多內容請參考:http://coderunthings.com/2017/08/20/howhexoworks/ 這篇文章說的很詳細!

安裝過程

首先我們將本地的博客push到遠程倉庫中,本地博客得先有個存放位置,於是我們現在本地新建一個文件夾,名稱隨意(但是最好不要帶中文和空格,對於一個程序員來講,路徑中包含中文或者空格簡直是血的教訓…),我就在A盤下新建一個名稱為hexo的文件夾

然后進入到剛剛新建的文件夾,右鍵Git Bash Here,輸入npm install hexo -g,開始安裝Hexo,安裝完成后輸入 hexo -v 查看版本,出現如圖所示信息即使安裝成功

完成上一步操作之后,我們需要初始化這個文件夾,輸入hexo init 即可初始化該文件夾,可以看到初始化之后中文件夾中多出來了如此多的內容!

接着我們需要安裝一些組件,輸入命令hexo install

忙活了這么一大堆,現在該生成HTML靜態資源文件了,輸入命令hexo g完成頁面的生成
我們先在本地看看效果吧,輸入hexo s開始服務器,地址是http://localhost:4000/ ,然后打開瀏覽器就會出現我們的頁面:

出現上面的頁面就意味着我們成功了一半!

Githu博客倉庫的建立

首先我們得申請一個Github賬號,已有Github賬號的跳過




此時需要我們認證一下郵箱的內容,我就直接在Android端認證了,出現Your email was verified.即是認證成功,在PC端登陸自己的Github的賬號就OK了

接下來建立正式建立我們的博客倉庫,點擊Strat a Project即可

注意倉庫名稱一定是你的Github用戶名.github.io才是可以的
注意倉庫名稱一定是你的Github用戶名.github.io才是可以的
注意倉庫名稱一定是你的Github用戶名.github.io才是可以的


如果在創建倉庫的時候沒有勾選創建一個README文件的話,就創建完成之后在創建一個就好了,點擊README,之后點擊Commit new File就OK了!

此刻在瀏覽器輸入https://你的Github用戶名.github.io/,應該就會看到你的Github主頁,如果顯示404NotFound之類的請配置一下profile即可,或者有一定延遲或者瀏覽器緩存,請在網絡一切正常的情況下進行相關操作!

關聯Github遠程和本地倉庫

Git個人信息

還是在博客根目錄打開Git Bash Here

  • 設置Git的用戶名和email:
1
2
git config --global user.name "你的Github用戶名"
git config --global user.email "你注冊Github使用的郵箱"

  • 生成ssh密鑰

1
ssh-keygen -t rsa -C "你注冊Github使用的郵箱"


找到剛才生成的ssh密匙文件,復制其中的全部內容

按照圖片所示操作





出現上圖即配置完畢

配置Deploy

在博客根目錄下找到_config.yml文件中,找到deploy,修改為

1
2
3
4
deploy:
type: git
repo: repo: https://github.com/你的Github用戶名/你的Github用戶名.github.io.git
branch: master

 

 

 

開始部署

當上述操作都完成之后,輸入命令 hexo g 重新生成一下,然后使用命令hexo d 部署到Github遠程倉庫,這個時候一般會遇到一個問題:

這個時候我們需要執行一條命令

1
npm install --save hexo-deployer-git

 

 


出現上圖則說明安裝成功,接着我們就可以直接使用命令hexo d部署了,首次使用ssh密匙的時候,需要我們輸入一個yes確認一下

接着輸入一下我們之前設定的倉庫密碼就好了

接下來,看看我們部署的效果:https://你的Github用戶名.github.io 由於我們還未安裝自己的主題,所以看到的是hexo的默認主題,效果如下,如果暫時無法部署遠程倉庫的話就只能在本地使用hexo s開啟服務器,然后訪問http://localhost:4000/ 來查看效果!

 

安裝主題

下載主題

這個主題大家可以自由選擇,我個人比較推薦使用next主題,它的Github地址我已經子在前言中給出,選擇Clone or download下載zip包即可,解壓之后會獲得一個叫做hexo-theme-next-master的文件夾,我們直接將文件夾重命名為next即可,然后將next文件夾copy到我們的博客根目錄下

修改配置文件

博客根目錄下,有一個_config.yml文件,修改其中的屬性theme: next,注意”:”后面有一個空格,修改之后保存!

重新生成資源

使用命令 hexo g 生成靜態資源,主要是指html文件

重新部署

使用命令 hexo d 重新部署到遠程倉庫,當然如果只是測試效果的話暫時其實沒必要立馬就部署到倉庫,我們只需要 hexo s 開啟本地服務器,然后訪問http://localhost:4000/ 即可,然后就可以訪問到修改過主題之后的效果



到這里主題已經全部安裝完成,但是界面是不是太過於簡約了?接下來說說如何使用這些配置文件使博客變得更加美觀!

hexo命令總結

命令簡寫 原始寫法 用途解釋
hexo g hexo generate 生成靜態資源,理解為生成靜態網頁即可
hexo d hexo deploy 部署到遠程倉庫,每次部署需要輸入密碼
hexo s hexo server 開啟本地服務器,用於再無網絡或者網速較慢的情況下快速查看博客效果
hexo new page “頁面名” hexo n page “頁面名” 匹配新菜單項的內容
hexo new “文章名稱” hexo n “文章名稱” 新建一篇文章

 

 

 

本地倉庫配置文件與主題配置文件

本次倉庫配置文件

博客根目錄下,有一個_config.yml文件,打開之后我會做一個屬性說明
我的配置文件如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

#博客名稱
title: MyBlog
#副標題
subtitle: 一生只做浪漫極客
#簡介
description: 發現累積的力量
#博客作者
author: Tim
#博客語言
language: zh-Hans
#時區
timezone: Asia/Shanghai<感謝姚栓同學的提醒,之前把Shanghai寫成了Shanggai>

# URL
## 如果你的網站被放置在一個子目錄中,將URL設置為“HTTP://YouSIT.COM/CHED”,並將根設置為“/CHOR/\”。
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 10
order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# 日期時間格式
date_format: YYYY-MM-DD
time_format: HH:mm:ss


# 分頁,每頁文章數量
per_page: 10
pagination_dir: page


# 主題配置
theme: next

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

需要修改的地方:博客名稱、副標題、簡介、博客作者、博客語言、時區、主題配置、Deployment(之前已經修

改好了)

主題配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 要顯示的菜單:主頁、關於、標簽、分類、歸檔、日程、站內地圖、公益404
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
# Schemes(自己選擇一種排版風格,我比較喜歡Mist這種)
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

 

 

 

 

 

 

 

 

 

 

額外說明

當上述步驟都完成之后,每次修改之后配置文件或者源文件的時候都需要使用hexo g命令重新生成靜態資源,然后就可以在本地開啟服務器進行預覽

之后我們點擊分別點擊一下關於、標簽、分類、日程,除了首頁可以點擊之外,其他的都會出現這樣一個東西:Cannot GET /about/ 或者Cannot GET /categories/等等,這是由於我們沒有在本地建立相關的靜態文件導致的

還是在博客根目錄下Git Bahs Here打開命令行,缺什么就新建什么,比如要新建關於、標簽、分類、日程的頁面

1
2
3
hexo new page "about"
hexo new page "tags"
hexo new page "categories"

 

 

 


於是博客根目錄下的source文件夾下就出現了about、tags、categories等文件夾,里分別有對應index.md文件

  • img文件夾是存放博客中圖片的文件夾,這個稍后我會做出介紹
  • _ posts文件夾存放了我們寫的博客,我們寫的markdown文件就存放在此
  • 關於就是about里面的index.md文件了,這個版式比較隨意,可以自己隨便寫一些自我介紹
  • 標簽就是tags文件夾下的index.md文件,對於此文件我們需要做出如下修改

  • 分類就是categories里面的index.md文件,與tags相同,我們只需要把 type: “categories” 這一句加上即可

注意:對於此類菜單里的頁面來說,我們只需要做出一次修改即可,一旦把文章類型(即type屬性)申明為tags、categories…hexo就會幫我們自動填充內容,會根據你文章的變化一起變化,無需我們手動進行修改!

博文相關操作

新建文章

接下來還得說說新建文章,畢竟搭建好了博客,不就是要寫點東西嘛!

1
hexo new "文章名"

 

 

新建好了之后,我們發現在source文件夾里面幫我們創建好了markdown文件,我們需要做的就是直接開始編輯markdown就好了,比如我新建了一個MyTestBlog
怎樣對文章進行分類和添加標簽呢?只需要做如下編輯

寫的時候一定要注意格式,”:”后面都是有空格的

刪除文章

這個沒啥好說的,我們的所有文章都是放在source\_ posts\下面的,直接刪除相應的markdown文件即可

編輯文章

基本語法

基本的markdown語法在這里不在贅述,基本語法請參照https://www.jianshu.com/p/0130ad32a08d 或者自行百度,很多博客都講述了markdown的基本語法

插入圖片

這個功能由於經常用到,我把它單獨拿出來說一下,首先先在source文件夾下面新建一個文件夾用來存儲圖片,文件夾名稱為img,其他名稱也是可以的,然后將要插入的圖片放在該文件夾下,命名不要太復雜,也不要有中文名稱,比如將2018050899.png放進去,當我們需要插入圖片的時候,只要按照如下寫法就可以將圖片插入了,在這里注意圖片的書寫路徑,如果在本地預覽的話需要寫成這樣的寫法 (../img/2018050899.png) ,但是在服務器上的相對路徑卻不是這樣,而是不需要上一級目錄的標識,按照如下寫法即可<感謝來自李仁單的建議>:

1
![圖片無法正常顯示的時候的說明文字](/img/2018050899.png)

 

 

插入代碼

如果我們已知是什么語言的代碼(比如Java),就寫上Java ;如果不知道的話也可以不寫

1
2
3
4
5
public class Demo{
public static void main(String[]args){
System.out.println("Test Code");
}
}

 

主題配置優化

添加搜索功能

首先我們需要安裝一個hexo-generator-searchdb

1
npm install hexo-generator-searchdb --save

 

 

修改本地配置文件,博客根目錄下的_config.yml文件,如果沒有就添加search屬性並做如下配置:

search:
    path: search.xml
    field: post
    format: html
    limit: 10000 

修改主題配置文件
我的路徑:/博客根目錄/themes/next下的_config.yml文件:

local_search:
    enable: true 

注意:每個冒號后面都有空格。如果next主題在5.1.1以上的話就不用我這樣設置,直接在主題配置文件中找到canvas_nest: false,把它改為canvas_nest: true就行了

首頁顯示文章摘要

這樣可以在首頁更快的找到最近的文章,不至於篇幅太長

標簽圖標修改

默認的標簽無圖標,是一個”#”,這個是可以修改的:
修改模板 /themes/next/layout/_ macro/post.swig,搜索 rel=”tag”>#,將 # 換成

隱藏powered By Hexo / 強力驅動

打開themes/next/layout/_ partials/footer.swig,使用””隱藏之間的代碼即可,或者直接刪除。

動態背景

直接在主題配置文件中找到canvas_nest: false,把它改為canvas_nest: true就行了

注意分號后面要加一個空格
Github的服務器離我們比較遠,hexo d提交后可能沒有立即看到效果,等待幾分鍾就好了,推薦方法是直接在本地預覽,都修改好了再提交到Github服務器,有時候瀏覽器有緩存,需要多次刷新才可以看到效果!!!

結語

以上就是我的博客的搭建全過程,以后會增加留言或者評論的功能,現在只能這樣了,我的過程也不一定適用於每一個人,可能會有很多隱藏的問題,

 

 

文章來源:https://zouchanglin.github.io

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM