linux環境hexo和GithubPages搭建我的博客

時間 2020-01-17

標籤 linux 環境 hexo githubpages 搭建我的博客欄目 Linux 简体版

原文原文鏈接

什麼是Hexo

Hexo 是一個簡單地、輕量地、基於Node的一個靜態博客框架，能夠方便的生成靜態網頁託管在github和Heroku上，引用Hexo做者 @tommy351 的話：javascript

快速、簡單且功能強大的 Node.js 博客框架。A fast, simple & powerful blog framework, powered by Node.js.目前，在github上搭建博客系統使用最多就是Hexo和Jekyll，Jekyll是基於Ruby開發的。html

GitHub Pages優勢

免費：github提供gh-pages服務是免費的，有300MB空間；
開源：因爲github開源的緣由，有不少人蔘與其中，天然技術支持很好。
便捷：博客徹底託管在github上，基本上不須要花時間去管理，博客使用Markdown語法，上手很容易。java

配置環境

安裝 epel源

rpm -Uvh http://dl.fedoraproject.org/pub/epel/beta/7/x86_64/epel-release-7-0.2.noarch.rpm

安裝nodejs

curl -sL https://rpm.nodesource.com/setup | bash -
yum install -y nodejs

安裝HEXO

npm install -g hexo

初始化

建立一個文件夾，如：Blog，cd到Blog裏執行hexo init的。命令：node

hexo init

生成靜態頁面linux

hexo generate（hexo g也能夠）

啓動本地服務，進行文章預覽調試，命令：git

hexo server

瀏覽器輸入http://10.10.3.61:4000/ (由於個人linux 裝在虛擬機上 ,若是你的linux是實體機,直接訪問 http://localhost:4000),本地已經簡單的設置好了，可是如今域名和服務器都是基於本身的電腦，接下來須要跟github進行關聯.github

創建Repository

創建與你用戶名對應的倉庫，倉庫名必須爲【your_user_name.github.io】，固定寫法而後創建關聯，目錄結構以下：chrome

.
├── .deploy       #須要部署的文件
├── node_modules  #Hexo插件
├── public        #生成的靜態網頁文件
├── scaffolds     #模板
├── source        #博客正文和其餘源文件, 404 favicon CNAME 等都應該放在這裏
|   ├── _drafts   #草稿
|   └── _posts    #文章
├── themes        #主題
├── _config.yml   #全局配置文件
└── package.json

編輯配置文件_config.yml

翻到最下面，改爲我這樣子的，注意： : 後面要有空格npm

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

執行以下命令才能使用git部署json

npm install hexo-deployer-git --save

發佈博客到github

hexo deploy

如今我的博客就創建好了
而後再瀏覽器中輸入https://wangxujun163163.githu...，個人 github 的帳戶叫 wangxujun163163 ,把這個改爲你 github 的帳戶名就好了

添加博文

hexo new "postName"  #新建博文,其中postName是博文題目

博文會自動生成在博客目錄下source/_postspostName.md

文件自動生成格式:

title: "first article"  #博文題目
date: 2014-11-21 11:25:38      #生成時間
tags:                    #標籤, 多個標籤也可使用格式[tag1, tag2, tag3,...]
- tag1
- tag2
- tag3

---
正文, 使用 Markdown 語法書寫

若是不想博文在首頁所有顯示, 並能出現閱讀全文按鈕效果, 須要在你想在首頁顯示的部分下添加

<!--more-->

主題更改

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

在./_config.yml，修改主題爲yilia
theme: yilia
這是yilia主題的預覽效果

若是以爲很差看能夠換next主題

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

在./_config.yml，修改主題爲next
theme: next
在切換主題以後咱們最好使用 hexo clean 來清除 Hexo 的緩存。

驗證主題

首先啓動 Hexo 本地站點，並開啓調試模式（即加上 --debug），整個命令是 hexo s --debug。在服務啓動的過程，注意觀察命令行輸出是否有任何異常信息
當命令行輸出中提示出：

INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

此時便可使用瀏覽器訪問 http://localhost:4000，檢查站點是否正確運行。

設置站點語言

在./_config.yml，設置簡體中文
language: zh-Hans

設置頭像

編輯站點配置文件_config.yml，新增字段 avatar，值設置成頭像的連接地址。
avatar: https://avatars3.githubuserco...

添加多說評論

使用多說前須要先在多說建立一個站點，填寫站點相關信息。多說域名這一欄填寫的便是你的 duoshuo_shortname
編輯站點配置文件_config.yml，新增字段 duoshuo_shortname
duoshuo_shortname: wangxujun163163

添加百度統計

登陸百度統計，定位到站點的代碼獲取頁面

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?54d6bb2751acd80aacb143d98697dce2";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

編輯站點配置文件，新增字段 baidu_analytics 字段，值設置成你的百度統計腳本 id

發佈靜態代碼到github

hexo clean  #刪除緩存
hexo g #生成靜態頁
hexo d  #發佈代碼

next 主題的詳細配置請參考 http://theme-next.iissnan.com/theme-settings.html

開啓打賞功能

只須要主題配置文件中填入微信和支付寶收款二維碼圖片地址便可開啓該功能。
reward_comment: 堅持原創技術分享，您的支持將鼓勵我繼續創做！
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image

騰訊公益404頁面

騰訊公益404頁面，尋找丟失兒童，讓你們一塊兒關注此項公益事業！效果以下 https://wangxujun163163.githu...

使用方法，新建 404.html 頁面，放到主題的 source 目錄下，內容以下：

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
</head>
<body>

<script type="text/javascript" src="http://www.qq.com/404/search_children.js"
        charset="utf-8" homePageUrl="your site url "
        homePageName="回到個人主頁">
</script>

</body>
</html>

添加「標籤」頁面

hexo new page tags

注意：若是有啓用多說或者 Disqus 評論，頁面也會帶有評論。若須要關閉的話，請添加字段 comments 並將值設置爲 false，如：

---
title: tags
date: 2017-02-14 17:38:06
type: "tags"
comments: false
---

添加「分類」頁面

hexo new page categories
---
title: categories
date: 2017-02-14 17:39:40
type: "categories"
comments: false
---

訂閱微信公衆號

在每篇文章的末尾顯示微信公衆號二維碼，掃一掃，輕鬆訂閱博客。

在微信公衆號平臺下載您的二維碼，並將它存放於博客source/uploads/目錄下。

而後編輯主題配置文件，以下：

配置示例

# Wechat Subscriber
wechat_subscriber:
  enabled: true
  qcode: /uploads/wechat-qcode.jpg
  description: 歡迎您掃一掃上面的微信公衆號，訂閱個人博客！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。