hexo + githubpage 搭建我的博客

github + hexo 搭建博客

大學時搭建過 github 博客，可是後來沒怎麼弄了。感受有點折騰，就沒有繼續維護了，今天再來從新搭建一個博客。本文記錄搭建操做。

預備知識：

• npm 命令；
• git 命令
• github 常見操做

環境要求：

• node
• git

個人環境：

$ git version
git version 2.15.1.windows.2
$ node -v
v8.11.1
$ npm -v
6.4.0

安裝 hexo

npm i -g hexo-cli

在某個文件夾內初始化 hexo 博客所須要的文件

mkdir myBlog  # /e/HexoPages 新建一個文件夾
cd myBlog
npm i # 安裝npm 依賴

獲得以下目錄：

├── _config.yml # 網站的配置信息，您能夠在此配置大部分的參數。 
├── package.json
├── scaffolds # 模版文件夾
├── source  # 資源文件夾，除 _posts 文件，其餘如下劃線_開頭的文件或者文件夾不會被編譯打包到public文件夾
|   ├── _drafts # 草稿文件
|   └── _posts # 文章Markdowm文件 
└── themes  # 主題文件夾

本地預覽博客：

hexo s

打開http://localhost:4000便可看到效果。

建立託管博客的倉庫

倉庫名字必須用用戶名.github.io，須要公開。

部署本地博客到 gitbub

1. 修改_config.yml

打開 _config.yml ，將 deploy 修改以下注意空格

deploy:
  type: git # 版本管理工具
  repo: # 倉庫信息
    github: https://github.com/JackZhouMine/jackzhoumine.github.io
  branch: master # 使用分支

其餘配置也能夠修改，好比我將站點信息修改以下：

# Site
title:jackzhoumine
subtitle:
description:
keywords:
author: jackzhoumine
language:
timezone:

1. 安裝 hexo-deployer-git

npm i -S hexo-deployer-git

1. 部署

hexo g -d

打開個人主頁連接 https://jackzhoumine.github.io，看到頁面就部署成功了。

建立文章

1. 建立文章

執行hexo new '文章標題'，會在source/_posts文件夾內新建一個md文件，就可在裏面寫文章了，固然也能夠手動建立。

$ hexo new  first-note
INFO  Created: E:\HexoPages\myBlog\source\_posts\first-note.md

1. 預覽效果

建立完成，執行如下命令,在本地預覽效果：

hexo g
hexo s

1. 部署到線上

hexo clean # 清除緩存文件（db.json）和靜態文件。更改後不生效，就須要運行該命令。
hexo g -d # 部署到線上

1. 建立草稿

可先建立草稿，想發佈時，在發佈。

hexo new draft "文章標題" # 會在 /source/-drafts 裏生成草稿
hexo publish filename

給 markdown 文章加入圖片

使用本地圖片，markdown 筆記移動後，圖片路徑失效，免費的圖牀可能到倒閉，畢竟都是小公司。解決辦法是將全部圖片在一個git倉庫裏管理起來，託管在 github （沒有巨硬這個財大氣粗的土豪作後臺，也倒不了）上，安全放心。
須要用到圖片時，打開圖片，而後在代碼塊左上方點 Download 按鈕，打開的新標籤裏只有圖片了，複製地址欄圖片連接，相似https://raw.githubusercontent.com/xxxx到文章裏，就可放心飲用了。

高級主題

能夠爲博客增長評論功能，方便與他人交流。增長訪客統計等。

增長評論功能

yilia 主題配置開啓就可。
疑問：爲什麼disqus評論底部會顯示其餘博客的評論內容呢？

增長訪客統計

使用不蒜子統計功能，免費好用。
打開 themes/yilia/layout/_partial/footer.ejs，
在id爲footer-info的div後面增長如下內容：

<div calss="count-span">
      <span id="busuanzi_container_site_pv">
        總訪問量: <span id="busuanzi_value_site_pv"></span>|
      </span>
      <span id="busuanzi_container_site_uv">
        總訪客: <span id="busuanzi_value_site_uv"></span>
      </span>
</div>

在footer頂部增長統計腳本：

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

部署便可看到效果了，可增長一些好看的樣式。

增長 stackoverflow 技術媒體

yilia 主題沒有引入 stackoverflow ,可執行增長。
Acfun已經涼了，在 themes\yilia\source\main.0cf68a.css中搜索acfun，替換成stackoverflow，圖標就不換了。

寫在最後

發現一些網站，專門爬取別人寫的文章，也不註明出處，該從此發表文章，都增長不限於打賞碼、微信公衆號等信息。

若有幫助，謝謝您請我喝可樂：