原文地址：
- 個人博客：https://vimior.github.io/article/193aafc44fcaf793/
- CSDN：https://blog.csdn.net/Vimor/article/details/90753844
前言
本文將使用Hexo+Github一步步搭建屬于自己的博客
不多說渤涌，先上圖
博客預(yù)覽圖
搭建步驟
-
注意
-
本文中所有命令或配置中以#開頭的表示注釋，僅僅用于說明
# 注釋，僅僅用于說明 echo "hello" # 注釋衙四，僅僅用于說明计露，#號開始的屬于注釋畅厢，不屬于命令
-
-
安裝Node.js
這里不對Node.js的安裝做講解，Node.js官網(wǎng)下載安裝即可（https://nodejs.org/zh-cn/）
安裝配置好Node.js后可以通過以下命令查看node和npm的版本
node -v # 說明：由于我電腦的node不是新裝的阻课，所以是v8.12.0版本 npm -v # 說明：我這里是6.4.1版本的npm -
安裝Git
這里不對Git的安裝做講解扳剿，可以參考https://git-scm.com/book/zh/v2/起步-安裝-Git
安裝好后旁趟，通過以下命令可以查看git的版本
git --version # 說明：我這里是git version 2.19.1.windows.1 -
創(chuàng)建Github倉庫
打開github并登錄（https://github.com/）
-
新建倉庫
-
選中Repositories欄，然后點擊右側(cè)的New按鈕創(chuàng)建
image -
設(shè)置倉庫名字
- 倉庫名必須嚴(yán)格遵守格式：用戶名.github.io庇绽，不要隨意起名锡搜，后續(xù)會有麻煩橙困，這里vimior是我的用戶名）
- 記得選中Public和勾選Initialize this repository with a README
image
-
-
查看Github Pages
選中剛剛創(chuàng)建的倉庫的Settings欄，找到Github Pages的設(shè)置項
此時Github Pages會顯示如下耕餐，表明當(dāng)前倉庫可以作為Github Pages
image
-
安裝Hexo環(huán)境
-
安裝Hexo
npm install hexo -g # 說明：這里-g參數(shù)是為了把hexo安裝到全局 hexo -v # 說明：查看hexo是否安裝成功凡傅，獲取其版本信息 新建一個工程目錄（這里是vimior_blog），然后進(jìn)入這個目錄
-
初始化Hexo
hexo init # 說明：此命令會在當(dāng)前文件夾下生成一個hexo工程image -
生成靜態(tài)頁面
hexo generate # 可以簡寫成 hexo g -
啟動本地服務(wù)器蛾方，啟動后可以通過http://localhost:4000來訪問
hexo server # 可以簡寫成 hexo s -
新建博文
通過hexo new <文章名>來新建或者直接在工程目錄下的source/_post目錄下創(chuàng)建一個md文件即可像捶，然后重新生成靜態(tài)頁面并啟動服務(wù)器即可
hexo new "文章名" # 此命令會在工程目錄下的source/_post目錄下生成一個<文章名>.md的文件 hexo g && hexo s # 此命令重新生成靜態(tài)文件并啟動服務(wù)器，此時即可通過瀏覽器訪問到我們剛創(chuàng)建的博文了桩砰，修改該md文件即可修改博文內(nèi)容博文格式如下
--- title: 博文的標(biāo)題 --- 博文內(nèi)容 # 注意：如果需要給博文指定類別拓春，可以在頭部使用categories: "xxx類別名"，參考如下 --- title: 博文的標(biāo)題 categories: "測試類別" ---
-
-
配置Hexo
注意：這里我們先統(tǒng)一把需要的包安裝好亚隅，具體配置會在配置里面用注釋說明
-
安裝hexo-theme-next主題（配置使用在后面統(tǒng)一說明）
# 說明：以下命令會從https://github.com/theme-next/hexo-theme-next下載內(nèi)容到當(dāng)前目錄下的themes/next里面 git clone https://github.com/theme-next/hexo-theme-next themes/next -
安裝hexo-helper-live2d（用于生成Live2D看板娘）
npm install hexo-helper-live2d --save # 下面的命令是安裝live2d的模型硼莽，這里選擇live2d-widget-model-haruto # 參考https://github.com/xiazeyu/live2d-widget-models選擇自己需要的 # 如果選擇別的模型，在配置_config.yml文件里的live2d->model->use的值也要對應(yīng)修改 npm install live2d-widget-model-haruto --save -
安裝hexo-symbols-count-time（用于字?jǐn)?shù)統(tǒng)計和計算閱讀時間）
npm install hexo-symbols-count-time --save -
安裝hexo-generator-sitemap（用于生成站點地圖）
npm install hexo-generator-sitemap --save -
安裝hexo-generator-feed（用于生成RSS訂閱）
npm install hexo-generator-feed --save -
安裝hexo-generator-searchdb（用于生成搜索數(shù)據(jù)庫）
npm install hexo-generator-searchdb --save -
安裝hexo-deployer-git（用于推送到Github）
npm install hexo-deployer-git --save -
新建categories頁（分類頁面）
hexo new page categories # 會在source目錄下生成categories目錄 # 修改source/categories/index.md文件如下 --- title: categories date: 2019-06-01 23:34:54 type: "categories" comments: false --- -
新建tags頁（標(biāo)簽頁面）
hexo new page tags # 會在source目錄下生成tags目錄 # 修改source/categories/index.md文件如下 --- title: 標(biāo)簽 date: 2019-06-01 14:21:23 type: "tags" comments: false --- -
新建about頁
hexo new page about # 會在source目錄下生成about目錄 # 修改source/categories/index.md文件如下 --- title: 我 date: 2019-06-01 23:35:51 comments: false --- <h3 style="text-align: center;font-size: 18px;">就算有一天我一無所有煮纵，也不缺從頭再來的勇氣懂鸵！</h3> -
修改工程的配置修改_config.yml文件）
詳細(xì)配置參考https://hexo.io/zh-cn/docs/configuration
# 以下是在原有配置項修改的，大家僅需修改對應(yīng)的項 # 博客站點標(biāo)題 title: 落 # 博客站點子標(biāo)題 subtitle: 你若安好行疏，便是晴天匆光！ # 描述 description: 代碼千萬行，注釋第一行酿联。</br>編程不規(guī)范终息，同事兩行淚。 # 作者 author: Vimor # 語言 language: zh-CN # 時區(qū) timezone: Asia/Shanghai # URL贞让，這里的url值大家修改成自己的Github Page地址 url: https://vimior.github.io # 主題配置周崭，這里把默認(rèn)的landscape注釋掉，使用我們安裝的next主題 # theme: landscape theme: next # 使用hexo-theme-next主題 # 關(guān)聯(lián)Github Pages喳张，此處的repo值請修改為自己的Github Pages倉庫路徑 # 這里是執(zhí)行hexo deploy命令時才需要用到的配置续镇，不影響本地調(diào)試運行的使用 deploy: type: git repo: git@github.com:vimior/vimior.github.io.git branch: master ############上面的配置是在原有配置基礎(chǔ)上修改的############## ##################完美的分割線：######################### ################下面的配置是新增的######################## # Live2D：看板娘的配置 # 詳細(xì)配置參考：https://github.com/EYHN/hexo-helper-live2d # live2d->model->use這項要根據(jù)自己之前安裝Live2D支持的時候安裝那個model來配置 live2d: enable: true scriptFrom: local # 默認(rèn) pluginRootPath: live2dw/ # 插件在站點上的根目錄(相對路徑) pluginJsPath: lib/ # 腳本文件相對與插件根目錄路徑 pluginModelPath: assets/ # 模型文件相對與插件根目錄路徑 # scriptFrom: jsdelivr # jsdelivr CDN # scriptFrom: unpkg # unpkg CDN # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定義 url tagMode: false # 標(biāo)簽?zāi)Ｊ? 是否僅替換 live2d tag標(biāo)簽而非插入到所有頁面中 debug: false # 調(diào)試, 是否在控制臺輸出日志 log: false model: use: live2d-widget-model-haruto # npm-module package name # use: hijiki # 博客根目錄/live2d_models/ 下的目錄名 # use: ./wives/hijiki # 相對于博客根目錄的路徑 # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json # 你的自定義 url scale: 1 hHeadPos: 0.5 vHeadPos: 0.618 display: superSample: 2 width: 125 height: 125 position: left hOffset: 30 vOffset: 20 mobile: show: true scale: 0.05 react: opacityDefault: 1 opacityOnHover: 0.2 # symbols_count_time配置：用于計算字?jǐn)?shù)，閱讀時間 symbols_count_time: symbols: true time: true total_symbols: true total_time: true exclude_codeblock: false # 版權(quán)協(xié)議的配置 creative_commons: by-nc-sa # 訂閱的配置 feed: type: atom path: atom.xml limit: 20 hub: content: content_limit: 140 content_limit_delim: ' ' # 搜索的配置 search: path: search.xml field: post format: html limit: 10000 -
修改__hexo-theme-next主題的配置（修改_themes/next/config.yml文件）
詳細(xì)配置參考http://theme-next.iissnan.com/theme-settings.html
# RSS配置 rss: /atom.xml # 頁腳配置 footer: since: 2019 icon: name: heart animated: true color: "#D0104C" # 菜單欄配置1：把不需要的菜單的菜單注釋掉就好 # 這里的要顯示的菜單包括（首頁销部、關(guān)于摸航、標(biāo)簽、分類舅桩、歸檔忙厌、站點地圖、搜索） 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 menu_settings: icons: true badges: true # 主題風(fēng)格：這里選用Gemini # scheme: Muse #scheme: Mist #scheme: Pisces scheme: Gemini # 社交配置：這里把需要顯示的配置好江咳，不需要的注釋就好 # 這里僅僅顯示Github和E-Mail，記得把地址修改為自己的 social: GitHub: https://github.com/vimior || github E-Mail: mailto:vinman.cub@gmail.com || envelope #Weibo: https://weibo.com/yourname || weibo #Google: https://plus.google.com/yourname || google #Twitter: https://twitter.com/yourname || twitter #FB Page: https://www.facebook.com/yourname || facebook #VK Group: https://vk.com/yourname || vk #StackOverflow: https://stackoverflow.com/yourname || stack-overflow #YouTube: https://youtube.com/yourname || youtube #Instagram: https://instagram.com/yourname || instagram #Skype: skype:yourname?call|chat || skype social_icons: enable: true # 是否顯示圖標(biāo) icons_only: true # 是否只顯示圖標(biāo) transition: false # 用戶頭像配置 avatar: # In theme directory (source/images): /images/avatar.gif # In site directory (source/uploads): /uploads/avatar.gif # You can also use other linking images. url: /images/avatar.png # 注意：需要把a(bǔ)vatar.png放在themes/next/source/images里面 # If true, the avatar would be dispalyed in circle. rounded: true # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar. opacity: 1 # If true, the avatar would be rotated with the cursor. rotated: false # 回到頂部的配置 back2top: enable: true sidebar: true scrollpercent: true # 博文的元數(shù)據(jù)配置哥放，即博文標(biāo)題下面顯示的內(nèi)容（如發(fā)表時間歼指、所屬分類等等） post_meta： item_text: true created_at: true updated_at: enable: true another_day: false categories: true # 字?jǐn)?shù)統(tǒng)計配置 symbols_count_time: separated_meta: true item_text_post: true item_text_total: false awl: 2 wpm: 300 # brand的背景顏色配置 android_chrome_color: "#fff" # 代碼高亮的主題配置 highlight_theme: night eighties # 卜算子配置：統(tǒng)計閱讀次數(shù)等 busuanzi_count: enable: true total_visitors: true total_visitors_icon: user total_views: true total_views_icon: eye post_views: true post_views_icon: eye # 本地搜索配置 local_search: enable: true # If auto, trigger search by changing input. # If manual, trigger search by pressing enter key or search button. trigger: auto # Show top n results per article, show all results by setting to -1 top_n_per_article: 1 # Unescape html strings to the readable one. unescape: false # 更多配置請參閱http://theme-next.iissnan.com/theme-settings.html # 如評論的配置可以通過配置valine（使用leancloud）
-
-
推送到Github Pages
注意：
推送前先本地運行爹土，通過瀏覽器訪問沒問題再行推送
-
初次使用git需要設(shè)置user name和email
git config --global user.name "your name" git config --global user.email "your email" -
（如果未曾添加過ssh-agent）需要添加ssh-key到github的ssh-agent
# 1. 生成ssh密鑰 ssh-keygen -t rsa -C "your email" # 生成路徑在%USERPROFILE%/.ssh目錄 # 2. 把%USERPROFILE%/.ssh/id_rsa的內(nèi)容拷貝 # 3. 粘貼到githubadd_ssh_key_1.pngadd_ssh_key_2.pngadd_ssh_key_3.png
-
生成靜態(tài)文件
hexo generate # 可以簡寫為 hexo d -
推送到github pages
hexo deploy # 可以簡寫為 hexo d # hexo deploy -g # 可以簡寫hexo d -g，等效于hexo g && hexo d
總結(jié)
? ? ? 此時踩身，我們已經(jīng)搭建好一個屬于自己的博客了胀茵，如果需要部署到其他倉庫，只需要修改deploy配置即可挟阻，詳情請查閱https://hexo.io/zh-cn/docs/deployment
? ? ? Hexo的功能很強(qiáng)大琼娘，用?Hexo+Github搭建一個屬于自己的博客，不需要我們寫代碼附鸽，只需要通過修改配置即可搭建一個屬于自己的酷炫博客脱拼。另外，我們平時可以通過在source/_post目錄下用Markdown來寫自己的筆記坷备、博文熄浓，然后重新推送即可在自己的線上博客上看到。
? ? ? 這是我博客里的第一篇博文省撑，由于本人學(xué)識有限赌蔑，難免有錯漏，敬請諒解竟秫，歡迎指出娃惯！
