hexo+github搭建我的博客（詳細配置講解）

時間  2019-11-11
標籤 hexo+github hexo github 搭建 我的 博客 詳細 配置 講解 欄目 Git 简体版
原文   原文鏈接

前言

GitHub page提供了免費的服務搭建javascript

  1. 免費域名 xxx.github.io xxx是你的GitHub用戶名
  2. 免費的代碼存儲空間
  3. 全是靜態文件，快速訪問
  4. git版本管理，能快速回滾或者切換的某個版本

準備工做

註冊GitHub帳號

（若是已擁有GitHub帳號 無需從新註冊） css

點擊sign in 頁面的Create an accounthtml

註冊頁面信息填寫： java

註冊完成以後直接登陸node

node環境

本地安裝nodejs環境，此處就不在詳細介紹安裝了。react

安裝git

爲了把本地的網頁文件上傳到github上面去，咱們須要用到分佈式版本控制工具————Git[下載地址]。git

安裝選項仍是所有默認，只不過最後一步添加路徑時選擇Use Git from the Windows Command Prompt，這樣咱們就能夠直接在命令提示符裏打開git了。github

安裝完成後在命令提示符中輸入git --version驗證是否安裝成功。shell

window須要安裝git bash或者其餘工具來支持git命令的使用npm

GitHub博客註冊

接下來就是去GitHub上註冊一個git page來存放咱們的博客靜態頁面

點擊新增項目

打開新增頁面

填寫新增信息。

填寫注意事項:

  1. name填寫XXX.github.io
  2. 上面的XXX就是你的GitHub用戶名owner
  3. 必定要填寫.github.io後綴 否則就建立成普通項目了

建立完成會自動生成https://gongchenghuigch.githu... 這樣的訪問地址

Repository那麼必定要按規則填寫 否則後期會出現博客代碼提交不上去的問題

若是你的這個page地址已佔用看是否能把它遷移到別的page下面

配置SSH key

在本地代碼push是須要你的GitHub權限，可是直接使用用戶名和密碼太不安全了，因此咱們使用ssh key來解決本地和服務器的鏈接問題。

本地公鑰生成

ssh-keygen -t rsa -C "郵箱地址"

若是本地目錄下面已存在 直接覆蓋原有的就能夠

GitHub配置

setting>SSH and GPG keys>New SSH key

copy本地剛剛生成的.ssh/id_rsa.pub裏面的所有內容

每一個人生成的目錄地址多是不同的，能夠在ssh生成的時候看到你本地的生成地址

檢測是否添加成功

ssh -T git@github.com # 注意郵箱地址不用改

若是提示Are you sure you want to continue connecting (yes/no)?，輸入yes，而後會看到：

Hi gongchenghuigch! You've successfully authenticated, but GitHub does not provide shell access.

看到這個信息說明SSH已配置成功

git全局設置

git config --global user.name "xxx"// 你的github用戶名，非暱稱
git config --global user.email  "xxx@163.com"// 填寫你的github註冊郵箱

使用hexo

簡介

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其餘渲染引擎）解析文章，在幾秒內，便可利用靚麗的主題生成靜態網頁。

hexo中文文檔
個人我的博客

原理

因爲github pages存放的都是靜態文件，博客存放的不僅是文章內容，還有文章列表、分類、標籤、翻頁等動態內容，假如每次寫完一篇文章都要手動更新博文目錄和相關連接信息，相信誰都會瘋掉，因此hexo所作的就是將這些md文件都放在本地，每次寫完文章後調用寫好的命令來批量完成相關頁面的生成，而後再將有改動的頁面提交到github。

安裝hexo

npm install -g hexo-cli

初始化

在你電腦找一個文件目錄下執行

$ hexo init <folder>
$ cd <folder>
$ npm install

執行完成會出現如下的目錄結構：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml網站的 配置 信息，您能夠在此配置大部分的參數。

本地啓動

hexo server 或者 hexo s

瀏覽器窗口訪問http://localhost:4000 會出現如下頁面：

這個是默認主題 比較醜陋；下面會介紹一些我的比較喜歡的主題。

發佈

配置_config.yml中有關deploy的部分：

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

注意：

repository不要寫成git clone的https的地址

錯誤寫法：

deploy:
  type: git
  repository: https://github.com/gongchenghuigch/gongchenghuigch.github.io.git
  branch: master

配置完以後直接執行命令：

hexo d

執行完命名以後會在本地生成public打包的靜態文件和.deploy_git提交git的編譯以後的靜態文件

public和.deploy_git下編譯的靜態文件以下：

若是在開發過程當中想看的編譯的靜態文件直接執行命令：

hexo generate

注意：

在發佈時若是本地已存在public須要執行hexo clean或者手動刪除public目錄，否則不會提交最新代碼

新增文章

hexo new page test

hexo會建立source/test/index.md

hexo new page --path _posts/text "測試頁面"

hexo會建立source/_posts/text.md同時頁面title爲「測試頁面」

主題個性化設置

我的比較喜歡的主題是hexo-theme-matery，下面也都是基於這個主題的一些配置

主題下載

項目下面執行

git clone https://github.com/blinkfox/hexo-theme-matery.git themes/matery

更換根目錄下的_config.yml配置文件中的theme參數

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

修改爲你剛剛clone到本地要更換的主題

文章頭部設置

將/scaffolds/post.md修改成以下代碼：

---
title: {{ title }}
date: {{ date }}
top: false
cover: false
password:
summary:
tags:
categories:
---

效果示例：

---
title: TypeScript聲明文件
date: 2019-09-05 10:29:29
categories: 
- TypeScript
tags: 
- TypeScript
---

導航配置

根目錄_config.yml配置

title: gongchenghui
subtitle: 淺夏晴空
description: 北冥有魚，其名爲鯤，鯤之大，不知其幾千裏也；
             化而爲鳥，其名爲鵬.
keywords: gongchenghui,github
author: 淺夏晴空
language: zh-CN
timezone:

主題配置themes/matery/_config.yml

menu:
  主頁:
    url: /
    icon: fa-home
  標籤:
    url: /tags
    icon: fa-tags
  分類:
    url: /categories
    icon: fa-bookmark
  工具:
    url: /friends
    icon: fa-rocket
  歸檔:
    url: /archives
    icon: fa-archive
  關於:
    url: /about
    icon: fa-user-circle-o

效果：

標籤

頁面文章標籤配置：

---
title: nvm版本管理
date: 2019-09-05 10:29:29
tags: 
- nodejs
- npm
- nvm
---

在每一個md文件的頭部添加tags標籤屬性， 標籤下面能夠寫任意的標籤value值；

文章裏面展現效果以下（左側）：

導航上配置完標籤以後須要在本地新建標籤的目錄

hexo new page tags

切換到標籤頁展現以下：

點擊每一個標籤都能篩選出該標籤下對應的文章。

分類

文章分類配置：

---
title: nvm版本管理
date: 2019-09-05 10:29:29
categories: 
- nodejs
---

文章內部展現效果以下（右側）：

導航上配置完分類以後須要在本地新建分類的目錄

hexo new page categories

切換到分類頁展現以下：

404頁面

原來的主題沒有404頁面，首先在/source/目錄下新建一個404.md，內容以下：

---
title: 404
date: 2017-07-19 16:41:10
type: "404"
layout: "404"
description: "你訪問的頁面被外星人叼走了 :("
---

而後在/themes/matery/layout/目錄下新建一個404.ejs文件，內容以下：

<style type="text/css">
    /* don't remove. */
    .about-cover {
        height: 75vh;
    }
</style>

<div class="bg-cover pd-header about-cover">
    <div class="container">
        <div class="row">
            <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
                <div class="brand">
                    <div class="title center-align">
                        404
                    </div>
                    <div class="description center-align">
                        <%= page.description %>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 天天切換 banner 圖.  Switch banner image every day.
    $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>

效果以下：

添加建站時間

修改/themes/matery/layout/_partial/footer.ejs文件，在最後加上

<script language = javascript >
    function siteTime() {
        window.setTimeout("siteTime()", 1000);
        var seconds = 1000;
        var minutes = seconds * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth() + 1;
        var todayDate = today.getDate();
        var todayHour = today.getHours();
        var todayMinute = today.getMinutes();
        var todaySecond = today.getSeconds();
        var t1 = Date.UTC(2018, 08, 11, 00, 00, 00); //北京時間2018-2-13 00:00:00 
        var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond); 
        var diff = t2 - t1; var diffYears = Math.floor(diff / years); 
        var diffDays = Math.floor((diff / days) - diffYears * 365); 
        var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours); 
        var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes); 
        var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds); document.getElementById("sitetime").innerHTML = "本站已運行 " +diffYears+" 年 "+diffDays + " 天 " + diffHours + " 小時 " + diffMinutes + " 分鐘 " + diffSeconds + " 秒"; 
    } 
    siteTime(); 
</script>

而後在適當位置加上一下代碼

<span id="sitetime"></span>

如：

<div class="col s12 m8 l8 copy-right">
    <span id="sitetime"></span> <br>
    本站由&copy;<a href="https://gongchenghuigch.github.io/" target="_blank">gongchenghui</a>基於
    <a href="https://hexo.io/" target="_blank">Hexo</a> 的
    <a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">hexo-theme-matery</a>主題搭建.

添加萌萌的動漫人物

先看看添加卡通人物以後的效果：

😯😲

安裝插件

npm install --save hexo-helper-live2d

安裝下載動畫人物庫 如：

npm install live2d-widget-model-z16 -D

根目錄_config.yml配置裏面添加：

live2d: 
  enable: true 
  scriptFrom: local 
  pluginRootPath: live2dw/ 
  pluginJsPath: lib/ 
  pluginModelPath: assets/ 
  tagMode: false 
  log: false 
  model: 
    use: live2d-widget-model-z16 
  display: 
    position: right 
    width: 150 
    height: 300 
  mobile: 
    show: true 
    react: 
      opacity: 0.7

動畫庫的樣式示例：

Epsilon2.1

Gantzert_Felixander：

ni-j：

nico：

shizuku：

z16：

動漫人物只好不要和不蒜子一塊兒使用，否則不蒜子會顯示不出來。

添加網易雲音樂

如何在文章裏面插入音樂呢？

打開網易雲音樂網頁版，找到你本身想聽的音樂

點擊生成外連接：

而後把裏面的HTML代碼複製到你的文章裏面就能夠了。

添加搜索

安裝搜索插件：

npm install hexo-generator-search --save

根目錄_config.yml配置：

search:
  path: search.xml
  field: post
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程