碼上快樂

相關內容    簡體    繁體

Github+hexo+next搭建教程

本文轉載自   查看原文   2018-11-15 13:31   657    git

今天參考的是大神的教程，學了一個新東西，但是可能由於原教程中運用的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刪除。



猜您在找 Hexo+NexT（零）：最全Hexo+Next搭建博客教程 Hexo+Next搭建Github個人靜態博客 GitHub+Hexo 搭建個人網站詳細教程 Hexo+Github博客搭建小白教程 gitio博客搭建，hexo + NeXT Hexo NexT 博客與Github page 關聯指南 基於github與hexo搭建個人博客 用 Hexo + Github 搭建自己的博客 使用hexo+github搭建免費個人博客詳細教程 使用hexo+github搭建免費個人博客詳細教程
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM