更好的版面閱讀，請(qǐng)?jiān)L問：我的博客

這已經(jīng)不是第一次倒騰 hexo + guihub 搭建 blog 了，最開始應(yīng)該是去年6月份，可是那會(huì)家里的網(wǎng)絡(luò)實(shí)在是太差了永淌，加上很多 js 啊 node 什么的都不懂崎场，按照別人的教程一步一個(gè)腳印好像也沒有搭載成功佩耳，后來就不想搞了，再后來谭跨，就是忘記了干厚。直到前段時(shí)間學(xué)習(xí)了javascript 和 node ,巧逢昨天在Android 博客周刊看到一哥們的博客正是 采用 hexo + github 的方式搭建的李滴，加上電腦的平臺(tái)已經(jīng)安裝了git 和 node 的環(huán)境，然后蛮瞄，然后所坯，就又有了搭建博客的強(qiáng)烈欲望了，然后的然后,打開了 git bash ,敲入了如下命令：

    mkdir blog
    cd blog
    npm install -g hexo
    hexo init xiaowen
    cd xiaowen
    hexo g
    hexo s

于是就有了這個(gè)...

下面呢一步一步來詳細(xì)說明

需要的工具

工欲善其事挂捅，必先利其器芹助，需要的一些工具和平臺(tái)，如果已經(jīng)有這些了闲先，可以跳過這部分状土。

git（必須）

為什么需要 git ？ 因?yàn)槲覀兒竺嫘枰獙⒈镜氐牟┛蜕蟼鞯絞ithub伺糠。還有一個(gè)就是：我的本地是 win10平臺(tái)蒙谓，本地的cmd不好用，需要安裝git來使用git提供的git bash的命令操作训桶，git bash可以執(zhí)行一些linux的命令累驮，而我最近用linux命令操作比較多，比較熟悉舵揭，所以需要這個(gè)(其實(shí)是工作天天用)谤专。當(dāng)然你如果是 ubuntu 或者 其他的工具平臺(tái)也行。能執(zhí)行命令即可午绳，看個(gè)人需要毒租。git下載地址: https://git-scm.com/downloads

node.js

這個(gè)不需要多說什么了，也是一個(gè)必備的工具箱叁，下載地址： https://nodejs.org/en/ 墅垮。

如果不會(huì)安裝的朋友可以參考下這個(gè)博客 ： http://www.cnblogs.com/zhouyu2017/p/6485265.html

hexo 的安裝

git 和 node 安裝完成后，就需要安裝主角了耕漱，那就是 hexo 算色。打開你的桌面，右鍵單擊會(huì)出現(xiàn) Git Base Here 和 Git Gui Here螟够，選擇第一個(gè) Git Base Here就可以了灾梦，就可以輸入命令行了。如下圖
這個(gè)窗口是可以設(shè)置和調(diào)整的妓笙，在窗口里面右鍵會(huì)出來設(shè)置的菜單若河，點(diǎn)擊option即可。如果實(shí)在不會(huì)設(shè)置的寞宫，可以聯(lián)系我萧福！下面可以執(zhí)行命令安裝了

    npm install -g hexo    --->執(zhí)行這個(gè)命令出錯(cuò)或者有其他的問題時(shí)，可能是被墻的原因辈赋，可以安裝淘寶的npm鏡像鲫忍，執(zhí)行如下命令安裝
    npm install -g cnpm --registry=https://registry.npm.taobao.org    --->參考：https://npm.taobao.org/ 膏燕，執(zhí)行完了這個(gè)命令后，就可以執(zhí)行下面的命令了
    cnpm install -g hexo 

注： 上面的命令如果執(zhí)行出錯(cuò)才需要執(zhí)行2和3的命令悟民，否則執(zhí)行1命令即可坝辫。

簡單的驗(yàn)證下

走完了上面的步驟，應(yīng)該是沒有多大問題了射亏，記得驗(yàn)證下 git 和 node 的安裝是否完好近忙，可以執(zhí)行下面的命令驗(yàn)證下版本

    git version   ---> 這個(gè)是驗(yàn)證git版本的
    node -v         ---> 這個(gè)是驗(yàn)證node版本的
    npm -v     ---> 這個(gè)是驗(yàn)證npm包管理器的
    hexo -v    ---> 這個(gè)是驗(yàn)證hexo 的

經(jīng)過上面的步驟，工具都已經(jīng)安裝完成了智润，下面可以開始創(chuàng)建本地博客啦银锻！

本地博客

經(jīng)過上面的工具操作，現(xiàn)在可以執(zhí)行命令來創(chuàng)建博客了做鹰，主要的命令大約有一下幾條

    hexo init <folder>   --->folder : 帶這個(gè)參數(shù)說明是在當(dāng)前創(chuàng)建一個(gè)這樣博客的文件夾
    hexo generate （hexo g  也可以） 
    hexo server  （hexo s 也可以）
    hexo clean  --->清理緩存
    hexo deploy  （hexo d 也可以）--->部署上去

在你的D盤或者其他什么盤的目錄底下击纬，單擊右鍵打開Git Base Here，輸入命令hexo init <folder>钾麸，folder表示創(chuàng)建的文件夾更振，比如hexo init <blog_project>，或者其他的什么都可以饭尝。靜靜的等待完成吧肯腕。
完成后，執(zhí)行hexo g 生成靜態(tài)網(wǎng)頁钥平。執(zhí)行hexo s運(yùn)行服務(wù)实撒，然后在瀏覽器輸入http://localhost:4000/你就可以看效果了。前提是執(zhí)行前面兩個(gè)命令沒有出錯(cuò)涉瘾≈看到的效果應(yīng)該是這樣的

看到這樣的效果你已經(jīng)成功了。

so...下面應(yīng)該干點(diǎn)啥了呢立叛？

我的第一反應(yīng)是：換個(gè)好看點(diǎn)的主題或者背景负敏，然后放上一兩篇文章看看效果，滿意后呢部署到github上去秘蛇，讓別人也可以訪問看看其做，哈哈

換主題

先不管其他的什么設(shè)置先，換個(gè)主題看看效果再說赁还，主題的網(wǎng)站妖泄。這么多的主題，總會(huì)有一款心儀的艘策。我使用的主題是next : http://theme-next.iissnan.com/

建議你還是先跟我一樣用這個(gè)主題吧蹈胡，把流程走完熟悉了后你可以再設(shè)置你所需要的主題或者其他的。
回到根目錄(是指你創(chuàng)建這個(gè)項(xiàng)目的目錄),先把主題clone下來，執(zhí)行如下命令：

    git clone https://github.com/iissnan/hexo-theme-next themes/next

clone 完成后审残，你會(huì)在目錄themes下看到一個(gè)文件夾next梭域，這時(shí)候說明已經(jīng)clone下來了斑举。然后就是這個(gè)啟用主題了搅轿。打開根目錄下的_config.yml文件(建議你用notepad ++ 打開或者 atom 編輯器 或者 Visual Studio Code 編輯器 或者 sublime text 編輯器)，找到如下的信息：

    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: landscape

把theme: landscape改為theme: next,保存富玷，然后執(zhí)行命令：

    hexo g
    hexo s

看到如下效果說明主題切換成功了

這個(gè)主題有四種樣式(這個(gè)文件在themes\next底下的_config.yml)璧坟，分別如下：

    # Schemes
    #scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    scheme: Gemini

你可以分別選擇看看那種是你想要的，保存后赎懦，還需要執(zhí)行命令:hexo g 和 hexo s刷新下頁面就可以看到樣式了雀鹃。
看到了新樣式，估計(jì)你也會(huì)是很迫切的想要設(shè)置頁面的各種東西了吧励两，那么現(xiàn)在你看看這個(gè)樣式的文檔吧黎茎，就不詳細(xì)介紹了：http://theme-next.iissnan.com/theme-settings.html。

新建文章

看了新樣式当悔，很期待應(yīng)該怎樣寫文章吧傅瞻？
在目錄source\_posts下有一個(gè)hello world.md的文件，這個(gè)就是你看到的博客第一篇文章盲憎。那么應(yīng)該要怎樣創(chuàng)建文章呢嗅骄？執(zhí)行如下命令：

    hexo new hexo博客     --->“hexo博客” 這個(gè)是你的文章名稱

編輯這個(gè)文件就是編輯你的文章了，對(duì)于不認(rèn)識(shí)md文件或者語法的饼疙，參考： http://www.appinn.com/markdown/
編輯完了后溺森，保存，依然要執(zhí)行命令：hexo g 和 hexo s窑眯，然后你就可以看到文章的內(nèi)容了屏积。
刪除文章的方式是直接刪除那個(gè).md文件，然后執(zhí)行hexo clean

添加主頁tags菜單

在剛剛的新建文章的命令中磅甩，其實(shí)是隱含了一個(gè)參數(shù) layout肾请，這個(gè)參數(shù)的默認(rèn)值是post,所以你看到新建的文章是在目錄_post里面的。
例子：添加一個(gè)標(biāo)簽的菜單按鈕

在樣式文件夾下的配置文件中設(shè)置

在文件themes\next\_config.yml中有如下信息：

    # When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
    # Usage: `Key: /link/ || icon`
    # Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.
    # Value before `||` delimeter is the target link.
    # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
    menu:
      home: / || home
      
      #tags: /tags/ || tags
      #categories: /categories/ || th
      archives: /archives/ || archive
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat
      #about: /about/ || user
    
    # Enable/Disable menu icons.
    menu_icons:
      enable: true

你有沒有發(fā)現(xiàn)更胖，點(diǎn)擊瀏覽器上面的歸檔铛铁，網(wǎng)址后面有一個(gè)archives，其實(shí)就是在這里設(shè)置的却妨。
現(xiàn)在要新加一個(gè)tags的菜單饵逐，那么就需要把上面的tags那行注釋去掉。

命令行添加

注釋了以后彪标，執(zhí)行命令：

    hexo new page tags   --->注意的是：這個(gè)命令是在根目錄底下執(zhí)行的

執(zhí)行完了以后倍权，進(jìn)入source文件夾，你會(huì)發(fā)現(xiàn)多了一個(gè)tags的文件夾，再進(jìn)入薄声，打開index.md当船，在文件里面隨便輸入點(diǎn)東西，保存默辨，執(zhí)行hexo g 和 hexo s德频，你就看到一個(gè)標(biāo)簽的菜單選項(xiàng)了，點(diǎn)擊后缩幸，頁面跳轉(zhuǎn)顯示的內(nèi)容就是你剛剛輸入的內(nèi)容壹置。
添加了菜單的item，怎樣才使文章有標(biāo)簽?zāi)兀?/p>

在文章里面添加標(biāo)簽

需要在文章里面添加標(biāo)簽表谊，在每篇文章的開頭都會(huì)有如下的信息：

    title:
    date: 
    tags: 

只要我們?cè)趖ags里面添加就行钞护，比如tags: [andoid html]

在首頁添加‘閱讀全文’

主要有三種方式：

在文章中使用 `` 手動(dòng)進(jìn)行截?cái)啵琀exo 提供的方式爆办。--->推薦方式
在文章的 front-matter 中添加 description难咕，并提供文章摘錄
自動(dòng)形成摘要

    auto_excerpt:
    enable: true
    length: 150

添加頭像信息

你有沒有發(fā)現(xiàn)，在網(wǎng)頁tab上面會(huì)有一個(gè)N的圖片距辆？怎么替換成自己想要的圖片呢余佃？
到public\images下面，將你的圖片替換favicon-16x16-next.png 和 favicon-32x32-next.png挑格，同時(shí)制作一個(gè)svg,不會(huì)做的同學(xué)參考：https://c.runoob.com/more/svgeditor/,命名為logo.svg咙冗，同時(shí)替換public\images下的logo.svg

部署到github

前提：有g(shù)ithub的帳號(hào)。如果沒有漂彤，先到github注冊(cè)一個(gè)：https://github.com/

建倉庫

create_new_repositiory.png

設(shè)置倉庫信息

新建倉庫后雾消，點(diǎn)擊右側(cè)的設(shè)置，往下拉挫望，找到GitHub Pages設(shè)置你的域名信息立润，一般有自己域名的就需要設(shè)置，不然是不需要的媳板，前提是創(chuàng)建的倉庫是：github用戶名.github.io舔株。如果不是的浆熔，重新再建倉庫吧庞溜。然后你就會(huì)看到如下這個(gè)：Your site is published at [http://github用戶名.github.io](github用戶名.github.io)孤页，點(diǎn)擊這個(gè)域名跳轉(zhuǎn)到了你的博客了。如果想設(shè)置個(gè)性域名的話奕纫，留意下篇介紹提陶。下面會(huì)教你怎樣將你本地的博客上傳到你的github，然后進(jìn)行展示匹层。

github_setting_1.png

github_setting_1.png

github_setting_2.png

配置遠(yuǎn)程倉庫信息

打開根目錄的文件vim _config.yml,按照下面的信息進(jìn)行配置

    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: https://github.com/xiaowen2013/xiaowen2013.github.io.git    ---> 遠(yuǎn)程倉庫地址
      branch: master    ---> 分支

部署到遠(yuǎn)程倉庫

到了這一步隙笆，也就是執(zhí)行命令的事情了

    npm install hexo-deployer-git --save      --->連接遠(yuǎn)程倉庫，如果是第一次，會(huì)彈出窗口輸入github 的帳號(hào)和郵箱
    或者 cnpm install hexo-deployer-git --save
    hexo deploy   --->這是部署的撑柔，執(zhí)行完這個(gè)就可以看效果了

驗(yàn)證

這個(gè)操作很簡單瘸爽，瀏覽器輸入http://yourname.github.io/,yourname -->你的賬戶名
最后，恭喜铅忿，搭建完成

每次部署的操作流程

    hexo clean
    hexo generate
    hexo deploy

本地操作預(yù)覽的流程

hexo g
hexo s

然后輸入：http://localhost:4000

文檔參考

說千道萬剪决，不如參考官方的設(shè)置，多看看文檔辆沦，如果說要想搭建的更好昼捍，還是需要多學(xué)點(diǎn)其他東西识虚。
hexo ： https://hexo.io/zh-cn/api/index.html
next 主題 : http://theme-next.iissnan.com/

最后：下一篇教你打造更好看的博客和建立屬于自己的專屬域名肢扯。