這篇文章主要講解了“Hexo博客搭建方法是什么”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“Hexo博客搭建方法是什么”吧!
創(chuàng)新互聯(lián)建站主要從事網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)江永,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢(xún)建站服務(wù):18982081108
本文默認(rèn)已經(jīng)安裝好
git
和node.js
環(huán)境版本說(shuō)明:
git version 2.16.2.windows.1
、node.js v8.9.4
Hexo 是一個(gè)快速、簡(jiǎn)潔且高效的博客框架,這里不多介紹,丟個(gè)鏈接,感興趣的自己去看吧:Hexo中文官網(wǎng),里面的東西比較多,不光有hexo使用文檔,還有眾多的hexo插件和主題。
歡迎來(lái)訪~逸竹小站
$ npm install -g hexo-cli
$ hexo init blog $ cd blog $ npm install
blog
為博客存儲(chǔ)文件夾名稱(chēng),可隨意命名,本文以blog
為例。最好命名與GitHub Pages倉(cāng)庫(kù)名稱(chēng)一致,省的后面修改,不過(guò)都是小case
此時(shí)打開(kāi)
localhost:4000
即可看到默認(rèn)主題的Hexo博客
在官網(wǎng)-主題里面有200+的主題可供選擇,我推薦幾款個(gè)人比較喜歡的
簡(jiǎn)約款
hexo-theme-next
maupassant-hexo
hexo-theme-melody
炫酷款
black-blue
hexo-theme-nebula
實(shí)用款
hexo-theme-pure
選擇好主題后,進(jìn)入對(duì)應(yīng)的github項(xiàng)目主頁(yè),一般都會(huì)有README文件幫助完成后續(xù)搭建,若無(wú)可以參考下面步驟進(jìn)行,進(jìn)入之前搭建好的博客主題文件目錄下(本文為:blog/themes/),檢出主題文件
$ git clone https://github.com/xxxx
然后修改博客配置文件_config.yml
,添加下面這行
theme: xxx
注意:①
xxx
為主題名稱(chēng)②不是主題的配置文件哦,在博客文件夾根目錄下
搭建整個(gè)博客過(guò)程中有兩個(gè)配置文件,非常重要,一個(gè)是博客配置文件,一個(gè)是主題配置文件分別存放在各自的根目錄下,文件名均為_config.yml
博客配置文件
# Hexo 配置 # Site title: Hexo # Hexo博客網(wǎng)站標(biāo)題 subtitle: # Hexo博客網(wǎng)站子標(biāo)題 description: # Hexo博客網(wǎng)站描述 keywords: # Hexo博客關(guān)鍵詞 author: John Doe # 作者 language: # 語(yǔ)言 timezone: # 時(shí)區(qū) # URL url: http://yoursite.com # 網(wǎng)站網(wǎng)址 root: / # 網(wǎng)站根目錄 permalink: :year/:month/:day/:title/ # 文章永久鏈接格式 permalink_defaults: # 永久鏈接每部分默認(rèn)值,一般不設(shè)置 # Directory source_dir: source # 資源文件存儲(chǔ)目錄 public_dir: public # 公共文件夾,靜態(tài)網(wǎng)站生成目錄 tag_dir: tags # 標(biāo)簽?zāi)夸? archive_dir: archives # 文章目錄 category_dir: categories # 分類(lèi)目錄 code_dir: downloads/code # 代碼目錄 i18n_dir: :lang # i18n國(guó)際化 skip_render: # Writing new_post_name: :title.md # 新博客文件名格式 default_layout: post # 默認(rèn)布局 titlecase: false # 是否標(biāo)題小寫(xiě) external_link: true # 是否在新的標(biāo)簽頁(yè)打開(kāi)鏈接 filename_case: 0 # 轉(zhuǎn)換文件名1:小寫(xiě),2:大寫(xiě) render_drafts: false # 顯示草稿 post_asset_folder: false # relative_link: false # 是否是用相對(duì)路徑作為連接 future: true # 是否展示未來(lái)的文章 highlight: # 代碼高亮設(shè)置 enable: true line_number: true auto_detect: false tab_replace: # Home page setting index_generator: # 主頁(yè)設(shè)置 path: '' # 博客根目錄 per_page: 10 # 分頁(yè)大小 order_by: -date # 排序,默認(rèn)日期 # Category & Tag default_category: uncategorized # 默認(rèn)分類(lèi) category_map: # 分類(lèi)集合 tag_map: # 標(biāo)簽集合 # Date / Time format date_format: YYYY-MM-DD # 日期格式 time_format: HH:mm:ss # 時(shí)間格式 # Pagination per_page: 10 # 分頁(yè)大小 pagination_dir: page # 分頁(yè)目錄 # Extensions theme: landscape # 主題 # Deployment deploy: # 部署 type: # 類(lèi)別:git
主題配置文件,這個(gè)是black-blue主題的配置文件,已經(jīng)比較詳細(xì)了,直接貼上來(lái)了
# >>> Basic Setup | 基礎(chǔ)設(shè)置 <<< # Header | 主菜單 ## About Page: `hexo new page about` ## Tags Cloud Page: `hexo new page tags` menu: # 主頁(yè): /archives/ 所有文章: /archives/ 玩轉(zhuǎn)開(kāi)發(fā)工具: /categories/開(kāi)發(fā)工具/ 玩轉(zhuǎn)數(shù)碼: /categories/digital 算法學(xué)習(xí): /categories/algorithm 關(guān)于我: /about/ # 靜心閱讀: /tags # Link to your avatar | 填寫(xiě)頭像地址 avatar: /img/avatar.png # Small icon of Your site | 站點(diǎn)小圖標(biāo)地址 favicon: /img/favicon.png # 域名是否啟用https,如果啟用,js文件必須https加載 isHttps: true # Social info. Bar | 社交信息展示 ## Keep "mailto:" in Email | 設(shè)置 Email 時(shí)保留 "mailto:" ## Encrypt email 加密郵件地址 http://ctrlq.org/encode/ ## RSS requires a plugin to take effect | 使用 RSS 需先安裝對(duì)應(yīng)插件 ## https://github.com/hexojs/hexo-generator-feed subnav: github: xxxxx weibo: xxxxxxxx rss: /atom.xml # Google: "#" # search_box: true # >>> Conments 評(píng)論系統(tǒng) <<< disqus: on: false shortname: xxxxxxxxx # https://help.disqus.com/customer/en/portal/articles/466208-what-s-a-shortname- # It is unnecessary to enable disqus here if # you have set "disqus_shortname" in your site's "_config.yml" changyan: on: true appid: xxxx conf: xxxxxxxxx # 是否開(kāi)啟暢言評(píng)論, # id 中填寫(xiě)你的友言用戶(hù)數(shù)字ID,注冊(cè)后進(jìn)入后臺(tái)管理即可查看 # 暢言評(píng)論在 Web 環(huán)境下運(yùn)行,普通本地環(huán)境無(wú)法查看,請(qǐng)部署后在線上測(cè)試。 gitment: on: true githubID: yourid repo: yourrepo client_id: yourid client_secret: yoursecret lazy: true # >>> Style Customisation 樣式自定義 <<< # Background | 背景 ## "background_sum": show images form /source/background/的圖片數(shù)目 ## "on: true": 自動(dòng)隨機(jī)顯示這5張圖片 ## "on: false": 自定義顯示圖片設(shè)置background_image: 5 background: on: true background_sum: 1 background_image: 1 highlight_style: on: true inline_code: 3 # Value: 0 - 9 可選 code_block: 2 # Value: 0 - 4 # Set inline_code to style highlight text # Chose a highlight theme for code block # 通過(guò) inline_code 切換內(nèi)置文本高亮樣式 # 通過(guò) code_block 切換內(nèi)置代碼高亮配色主題 blockquote_style: #on: true blockquote: 5 # Value: 0 - 7 可選 # 自定義文章「引用部分」的樣式 # 左邊欄寬度 px left_col_width: 300 # 目錄中標(biāo)題不換行 # Keep TOC title on the same line | toc_nowrap: false # 自定義"閱讀全文"鏈接按鈕的顯示文字 # Customize the text on excerpt link excerpt_link: 查看更多 #修改more>>的文字 # 是否顯示邊欄中的搜索框(站內(nèi)搜索) # Search Box in left column search_box: true # 是否開(kāi)啟主頁(yè)及加載頭像時(shí)的動(dòng)畫(huà)效果 # Animation in Homepage and Loading avatar animate: true # >>> Small features | 小功能設(shè)置 <<< # 是否開(kāi)啟邊欄多標(biāo)簽切換 # Birdhouse button in left column tagcloud: true # Blogroll, Link exchange | 友情鏈接 # friends: false friends: csdn: http://blog.csdn.net/baidu_21483933 segmentfault: https://segmentfault.com/blog/maocg_web 簡(jiǎn)書(shū): http://www.jianshu.com/users/eb37ef89c746/latest_articles #是否開(kāi)啟“關(guān)于我”。 aboutme: 愛(ài)動(dòng)漫,愛(ài)游戲,愛(ài)編程,愛(ài)運(yùn)動(dòng),愛(ài)的太多了! #aboutme: false # 是否在新窗口打開(kāi)鏈接 open_in_new: false # Customize feed link 自定義訂閱地址 rss: /atom.xml # >>> Vendors | 第三方工具 & 服務(wù) <<< # images viewer | 圖片瀏覽器 ## http://www.fancyapps.com/fancybox/ fancybox: true # Display Math(LaTeX, MathML...) | 數(shù)學(xué)公式支持 ## https://www.mathjax.org/ mathjax: false # Socail Share | 是否開(kāi)啟分享 # share: true baidushare: true #showshare: true # 百度、谷歌站長(zhǎng)驗(yàn)證。填寫(xiě) HTML 標(biāo)簽 content # Site Verification for Google and Baidu. HTML label content. # google_site: # pFW527fHrjfI0si2w4NQ0w3cTw12AvvuohAu1PUfqKA # baidu_site: #c167b9feb4f0b208b712c79629c188e4 # Fill in Google Analytics tracking ID, #e.g. UA-XXXXX-X, or Baidu Analytics hash key google_analytics: xxxxx baidu_analytics: xxxxxx # 不蒜子網(wǎng)站計(jì)數(shù)設(shè)置 # http://ibruce.info/2015/04/04/busuanzi/ visit_counter: on: true site_visit: 極客到訪數(shù) page_visit: 本頁(yè)閱讀量 # A標(biāo)簽提示 TipTitle: true # Loading # Loading: true
$ hexo new [layout]
您可以在命令中指定文章的布局(layout),默認(rèn)為 `post`,可以通過(guò)修改 `_config.yml` 中的 `default_layout` 參數(shù)來(lái)指定默認(rèn)布局。
$ hexo new photo "My Gallery"
在執(zhí)行這行指令時(shí),Hexo 會(huì)嘗試在 scaffolds 文件夾中尋找 photo.md,并根據(jù)其內(nèi)容建立文章,所以可以新建幾個(gè)博客模板文件放置在 scaffolds 文件夾下。
我用的博客模板為:
--- title: {{ title }} categories: 分類(lèi) tags: - 標(biāo)簽 date: {{ date }} description: 描述 --- ** {{ title }}:**
$ hexo new [layout]
$ hexo s[erver] INFO Start processing INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
啟動(dòng)之后http://localhost:4000 即可看到效果
$ hexo s[erver] --debug
進(jìn)入調(diào)試模式,可以看到詳細(xì)的啟動(dòng)日志,包含hexo版本、工作目錄、插件、博客目錄、靜態(tài)文件等信息,同時(shí)訪問(wèn)調(diào)試博客時(shí)還可以看到各資源響應(yīng)狀態(tài)和時(shí)間等信息。這種模式下調(diào)試博客樣式及特效非常方便。
$ git add . $ git commit -m "提交備注"
即可提交到本地倉(cāng)庫(kù),不熟悉git命令的可以查看我的另一篇博文Git命令匯總
這里倉(cāng)庫(kù)名稱(chēng)有兩種命名方式:
①github賬戶(hù)的
用戶(hù)名
+github.io
,這種倉(cāng)庫(kù)訪問(wèn)地址為:https://用戶(hù)名.github.io/
②隨意命名只要與你其他倉(cāng)庫(kù)名稱(chēng)不沖突即可,例如
hexo-blog
,則訪問(wèn)地址為:https://github.com/
+用戶(hù)名
+/hexo-blog/
大多數(shù)都會(huì)選擇第一種格式創(chuàng)建倉(cāng)庫(kù)
①GitHub Page倉(cāng)庫(kù)資源文件必須存放master分之
②下面可以配置自己的域名,配置之后會(huì)在倉(cāng)庫(kù)根目錄生成
CNAME
文件,同時(shí)要將域名解析到倉(cāng)庫(kù)訪問(wèn)地址
將本地博客文件夾名稱(chēng)改為與倉(cāng)庫(kù)名稱(chēng)一致,然后將二者關(guān)聯(lián)
$ git remote git@github.com:用戶(hù)名/倉(cāng)庫(kù)名.git
$ hexo c[lean] $ hexo g[enerate] $ hexo d[eploy]
hexo命令支持簡(jiǎn)寫(xiě),條件是只有一個(gè)匹配項(xiàng),egs:當(dāng)安裝了
hexo-douban
之后執(zhí)行hexo d
就需要區(qū)分hexo deploy
和hexo douban
這兩個(gè)命令了,可以分別使用hexo de
和hexo do
來(lái)調(diào)用
部署完成之后即可在上面設(shè)置的訪問(wèn)地址中看到效果了。
與主題一樣,官方-插件也收錄了200余種插件,這里推薦幾款個(gè)人喜歡的
hexo-cli:Hexo命令行基礎(chǔ)插件
hexo-server:基礎(chǔ)插件
hexo-deployer-git:git支持基礎(chǔ)插件
hexo-douban:分享豆瓣讀書(shū)、電影、游戲的豆瓣秀插件
hexo-admin:插件版博客后臺(tái)管理系統(tǒng)
hexo-admin-ehc:hexo-admin增強(qiáng)版
hexo-auto-category:根據(jù)文件夾自動(dòng)生成分類(lèi)
hexo-auto-excerpt:自動(dòng)摘錄標(biāo)簽
hexo-generator-search:提供搜索支持
hexo-generator-sitemap:生成sitemap
這款插件貌似對(duì)于我正在用的主題插件(black-blue)支持的不是很好,要修改很多東西,我直接棄用了,但是這款插件的還是不錯(cuò)的,所以推薦下。
$ npm install hexo-douban --save
douban: user: myDoubanID builtin: false book: title: 'This is my book title' quote: 'This is my book quote' movie: title: 'This is my movie title' quote: 'This is my movie quote' game: title: 'This is my game title' quote: 'This is my game quote' timeout: 10000
user: 你的豆瓣ID.打開(kāi)豆瓣,登入賬戶(hù),然后在右上角點(diǎn)擊 "個(gè)人主頁(yè)" ,這時(shí)候地址欄的URL大概是這樣:"https://www.douban.com/people/xxxxxx/" ,其中的"xxxxxx"就是你的個(gè)人ID了。
builtin: 是否將生成頁(yè)面的功能嵌入hexo s
和hexo g
中,默認(rèn)是false
,另一可選項(xiàng)為true
(1.x.x版本新增配置項(xiàng))。
title: 該頁(yè)面的標(biāo)題.
quote: 寫(xiě)在頁(yè)面開(kāi)頭的一段話,支持html語(yǔ)法.
timeout: 爬取數(shù)據(jù)的超時(shí)時(shí)間,默認(rèn)是 10000ms ,如果在使用時(shí)發(fā)現(xiàn)報(bào)了超時(shí)的錯(cuò)(ETIMEOUT)可以把這個(gè)數(shù)據(jù)設(shè)置的大一點(diǎn)。
$ hexo douban 或 $ hexo douban -h Usage: hexo douban Description: Generate pages from douban Options: -b, --books Generate douban books only -g, --games Generate douban games only -m, --movies Generate douban movies only
如果上面的顯示沒(méi)有問(wèn)題就可以在主題的配置文件 _config.yml
里添加如下配置來(lái)為這些頁(yè)面添加菜單鏈接.
menu: Home: / Archives: /archives Books: /books #This is your books page Movies: /movies #This is your movies page Games: /games #This is your games page
感謝各位的閱讀,以上就是“Hexo博客搭建方法是什么”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)Hexo博客搭建方法是什么這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!