Hexo+Github博客最簡教程-Dockerfile自動搭建

閒談

拿出你的氣質，打開你的電腦，借你半小時搭建好屬於你的hexo博客，小生用dockerfile自動幫你搭建好；
你只須要在你的mac或linux或windows上提早把docker安裝好，如何安裝不是個人重點，請參考Docker安裝；
做爲程序員，博客就像你的影子，我都已經忘了心裏曾經多少次告誡本身，必定要搭建一個屬於本身的技術博客，奈何日復一日過去了，近來終於落實到行動上來，所謂明日復明日，明日何其多，遲早要作的事，勸君晚作不如早作。

搭建Hexo

獲取基礎鏡像

Docker安裝成功以後方能進行接下來的操做，若是對Docker基本命令不熟悉又想真懂的能夠看下個人另外一篇文章Docker最簡教程。首先從個人Docker Hub倉庫上獲取基礎鏡像：

$ docker pull icoty1/ubuntu-hexo-blog # 從Docker hub上的icoty1用戶下獲取基礎鏡像
$ docker images # 查看本地全部鏡像，會發現icoty1/ubuntu-hexo-blog已經被pull下來了

生成Dockerfile

進入一個空的目錄下新建空文件Dockerfile，複製以下內容：

# 基礎鏡像
FROM icoty1/ubuntu-hexo-blog:latest

MAINTAINER icoty1 "https://icoty.github.io"

EXPOSE 4000

# hexo部分插件安裝，使支持rss，圖片，字數統計等功能
RUN npm install -g hexo-cli \
&& npm install hexo-server --save \
&& hexo init blog && cd /blog \
&& npm install \
&& npm install hexo-deployer-git --save \
&& npm install hexo-migrator-rss --save \
&& npm install hexo-asset-image --save    \
&& npm install hexo-wordcount --save \
&& npm install hexo-generator-sitemap --save \
&& npm install hexo-generator-baidu-sitemap --save \
&& npm install hexo-helper-live2d --save \
&& git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia \
&& sed "s/theme: landscape/theme: yilia/g" -i /blog/_config.yml

更換主題

Dockerfile中的最後兩行內容表示的含義是從github上把hexo-theme-yilia克隆下來並重命名成yilia，而後放到容器的/blog/themes/目錄下，其中hexo-theme-yilia是hexo的主題，hexo有不少種主題，用每一種主題搭建出來的hexo博客界面美觀和佈局都不盡相同，你能夠經過hexo官網上瀏覽每一種主題長啥樣子，經過github獲取主題的源碼倉庫，選擇一個你喜歡的主題，並相應的修改這兩行。假如你從github選擇的主題倉庫地址是https://github.com/yscoder/hexo-theme-indigo.git ， 那麼你須要按照以下方式進行修改，若是你就想用yilia，那麼你不須要作任何修改，我用的主題是https://github.com/theme-next/hexo-theme-next.git

&& git clone https://github.com/yscoder/hexo-theme-indigo.git themes/indigo \
&& sed "s/theme: landscape/theme: indigo/g" -i /blog/_config.yml

構建Hexo鏡像

在Dockerfile的同級目錄執行：

$ docker build -t icoty1/ubuntu-hexo . # 把icoty1/ubuntu-hexo替換成你取的名字
$ docker images    # 可以看到多出一條記錄icoty1/ubuntu-hexo，並能看到該鏡像的[IMAGE ID]

啓動容器

/* 把[IMAGE ID]替換成上一步構建出來的鏡像的ID，該句執行成功會多出來一個容器並有一個[CONTAINER ID]
* -v /home/yangyu/blog/：/blog/是把本機的/home/yangyu/blog/目錄映射到容器的/blog/目錄
* 經過目錄映射，你只須要在本機編輯/home/yangyu/blog/目錄下的文件，而不用每次都進入容器/blog/目錄下編輯文件
* -p 4000:4000 將主機的4000端口映射到容器的4000端口
*\
$ docker run -d -ti -p 4000:4000 -v /home/yangyu/blog/：/blog/ [IMAGE ID] /bin/bash 
$ docker ps -a    # 執行該句列出當前全部的容器
$ docker exec -it [CONTAINER ID] /bin/bash # 根據前一步的容器ID進入該容器內部
$ cd /blog/ && hexo s # 進入容器內部的/blog/目錄下，啓動hexo

瀏覽器測試

瀏覽器訪問http://localhost:4000 ，出現下圖說明已經成功，之後你的博客配置，文章撰寫和發佈等，都在/home/yangyu/blog/目錄下進行，這和在容器內部/blog/目錄下操做徹底對等。

Hexo部署到Github

註冊Github帳戶，若是已經註冊，跳過此步；
在github上倉庫「用戶名.github.io」，好比個人用戶名爲icoty，倉庫名則爲：icoty.github.io；

執行以下命令生成ssh key，執行完後複製~/.sshid_rsa.pub文件內的所有內容，按照圖示添加ssh keys，並粘貼保存到Key欄中，Title欄隨便取。

$ cd ~/.ssh
$ ssh-keygen -t rsa -C "youremail@example.com" # 全程回車
$ git config --global user.name "你的github用戶名"
$ git config --global user.email "你的github郵箱地址"

 

配置Hexo主題

編輯/blog/_config.yml文件，編輯標題、描述信息、Github信息，下圖參見個人：

# Site
title: 陽光瀝肩頭 彷彿自由人 # 標題
subtitle: # 子標題
description: Linux C++服務端 # 描述信息
keywords: 
author: icoty
language: zh-CN # 語言
timezone: # 時區

deploy:
- type: git
repository: git@github.com:icoty/icoty.github.io.git # 設置repository對應的連接
branch: master # 設置提交到的分支
message: Site updated at {{ now("YYYY-MM-DD HH:mm:ss") }} # 設置咱們提交的信息

執行以下命令發佈到github上，經過「https://你的github用戶名.github.io」訪問，個人是https://icoty.github.io

$hexo generate
$hexo deploy # 部署到GitHub

編輯/blog/themes/yilia/_config.yml文件，自定義其餘配置，如友鏈、評論、分享、頭像等，這些配置並非必定要作，作不作都行，只是配置的完善些，你的Hexo博客界面看起來美觀些，如何配置在此不一一贅述，請自行查看對應主題的官方文檔和Github說明。若是你能操做這裏，說明我這個教程仍是有效的，感謝你的堅持！

Hexo命令

Hexo搭建好後，你能夠寫博客發佈到GitHub 上，別人經過「https://你的github用戶名.github.io」就能訪問你的博客和看到你寫的文章，而這個章節就是教你怎麼在本地寫你的博客，寫博客用的MarkDown語法，推薦你安裝MarkDown編輯器Typora。下面列出寫博客過程當中經常使用的命令，這些命令都須要走到/blog/目錄下執行。

$hexo new "my-hexo" #新建my-hexo文章，在/blog/source/_post/目錄下生成my-hexo.md，在這個文件裏面寫你的文章
$hexo generate # 文章寫好後保存，而後執行這條命令，生成靜態頁面至public目錄
$hexo s # 而後開啓預覽訪問端口（默認端口4000，'ctrl+c'關閉server，‘ctrl+z’放到後臺運行），經過http://localhost:4000 查看效果，若是滿意就執行下一條命令發佈到github
$hexo deploy # 發佈到github，經過https://你的github用戶名.github.io 訪問
$hexo clean # 有時你寫文章和配置其餘內容後，總是不生效，就執行下該命令清除緩存文件 (db.json) 和已生成的靜態文件 (public)，不是刪除，你的文章仍然在的
$nohup hexo s & # 啓動hexo之後臺方式運行
$hexo new page "About" #新建About頁面，這個是配置Hexo界面多出來一個About佈局
$hexo help # 查看幫助
$hexo version #查看Hexo的版本

MarkDown語法

這個比較基礎，網上教程也一大堆，MarkDown很容易學，放心比九九表容易多了，只要你的markdown實際動手寫過一篇博文後就上手了，所以沒啥可說的。

Next主題配置

接下來的內容是針對next主題的配置，由於我選擇的是next，不一樣主題可能有差別，特此說明。

修改文章內連接文本樣式

打開themes/next/source/css/_common/components/post/post.styl文件，在文件最後且在@import以前添加以下代碼：

// 文章內連接文本樣式
.post-body p a{
color: #0593d3; //原始連接顏色
border-bottom: none;
border-bottom: 1px solid #0593d3; //底部分割線顏色
&:hover {
color: #fc6423; //鼠標通過顏色
border-bottom: none;
border-bottom: 1px solid #fc6423; //底部分割線顏色
}
}

文章末尾添加「文章結束」標記

在themes/next/layout/_macro/目錄下新建passage-end-tag.swig，填入以下內容：

<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文結束<i class="fa fa-paw"></i>感謝您的閱讀-------------</div>
{% endif %}
</div>

而後編輯themes/next/layout/_macro/post.swig，按照下圖添加代碼塊：

<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>

最後編輯themes/next/_config.yml，添加以下內容：

# 文章末尾添加「本文結束」標記
passage_end_tag:
enabled: true

添加網頁加載進度條

打開themes/next/_config.yml，搜索「pace:」，設置爲true。

pace: true

設置文章的顯示順序

編輯node_modules/hexo-generator-index/lib/generator.js，在return以前添加以下代碼：

posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) { // 兩篇文章top都有定義
if(a.top == b.top) return b.date - a.date; // 若top值同樣則按照文章日期降序排
else return b.top - a.top; // 不然按照top值降序排
}
else if(a.top && !b.top) { // 如下是隻有一篇文章top有定義，那麼將有top的排在前面（這裏用異或操做竟然不行233）
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date; // 都沒定義按照文章日期降序排
})

而後在每篇文章的頭部添加top字段，top值越大的文章顯示越靠前。

---
title: Hexo+Github博客最簡教程-Dockerfile自動搭建
date: 2019-04-18 15:23:05
top: 6
tags: [Hexo, Dockerfile, Linux, Github]
categories: [IDE]
copyright: ture
---

添加底部的小圖標

打開themes/next/layout/_partials/footer.swig搜索with-love，修改成以下代碼。從[fontawesom](https://fontawesome.com/icons?d=gallery&q=heart)選擇你喜歡的圖標名稱，我這裏選擇的是heart。

<span class="with-love" id="animate">
<i class="fa fa-heart" aria-hidden = "true"></i>
</span>

文章底部添加版權信息

在themes/next/layout/_macro/下新建 my-copyright.swig，填入以下內容：

{% if page.copyright %}
<div class="my_post_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

<!-- JS庫 sweetalert 可修改路徑 -->
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<p><span>本文標題:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
<p><span>文章做者:</span><a href="/" title="訪問 {{ theme.author }} 的我的博客">{{ theme.author }}</a></p>
<p><span>發佈時間:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>最後更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>原始連接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
<span class="copy-path" title="點擊複製文章連接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="複製成功！"></i></span>
</p>
<p><span>許可協議:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商業性使用-禁止演繹 4.0 國際</a> 轉載請保留原文連接及做者。</p> 
</div>
<script> 
var clipboard = new Clipboard('.fa-clipboard');
$(".fa-clipboard").click(function(){
clipboard.on('success', function(){
swal({ 
title: "", 
text: '複製成功',
icon: "success", 
showConfirmButton: true
});
});
}); 
</script>
{% endif %}

而後在themes/next/source/css/_common/components/post/下新建my-post-copyright.styl，填入以下內容：

.my_post_copyright {
width: 85%;
max-width: 45em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 0.93rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
color: #b5b5b5;
font-weight: bold;
}
.my_post_copyright .raw {
margin-left: 1em;
width: 5em;
}
.my_post_copyright a {
color: #808080;
border-bottom:0;
}
.my_post_copyright a:hover {
color: #a3d2a3;
text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
color: #000;
}
.my_post_copyright .post-url:hover {
font-weight: normal;
}
.my_post_copyright .copy-path {
margin-left: 1em;
width: 1em;
+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}
```

接着編輯themes/next/layout/_macro/post.swig文件，按照下圖位置添加以下代碼：
``` bash
<div>
{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}
</div> 

接着在themes/next/source/css/_common/components/post/post.styl文件最後添加以下代碼：

@import "my-post-copyright"

而後，還須要在文章的頭部添加copyright字段：

---
title: Hexo+Github博客最簡教程-Dockerfile自動搭建
date: 2019-04-18 15:23:05
top: 6
tags: [Hexo, Dockerfile, Linux, Github]
categories: [IDE]
copyright: ture
---

最後，編輯根目錄下的_config.yml文件，把url換成你的主頁：

# URL
## If your site is put in a subdirectory
url: https://icoty.github.io # 這裏換成你的主頁
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

添加網易雲音樂外鏈

登錄網易雲音樂網頁版；點擊我的頭像「個人主頁」；而後可以看到「我建立的歌單」，若是沒有則建立一個歌單；選中一個歌單點進去，可以看到「歌曲列表」，點擊「歌曲列表」右邊的「生成外鏈播放器」；而後點擊右下角的「複製代碼」，粘貼到themes/next/layout/_macro/sidebar.swig文件中指定的位置便可，個人是放在側欄中"友鏈"下面的。

設置文章縮略顯示

編輯themes/next/_config.yml，搜索auto_excerpt，設置爲true：

# Automatically Excerpt (Not recommend).
# 設置文章不顯示所有 點進去再顯示所有
# Use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: true
length: 150

自定義代碼塊樣式

打開themes/next/source/css_custom/custom.styl，添加以下內容：

// Custom styles.
code {
color: #ff7600;
background: #fbf7f8;
margin: 2px;
}
// 大代碼塊的自定義樣式
.highlight, pre {
margin: 5px 0;
padding: 5px;
border-radius: 3px;
}
.highlight, code, pre {
border: 1px solid #d6d6d6;
}

參考文獻

[1] Hexo-NexT配置超炫酷網頁

[2] Hexo一篇文章多個分類與級聯分類