基於github pages與hexo搭建一個獨立博客

時間 2019-11-10

標籤基於 github pages hexo 搭建一個獨立博客欄目 Git 简体版

原文原文鏈接

原文地址：http://lawlietfans.github.io/blog/2015/11/09/using-hexo-with-jekyll/html

介紹基於github pages搭建獨立博客的博文已經有不少了，而本文旨在幫助讀者瞭解基於github pages與hexo搭建一個獨立博客的總體過程，順便備忘。java

在開始動手操做以前，咱們應該瞭解node

1 什麼是github page？爲何要用hexo？

github Pages能夠被認爲是用戶編寫的、託管在github上的靜態網頁,GitHub Pages分兩種，一種是你的GitHub用戶名創建的username.github.io這樣的用戶&組織頁（站），另外一種是依附項目的pages。即organization site和project site.
不過官方目前不建議用二級域名，咱們這裏的例子也是屬於organization site.git

至於hexo，快速、簡潔且高效的博客框架，文檔完善，主題豐富github

2 配置organization site

新增倉庫：https://github.com/newnpm

Repository name：github帳號.github.io
  Description：隨便輸入點描述
  public
  Initialize this repository with a README
  .gitignore 選擇初始的文件忽略，我選的java
  Licenses：我選的NPL（GNU General Public License v2.0）
  配置

選擇右側操做區的settingshexo

選擇Launch automatic page generator
  輸入一些基本說明，非必要
  選擇Load README.md
  繼續Continue to layouts
  選擇模板（隨便選個）
  發佈Publish page
  此時進入settings應該會有Your site is published at http://username.github.io的條提示，訪問一下，神奇吧！
  若是404，請檢查你的倉庫名或帳號名，刪除倉庫重來，刪除也是在settings最底部

參考-詳細框架

3 本地準備工做

安裝git
安裝Node.JSide

安裝完成後添加Path環境變量，使npm命令生效。新版已經會自動配置Path  
;C:\Program Files\nodejs\node_modules\npm

安裝Hexopost

npm install hexo-cli -g
npm install hexo --save

#若是命令沒法運行，能夠嘗試更換taobao的npm源
npm install -g cnpm --registry=https://registry.npm.taobao.org
#新建文件夾<folder>
cd <folder>
hexo init 
npm install

運行

$ hexo g
$ hexo s

Git Bush或者Linux環境下terminal會提示輸入http://0.0.0.0:4000 查看自帶landspace主題效果

參考-詳細

4 如何使用新主題，以Jekyll主題爲例

hexo提供的更多主題提供了豐富的主題能夠選擇，安裝方法大同小異，其中包括一款黑色背景的，好了，就它了。

安裝插件

npm install --save hexo-renderer-jade hexo-generator-feed

clone該主題到<folder>/themes/jekyll文件夾

git clone https://github.com/pinggod/hexo-theme-jekyll.git themes/jekyll

修改<folder>/_config.yml的theme值

添加feed屬性

複製Demo.md到source/_post文件夾

本地運行預覽

配置deploy屬性

deploy:
  type: git
  repository: 前面步驟在github建好的Repository的地址
  branch: master

發佈到遠程

hexo d

最後就能夠在yourname.github.io看到效果了

我的以爲不錯的其餘主題：

經常使用命令總結

hexo new "postName" # 新建文章
hexo new page "about" # 新建頁面
hexo generate #生成靜態頁面至public目錄
hexo server #開啓預覽訪問端口（默認端口4000，'ctrl + c'關閉server）
hexo deploy #將.deploy目錄部署到GitHub
hexo clean # 有時候配置沒有當即生效須要刪除cache

5 修改這個主題

5.1 添加新文章

$ hexo new [layout] <title>

Layout包括：post、page 和 draft

Hexo 默認以標題作爲文件名稱:title.md：

$ hexo new test-2249
INFO  Created: e:\workspace\github\blog-github\source\_posts\test-2249.md

若是設爲:year-:month-:day-:title.md

$ hexo new test-2247
INFO  Created: e:\workspace\github\blog-github\source\_posts\2015-11-07-test-224
7.md

二者都自動生成title和date，可是後者更便於管理。

5.2 修改主頁

首先對比主頁<foldername>/themes/jekyll/layout/index.jade:

extends _partial/layout

block content
    include _mixin/post
    +homePost()

block extra
    include _components/project
    include _components/selfintro

和歸檔頁<foldername>/themes/jekyll/layout/archive.jade:

extends _partial/layout

    block content
        include _mixin/post
        +archivePost()
        aside.sidebar
            include _sidebar/tag
            include _sidebar/post

刪掉index.jade中include _components/project這句就比較精簡了。
主頁樣式變成一篇新文章+我的介紹，直接修改jekyll/_config.yml下selfIntro:部分並不能使人滿意，這裏直接修改/layout/_components/selfintro.jade

section.selfintro
    .wrap.row-flex.row-flex-row.limit-width
        .sign
            img(src="img/github.png", alt="")
        .intro
            if theme.selfIntro.title
                h3.title
                    != theme.selfIntro.title
            else 
                h3.title 超爽der
            if theme.selfIntro.content
                p.content 
                    != theme.selfIntro.content
            else 
                p.content 空空
            
            // 默認的href都爲空，填上連接
            ul.contact
                li 
                    a(href="https://github.com/lawlietfans") GitHub
                li
                    a(href="http://weibo.com/lawlietfans") Weibo

接着再找一個合適的logo替換github.png就能夠了（不用也行。。），logo背景透明才能和主題融合

see more: Jade Syntax Documentatio

Comments
// single line comment
//- invisible single line comment

5.3 修改頭部導航

從這裏/layout/_components/nav.jade添加修改menu

nav
        ul.nav-list
            li.nav-list-item
                a.nav-link(href= theme.menu['home'] class=is_home() ? 'active' : '')
                    = __('index.title')
            li.nav-list-item
                a.nav-link(href= theme.menu['blog'] class= is_archive() || is_post() ? 'active' : '')    
                    = __('archive.title')
            li.nav-list-item
                a.nav-link(href= theme.menu['rss'])
                    = __('rss.title')
            //li.nav-list-item
            //    a.nav-link(href= theme.menu['github'] target="_blank")    
            //        = __('github.title')

依我的口味酌情修改便可。除此以外，RSS插件安裝以後本地預覽是沒效果的，通常部署以後過段時間纔有效

5.4 側邊欄

layout/_sidebar/包含post.jade、tag.jade、和toc.jade三個部件，理論上均可以添加到archive.jade

extends _partial/layout

block content
    include _mixin/post
    +archivePost()
    aside.sidebar
        include _sidebar/tag
        include _sidebar/post

可是添加include _sidebar/toc以後會報錯以下：

Unhandled rejection TypeError: e:\workspace\github\blog-github\themes\jekyll\lay
out\_sidebar\toc.jade:1
  > 1| if toc(page.content, {list_number: false})
    2|   h3 文章目錄
    3|   != list_tags({amount: 5, show_count: false})
    4|

有待達人解決