使用hexo在github pages上搭建博客詳細(xì)教程

本教程僅適用于window用戶


github

github是什么？

github可以托管項(xiàng)目，團(tuán)隊(duì)協(xié)作利器，同時(shí)網(wǎng)站上還有很多優(yōu)秀的開(kāi)源項(xiàng)目可以供我們學(xué)習(xí)，全球有相當(dāng)多的程序員都活躍在上面，包括一些業(yè)界有名的大神。因此它還被賦予了一個(gè)神圣的稱號(hào)全球最大的同♂性交友網(wǎng)站。學(xué)會(huì)使用github對(duì)我們好處多多~~

github pages

GitHub Pages用于介紹托管在GitHub的項(xiàng)目， 我們可以這個(gè)功能來(lái)做搭建一個(gè)博客。

github pages

準(zhǔn)備工作

參考資料（PS慕課網(wǎng)up主這么賣(mài)力難道不給點(diǎn)廣告費(fèi)嗎︿(￣︶￣)︿）

1.注冊(cè)github

打開(kāi)github官網(wǎng) https://github.com/ 注冊(cè)一個(gè)賬號(hào)

注冊(cè)github

2.創(chuàng)建名字用username.github.io的倉(cāng)庫(kù)，其中username是你注冊(cè)github的時(shí)候的用戶名
3.下載github客戶端 并登陸

4.安裝node.js

開(kāi)始搭建hexo博客

直接使用下載github window 客戶端時(shí)附帶的

客戶端

gitshell的客戶端，可以免去了我們配置SSH的麻煩，以后也不用每次使用時(shí)都輸入密碼，打開(kāi)Git shell客戶端
接下來(lái)我們開(kāi)始在這個(gè)藍(lán)色的對(duì)話框輸入我們的命令
Git shell

安裝hexo

在藍(lán)色對(duì)話框輸入命令

npm install -g hexo

創(chuàng)建hexo文件夾

在你想放置博客的文件夾的地方比如（D:\hexo 在D盤(pán)新建一個(gè)文件夾名字為hexo）
此時(shí)你應(yīng)該注意UP主在上面貼出的Git shell客戶端藍(lán)色框框光標(biāo)閃爍前面的路徑問(wèn)題，此路徑應(yīng)該是在C盤(pán)的某個(gè)文件夾\Documents\Github
但是我們是想在D:/hexo放置我們的博客文件，所以我們需要把路徑修改一下。輸入

cd D:hexo
Git shell

如圖所示，光標(biāo)閃爍的前面的路徑改變了?。〗酉聛?lái)我們很多操作都需要在D:\hexo這個(gè)路徑下進(jìn)行。請(qǐng)對(duì)路徑多多注意，重要的事情說(shuō)三遍??！
成功進(jìn)入該路徑之后，輸入

hexo init

成功初始化hexo這個(gè)文件夾，此時(shí)如果你打開(kāi)hexo這個(gè)文件夾你會(huì)發(fā)現(xiàn)多了很多東西

安裝依賴包

npm install

本地查看

現(xiàn)在我們已經(jīng)搭建起本地的hexo博客了，執(zhí)行以下命令(在D:\hexo)，然后到瀏覽器輸入localhost:4000看看。

hexo generate
hexo server

好了，至此，本地博客已經(jīng)搭建起來(lái)了，只是本地哦，別人看不到的。下面，我們要部署到Github。

部署

編輯_config.yml(在D:\hexo下)盡量不要用window自帶的文本編輯器打開(kāi)，因?yàn)槿級(jí)嚎s在一起了，你會(huì)很混亂。你在部署時(shí)，在這個(gè)文件的最下面修改如下代碼，其中username都換成你的github用戶名。

deploy: 
type:  git
repository:  git@github.com:Username/Username.github.io.git
branch: master

注意：每個(gè)冒號(hào)”：”后邊需要有一個(gè)”空格”
修改之后保存即可

由于
hexo現(xiàn)在支持更加簡(jiǎn)單的命令格式了，比如：

hexo g == hexo generate
hexo d == hexo deploy
hexo s == hexo server
hexo n == hexo new
所以UP主接下來(lái)都會(huì)使用簡(jiǎn)寫(xiě)的命令

回到我們的Git shell客戶端
執(zhí)行下列指令即可完成部署。

hexo g
hexo d

如果在執(zhí)行hexo d之后出現(xiàn)提示

ERROR Deployer not found: github

請(qǐng)先檢查一下__config.yml的配置文件有沒(méi)有出錯(cuò)，若糾正之后還是出現(xiàn)那個(gè)提示，請(qǐng)繼續(xù)往下看
這個(gè)問(wèn)題是由Hexo 2.0過(guò)渡到Hexo 3.0出現(xiàn)的問(wèn)題。
執(zhí)行命令：

npm install hexo-deployer-git --save

如此，便可以像往常一樣使用hexo d命令了。
最后，提幾個(gè)Hexo 3.0版本的幾個(gè)坑。
一個(gè)是無(wú)法生成feed.xml文件。
一個(gè)是無(wú)法生成sitemap.xml文件。
執(zhí)行：

npm install hexo-generator-feed --save
npm install hexo-generator-sitemap --save

隨后在__config.yml配置文件中追加信息：

# Extensions
Plugins:
- hexo-generator-sitemap
- hexo-generator-feed
#sitemap
sitemap:
  path: sitemap.xml
#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

更換主題(非必須）

1. 安裝主題

也許你會(huì)不喜歡你現(xiàn)在的那個(gè)默認(rèn)的主題，那么你可以到WIKI挑選一款你喜歡的
在D:\hexo這個(gè)路徑下執(zhí)行

git clone <repository> themes/<theme-name>

其中<repository>是你選用的主題的github地址 <theme-name>是主題的名字

舉個(gè)例子：UP主現(xiàn)在使用的主題yilia
UP主需要執(zhí)行的操作為

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

這個(gè)命令的意思是在D:\hexo\themes這個(gè)路徑上創(chuàng)建一個(gè)文件夾yilia（主題名字)并把從 github上克隆https://github.com/litten/hexo-theme-yilia.git 的這個(gè)項(xiàng)目?jī)?nèi)容放在該文件夾下

2. 配置主題

編輯hexo根目錄下的 _config.yml 這個(gè)文件把其中**theme: **的變更為theme: yilia注意冒號(hào)后面后空格

3. 應(yīng)用主題

cd themes/yilia
git pull

配置

主題配置文件在主目錄下的_config.yml：（此時(shí)是themes/主題名字/_config.yml)這個(gè)文件

# Header
menu:
  主頁(yè): /
  所有文章: /archives
  # 隨筆: /tags/隨筆

# SubNav
subnav:
  github: "https://github.com/litten"
  weibo: "http://weibo.com/litten225"
  rss: "http://feed.feedsky.com/litten"
  # facebook: "/"
  # google: "/"
  # twitter: "/"
  # linkedin: "/"

rss: /atom.xml

# Content
excerpt_link: more
fancybox: true

# Miscellaneous

favicon: /favicon.png

avatar: "https://avatars2.githubusercontent.com/u/2024949?v=2&s=150"
share: true
duoshuo: true

此時(shí)我們已經(jīng)把主題配置好了，看看效果
執(zhí)行

hexo g
  hexo s

在瀏覽器中輸入：localhost:4000 查看主題效果

把新主題部署到github pages上去

hexo g
hexo d

最后在瀏覽器中輸入： username.github.com username換成你自己的github用戶名，查看效果

每一次對(duì)博客進(jìn)行改動(dòng)之后都需要執(zhí)行

hexo g
hexo d

才能把改動(dòng)部署到網(wǎng)頁(yè)上去

Hexo--使用多說(shuō)評(píng)論插件(非必須）

多說(shuō)是一款追求極致體驗(yàn)的社會(huì)化評(píng)論框，可以用微博、QQ、人人、豆瓣等帳號(hào)登錄并評(píng)論。下面簡(jiǎn)單說(shuō)說(shuō)如何在Hexo的博客中使用多說(shuō)。

1.創(chuàng)建多說(shuō)帳號(hào)

打開(kāi)下面的頁(yè)面

http://duoshuo.com/create-site
多說(shuō)

填入個(gè)人信息，點(diǎn)擊創(chuàng)建。
其中 多說(shuō)域名 填入的信息就是short_name，在后面要用到。

2.復(fù)制通用代碼保存到博客模板
代碼

將通用代碼中的：
請(qǐng)將此處替換成文章在你的站點(diǎn)中的ID 替換為 <%= page.path %>
請(qǐng)?zhí)鎿Q成文章的標(biāo)題 替換為 <%= page.title %>
請(qǐng)?zhí)鎿Q成文章的網(wǎng)址 替換為 <%= page.permalink %>
效果如下：

<div class="ds-thread" data-thread-key="<%= page.path %>" data-title="<%= page.title %>" data-url="<%= page.permalink %>"></div>

將themes/你的主題目錄/layout/_partial/comment.ejs文件替換為：

<% if ( page.comments){ %>
<section id="comment">
<!-- 多說(shuō)評(píng)論框 start -->
    <div class="ds-thread" data-thread-key="<%= page.path %>" data-title="<%= page.title %>" data-url="<%= page.permalink %>"></div>
<!-- 多說(shuō)評(píng)論框 end -->
<!-- 多說(shuō)公共JS代碼 start (一個(gè)網(wǎng)頁(yè)只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"這里填入你的short_name"};
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
         || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>
<!-- 多說(shuō)公共JS代碼 end -->
</section>
<% } %>
3.在主題中加入多說(shuō)

在themes/你的主題目錄/_config.yml文件中加入：
duoshuo_shortname: 你的short_name
注意在 :冒號(hào)后面有個(gè)空格。

發(fā)表新文章

好了，站點(diǎn)配置好了，我想發(fā)表一篇文章，怎么做呢？

hexo new "my new post"

在D:\hexo\source_posts中打開(kāi)這個(gè)文件，配置開(kāi)頭。

title: my new post #可以改成中文的，如“新文章”
date: 2013-05-29 07:56:29 #發(fā)表日期，一般不改動(dòng)
categories: blog #文章文類(lèi)
tags: [博客，文章] #文章標(biāo)簽，多于一項(xiàng)時(shí)用這種格式
-這里是正文，用markdown寫(xiě).markdown的語(yǔ)法可以去網(wǎng)上搜

hexo s

訪問(wèn)localhost:4000預(yù)覽效果。（退出server用Ctrl+c）

hexo d

同步到github。訪問(wèn)網(wǎng)站看看效果。
到這里為止，我們的網(wǎng)站的基本模型就算是搭建好了

參考鏈接

1.http://zipperary.com/categories/hexo/
2.http://ogeeker.com/2015/03/14/Hexo-Deployer-not-found-github/
3.http://xring.org/2015/02/17/Hexo-%E4%BD%BF%E7%94%A8%E5%A4%9A%E8%AF%B4%E8%AF%84%E8%AE%BA%E6%8F%92%E4%BB%B6/

總結(jié)

--
這次搭建這個(gè)博客在網(wǎng)上搜了很多教程。因?yàn)橹巴耆涣私鈎exo就直接按照教程來(lái)做了。踩了很多坑。自己總結(jié)出來(lái)，對(duì)于一個(gè)完全不了解的東西，在動(dòng)手實(shí)踐之前還是要大概過(guò)一遍官方文檔，然后對(duì)這個(gè)事物的框架有個(gè)大概的認(rèn)知。能避免許多坑。很多教程很簡(jiǎn)單。但是每個(gè)人的運(yùn)行環(huán)境都不太一樣，有的同學(xué)按照教程過(guò)一遍很快就做好了。不是每個(gè)人都那么幸運(yùn)。所以不能太依賴教程，要多看文檔。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容